使用Ajax重新加载/刷新div

Question

I'm trying to put a piece of jquery together to show a hidden div and at the same time, refresh the parent div so that the javascript can amend and display the new height.

This is what i have so far but after some research have found than to refresh a div you have to use ajax and was wondering if anyone could lend a hand.

var $r = jQuery.noConflict();
  $r(document).ready(function() {
      $r('#open').click(function () {
        $r('#expandable-2').show('slow');
        $r(this).load(location.href + '.panel > *');
      });
       $r('#close').click(function () {
        $r('#expandable-2').hide('1000');
        $r(this).load(location.href + '.panel > *');
      });
  });

So far I have this,

• a link with the id's of open and close
• once clicked they give the css property of display block and display none to a div expandable-2
• the part I'm stuck on is the refreshing of the parent div .panel in order to show the displayed div correctly.

Reason being is that I'm currently using the CodaSlider script in my page and the height is dynamically brought in depending on how much content is in the container. Now in order for the new content to be displayed when clicked open, the container needs to be refreshed thus showing the new content with a new height.

Hope that makes sense but any help would be awesome.

Answer 1

to "refresh" a div you just need to do:

document.getElementById("myDiv").innerHTML = new_content;

new_content may be the html returned by your ajax call but you definitely DON'T need an ajax call to "refresh" a div.

Answer 2

You can change html of a div with html method of jQuery.

$r(".content-div").html("Hello world");

If you want to load an html from server with ajax, you should use load function as below:

$r(".content-div").load("ajax/users.html");

Answer 3

There is a clear mess with your code. Just a few tips:

• If your parent div contains #expandable-2, then you won't be able to do the ajax call and show the animation at once, because the ajax call is gonna destroy the #expandable-2 element while it is appearing/disappearing.

• The proper way of loading external code through ajax into a div is:

   $r('.panel').load('/path/to/url'); 

  This will load the response of '/path/to/url' into the '.panel' div. Make sure that '/path/to/url' only returns the new content of the div , otherwise you cannot use $r('.panel').load, but an indirect approach must be used instead (ie: $r.ajax)