CODEWITHSUNDEEP
javascriptjqueryhtmlrefresh
Walrus the Cat
Walrus the Cat

Reputation: 2404

refresh div with jquery

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?

Upvotes: 17

Views: 207883

Answers (2)

Ibrahim Khaleel
Ibrahim Khaleel

Reputation: 91

I tried the first solution and it works but the end user can easily identify that the div's are refreshing as it is fadeIn(), without fade in i tried .toggle().toggle() and it works perfect. you can try like this

$("#panel").toggle().toggle();

it works perfectly for me as i'm developing a messenger and need to minimize and maximize the chat box's and this does it best rather than the above code.

Upvotes: 9

Merlyn Morgan-Graham
Merlyn Morgan-Graham

Reputation: 59101

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;
}​

Upvotes: 36

Related Questions