refresh div contents dynamically - php

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

Can you include the HTML with the #results_div div?

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