Question

I found a nice example on how to use AJAX in jQuery at this link:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

I added contents from index.html file to my view.php file (I’m using CodeIgniter).

Everything looks okay, but when you want to switch to another section, page content doesn’t change (same content as before shows up).

I think maybe there is a problem, for menu.js file to pass data to CodeIgniter view.php file?

Could you give me any suggestions on how could I solve this problem? I hope this would be helpful for others too.

Menu.js file:

$(document).ready(function(){
//References
var sections = $("#menu li");
var loading = $("#loading");
var content = $("#content");

//Manage click events
sections.click(function(){
    //show the loading bar
    showLoading();
    //load selected section
    switch(this.id){
        case "home":
            content.slideUp();
            content.load("sections.html #section_home", hideLoading);
            content.slideDown();
            break;
        case "news":
            content.slideUp();
            content.load("sections.html #section_news", hideLoading);
            content.slideDown();
            break;
        case "interviews":
            content.slideUp();
            content.load("sections.html #section_interviews", hideLoading);
            content.slideDown();
            break;
        case "external":
            content.slideUp();
            content.load("external.html", hideLoading);
            content.slideDown();
            break;
        default:
            //hide loading bar if there is no selected section
            hideLoading();
            break;
    }
});

//show loading bar
function showLoading(){
    loading
        .css({visibility:"visible"})
        .css({opacity:"1"})
        .css({display:"block"})
    ;
}
//hide loading bar
function hideLoading(){
    loading.fadeTo(1000, 0);
};

});

Animations from javascript is working (loading/content/sections) , but the real content isn’t loaded from html file.

As I said it looks like this script can’t load content to the view.php file (which is CodeIgniter ‘view’ file)

Any help is highly appreciated.

Answer 1

CodeIgniter needs to serve sections.html and external.html. It will not do so by default.

Assuming view.php is used for the URL http://example.com/index.php/mycontroller/view, then jQuery will send requests for the following URLs.

http://example.com/index.php/mycontroller/sections.html
http://example.com/index.php/mycontroller/external.html

Unless you have told CodeIgniter what to do for these requests, CodeIgniter will return a 404 and your page content will not be updated.