Using javascript function to load a view

Question

I trying to load a view into my div #teste with this.id through JavaScript without success. What's wrong on my function?

JavaScript function below

<script type="text/javascript">

var baseurl = '<?php site_url(); ?>'; //raiz do website

function navbutton(id) {

    $.ajax({
        type: 'GET',
        url: baseurl+'main/'+id,
        dataType: 'html',
        success: function(html) {
            $('#teste').html(html);
        }
    });
    }

HTML button

<li><a href="javascript:void(0)" id="contato" onclick="navbutton(this.id)">Contato</a></li>

My main Controller (one function to call all others views)

class Main extends CI_Controller {

var $_data = array();

public function index()
{
    if (!$this->uri->segment(1) && !$this->uri->segment(2)) {
        $view = 'inicio';
    }
    if ($this->uri->segment(1) && !$this->uri->segment(2)) {
        $view = $this->uri->segment(1, 'inicio');
    }
    if ($this->uri->segment(1) && $this->uri->segment(2)) {
        $view = $this->uri->segment(1, 'inicio') . '/' . $this->uri->segment(2, '');
    }
    if (!file_exists(APPPATH . 'views/' . $view . EXT)) {
        $view = "404";
        header("HTTP/1.0 404 Not Found");
    }

    $this->load->view('templates/header');
    $this->load->view($view, $this->_data);
    $this->load->view('templates/footer');

}

could you explain where you have errors? or what actually happen? Please get more details to give you needed answer — vasilenicusor
– vasilenicusor, Commented May 2, 2015 at 23:16
are the ajax base url same with browser ? because javascript has "Same origin policy" — vasilenicusor
– vasilenicusor, Commented May 2, 2015 at 23:45
i sugest to add error:function(v1,v2,v3){ alert('Something went wrong'); } on ajax , after sucess: { ....} to catch some response errors — vasilenicusor
– vasilenicusor, Commented May 2, 2015 at 23:47
i always get 'Uncaught ReferenceError: navbutton is not defined' even with $(document).ready(function() — Alvaro
– Alvaro, Commented May 2, 2015 at 23:57
take a look on my last edit of answer. If you have already solved, please add here your solution. — vasilenicusor
– vasilenicusor, Commented May 3, 2015 at 11:30

vasilenicusor · Accepted Answer · 2015-05-03 11:28:45Z

1

to avoid to get 'Uncaught ReferenceError: navbutton is not defined' error attach on click event function with javascript:

var baseurl = '<?php site_url(); ?>'; //raiz do website
function navbutton(id) {
    $.ajax({
        type: 'GET',
        url: baseurl+'main/'+id,
        dataType: 'html',
        success: function(html) {
            $('#teste').html(html);
        },
        error:function(v1,v2,v3){
            alert('Something went wrong'); }
    });
}

$("#contato").on('click',function(event){
    event.preventDefault();
    navbutton(this.id);
});

And on HTML use

<li><a href="#" id="contato">Contato</a></li>

JSFIDLE test - in this example the ajax request will get error 404 because the url is not defined proper but in you code must work.

HINT to make sure all code is in the proper place, take a look in the source code of page after is loaded in browser (CTRL+U)

edited May 3, 2015 at 11:28

answered May 2, 2015 at 22:59

vasilenicusor

2,0831 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alvaro Over a year ago

on my console still report an error.Uncaught ReferenceError: navbutton is not defined

vasilenicusor Over a year ago

add the declaration of navbutton before to use-it in html onclick

Alvaro Over a year ago

the example works fine, even with codeigniter -function is declared before my button-, but correction doesn't work with full code. i think is something wrong with ajax instructions, but idk what.

Tpojka · Accepted Answer · 2015-05-02 23:26:08Z

0

Are you trying to load string to element? In that case you need to pass third argument TRUE when loading view method.

$view = $this->load->view('templates/header', '', TRUE);
$view .= $this->load->view($view, $this->_data, TRUE);
$view .= $this->load->view('templates/footer', '', TRUE);
echo $view;

Check in docs here.

answered May 2, 2015 at 23:26

Tpojka

7,0812 gold badges32 silver badges41 bronze badges

2 Comments

Alvaro Over a year ago

I trying to render/load partial view. Load a page with javascript without refresh on codeigniter.

Tpojka Over a year ago

I've just pointed at how you can make a string not making page load. If you use ajax to get that string, although you need to post identifier for specific page, it could work.

Collectives™ on Stack Overflow

Using javascript function to load a view

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related