Load whole page with jquery ajax

Question

I want to load whole page into my browser using ajax. I want it to look like general page navigation (like when user clicks some link). I have a select tag, and want to navigate to appropriate page when select is selected.

I guess I have to do it with ajax, I am trying like that:

 courseSelect.on('change', function(){
        var courseId = this.value;
        // start search of the course by courseId
        $(document).load('/courses/'+courseId+'');
    });

I get my html response, but nothing happens.

Answer 1

Use body instead of document :

$("body").load('/courses/'+courseId);

Also I would advice you to use a container instead of loading it fully on the document.

Something like this would what I would suggest you:

$("#content").html('<img src="loading.gif" />').load('/courses/'+courseId);