CODEWITHSUNDEEP
javascriptjqueryajax
Paul Mckay
Paul Mckay

Reputation: 105

Reloading/refreshing div with Ajax

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,

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.

Upvotes: 0

Views: 1442

Answers (3)

francescortiz
francescortiz

Reputation: 551

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 (i.e.: $r.ajax)

Upvotes: 0

Mesut Tasci
Mesut Tasci

Reputation: 3130

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

Upvotes: 0

MirrorMirror
MirrorMirror

Reputation: 188

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.

Upvotes: 1

Related Questions