动态刷新div内容

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(); });
});

Answer 2

您可以在#results_div div中包含HTML吗？

Answer 3

This is my best guess without html to work with:

$("a.follow").click(function(event) {
        event.preventDefault();
// show the linke
        $("#flash").fadeIn(300).html('Loading Result.');
//ajax load the 'mini div' result -- i guessed that this url pulls back the div you want
        $("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index', function(data, text, xhr){
      $('#flash').fadeOut("fast");
    });
        });