用jquery刷新div [英] refresh div with jquery

问题描述

我想刷新一个div。它应该有来自服务器的新信息。所有其他答案都假设你从$ .ajax请求中获得了新数据，并告诉你将这些数据加载到你的div上，隐藏它并再次显示，如下所示：

  $（＃panel）。hide（）。html（data）.fadeIn（'fast'）; 
  

我知道，我知道，我应该只是用Ajax获取数据。但现在，我只想刷新div，不刷新页面，也不需要将新的HTML添加到div中。这可能吗？

解决方案

我想刷新div，而不刷新页面。 。这是可能的吗？

是的，尽管它不会很明显，它会执行任何操作，除非您更改内容div。

如果您只想要图形淡入效果，只需删除 .html（data）调用：

  $（＃panel）。hide（）。fadeIn（'fast'）; 
  

下面是一个可以解决的演示： http://jsfiddle.net/ZPYUS/

它不改变div的内容ajax调用服务器，而不刷新页面。但内容是硬编码的。如果不以某种方式联系服务器，你无法做任何事情：ajax，某种子页面请求或某种页面刷新。
$ b html：

 < div id =panel>测试资料< / div> 
< input id =changePanelvalue =更改面板type =button> 
  

javascript：

  $（＃changePanel）。click（function（）{
 var data =foobar; 
 $（＃panel）。hide（）。html（data）.fadeIn（'fast'）; 
}）; 
  

css：

  div {
填充：1em; 
背景颜色：＃00c000; 
} 
 
 input {
 padding：.25em 1em; 
} 
  

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?

解决方案

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

这篇关于用jquery刷新div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！