refresh div with jquery

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?

What is the point refreshing the div without putting new html into it? I assume you have original content in the div that gets changed somehow and needs to be put back in the div? — Thomas, May 03 '12 at 08:18
Just use .empty() on the div element to empty it or even .html('') — GillesC, May 03 '12 at 08:19
do you mean, you want a visual effect of refresh in the div? — Saanch, May 03 '12 at 08:20

score 36 · Accepted Answer · answered May 03 '12 at 08:26

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

I'll start a petition to terminate this 'foo bar foobar' era :) — Roko C. Buljan, May 03 '12 at 08:29
@RokoC.Buljan: Cause we all know how effective Internet protests are, especially at changing a cultural meme that's [been around somewhere between 50 and 80 years](http://en.wikipedia.org/wiki/Foobar#History_and_etymology) :) — Merlyn Morgan-Graham, May 03 '12 at 08:34

score 9 · Answer 2 · answered Nov 15 '14 at 12:36

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.

refresh div with jquery

2 Answers2

Linked

Related