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