Question

Hello I am having trouble regarding div reloading when a new record has been added. What I wanted to do is to show first a loading image then after a record has been inserted it will reload the div.

$("a.follow").click(function(event) {
    event.preventDefault();
    $("#flash").show();
    $("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');

    $.ajax({
        //url: $(this).attr("href"),
        success: function(msg) {
            $("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index');
        }
    });
    return false;
});

That’s what I got to far when I’m trying the code it refreshes a whole physical of page on the div & not the desired div itself. . .

Sorry guys I am poor with jQuery and BTW this is in CodeIgniter.

Answer 1

Your problem is, that codeigniter obviously returns a whole html page. You have two choices:

Either return only a fragment (I don’t know how to do this in CI) or use jQuery to parse out the div you want. This can be done with the following code, assuming that the div you want is named <div id="results_div">...</div>

$("a.follow").click(function(event) {
    event.preventDefault();
    $("#flash").show();
    $("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');
    $("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index #results_div', function(){ $('#flash').hide(); });
});