web-dev-qa-db-fra.com

rafraîchir div avec jquery

Je voudrais rafraîchir une div. Il doit contenir de nouvelles informations du serveur. Toutes les autres réponses supposent que vous avez obtenu les nouvelles données de votre demande $ .ajax et vous disent de charger ces données sur votre div, de les masquer et de les afficher à nouveau, comme ceci:

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

Je sais, je sais, je devrais probablement obtenir des données avec Ajax. Mais en ce moment, je veux simplement rafraîchir la div, sans rafraîchir la page, et sans mettre de nouveau HTML dans la div. Est-ce possible?

javascriptjqueryhtmlrefresh
18
Walrus the Cat

Je veux juste rafraîchir la div, sans rafraîchir la page ... Est-ce possible?

Oui, bien qu'il ne soit pas évident qu'il fasse quoi que ce soit à moins que vous ne changiez le contenu du div.

Si vous voulez juste l'effet de fondu graphique, supprimez simplement l'appel .html(data):

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

Voici une démo avec laquelle vous pouvez jouer: http://jsfiddle.net/ZPYUS/

Il modifie le contenu de la div sans passer un appel ajax au serveur et sans rafraîchir la page. Cependant, le contenu est codé en dur. Vous ne pouvez rien faire à ce sujet sans contacter le serveur d'une manière ou d'une autre: ajax, une sorte de demande de sous-page ou une sorte de rafraîchissement de page.

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;
}​
36
Merlyn Morgan-Graham

J'ai essayé la première solution et cela fonctionne mais l'utilisateur final peut facilement identifier que les div sont rafraîchissants car c'est fadeIn (), sans fondu j'ai essayé .toggle (). Toggle () et cela fonctionne parfaitement. tu peux essayer comme ça

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

cela fonctionne parfaitement pour moi car je développe un messager et j'ai besoin de minimiser et de maximiser les boîtes de discussion et cela le fait mieux que le code ci-dessus.

8
Ibrahim Khaleel