Question

I’d like to refresh a div. It should have new information from the server on it. All the other answers assume that you’ve gotten the new data from your $.ajax request and tell you to load that data onto your div, hide it, and show it again, like so:

$("#panel").hide().html(data).fadeIn('fast');

I know, I know, I probably should just get data with Ajax. But right now, I want to just refresh the div, without refreshing the page, and without putting new HTML into the div. Is this possible?

Answer 1

I want to just refresh the div, without refreshing the page … Is this possible?

Yes, though it isn’t going to be obvious that it does anything unless you change the contents of the div.

If you just want the graphical fade-in effect, simply remove the .html(data) call:

$("#panel").hide().fadeIn('fast');

Here is a demo you can mess around with: http://jsfiddle.net/ZPYUS/

It changes the contents of the div without making an ajax call to the server, and without refreshing the page. The content is hard coded, though. You can’t do anything about that fact without contacting the server somehow: ajax, some sort of sub-page request, or some sort of page refresh.

html:

<div id="panel">test data</div>
<input id="changePanel" value="Change Panel" type="button">​

javascript:

$("#changePanel").click(function() {
    var data = "foobar";
    $("#panel").hide().html(data).fadeIn('fast');
});​

css:

div {
    padding: 1em;
    background-color: #00c000;
}

input {
    padding: .25em 1em;
}​