J'ai un problème de flux de travail avec mes dialogues de jQuery lorsque vous essayez de créer les boîtes de dialogue, puis de faire une page de page partielle. Je vais essayer de passer par un exemple de scénario, et mes excuses à l'avance pour la description de longue durée:
Le chargement de la page, avec le HTML que j'aimerais être transformé en dialogues JQuery. Les dialogues sont créés sur document.Ready (en utilisant Pour que tout fonctionne bien. Le problème est qu'il y a des moments où je vais faire une recharge partielle de page en utilisant Ajax (à l'aide de ASP.NET MVC RenderPartial). La partie de la page que je suis rafraîchissante arrive à avoir tout le dialogue HTML, de sorte que ce qui soit ré-écrit. Mais rappelez-vous que la boîte de dialogue (avec toutes les classes de jQuery Wrapper, etc.) est déjà là le bas du document. Ce HTML ne faisait pas partie de la page Actualiser, alors maintenant je suis bloqué avec deux séries de dialogue HTML. Cela me donne toutes sortes de problèmes car j'ai des identifiants en double sur la page, et le comportement de JQuery sur ces éléments HTML devient imprévisible. Cela est encore pire lorsque je commence à faire 3, 4, 5 rafraîchissements partiels de page, car alors j'ai 3, 4, 5 séries de dialogue HTML (avec une seule boîte de dialogue réelle ayant été effectuée sur le document.Ready).
Je pense que je devrais peut-être détruire les dialogues ou quelque chose à un moment donné, mais je n'ai eu aucune chance avec cette approche. Est-ce que quelqu'un a des idées?
Merci beaucoup. .Dialog () ), mais la propriété AUTOOPEN est définie sur FALSE. Lorsque JQuery crée les dialogues (si j'utilise Firebug pour inspecter la page), la boîte de dialogue HTML est effectivement dépouillé de son emplacement normal et bloqué à la fin du document, avec des classes d'emballage autour de celle-ci. L'utilisateur ouvre les boîtes de dialogue en cliquant sur un lien qui fait simplement un $ dialogdiv.dialog ('Open') .
3 Réponses :
Selon Les docs détruire une boîte de dialogue supprime la fonctionnalité de dialogue et la restaure à C'est un état pré-init mais ne le retire pas du DOM.
Puisque vous remplacez le contenu et la boîte de dialogue, vous pouvez simplement retirer les anciens. P>
//inside document.ready
var myDialog=$('#myDialog').dialog(),
myOtherDialog=$('#myOtherDialog').dialog(),
permanentDialog=$('#permanentDialog').dialog(),
destroyableDialogs=[myDialog, myOtherDialog];
//ajax callback
success: function(data){
$.each(destroyableDialogs, function(i,n){
n.empty().remove();
});
}
@czarchaic, merci pour la réponse. Vous avez peut-être été la seule personne qui a pris le temps de lire toute la question. Une question de suivi, cependant, j'ai d'autres fenêtres de dialogue telles que les dialogues d'erreur et alertant que je ne voudrais pas vous débarrasser de. Celles-ci seraient vidées et supprimées également en utilisant la méthode que vous avez donnée. Et en regardant les dialogues jQuery fait, il donne à l'emballage externe la même liste de classes sur chacun, ce qui est ui-widget ui-widget ui-widget-widget-contenu ui-coin-tout ui-dragge . Comment puis-je spécifier les dialogues à vider et à supprimer et lesquels à ne pas? Merci encore.
Après avoir travaillé sur ce problème et la réponse préalable donnée, j'ai découvert quelques détails importants manquants de la réponse. Le point le plus important ici est que, tandis que Si Ajaxing Seul le contenu de la boîte de dialogue DIV, ce comportement n'est probablement pas critique car vous pouvez facilement trouver et réécrire le contenu de la DIV, où il réside dans le DOM. Si votre contenu de dialogue devient ajaxé en ligne avec d'autres objets, cependant, la déplacement d'une DIV de son emplacement d'origine entraînera probablement une ajaxie ultérieure de créer une autre div dans l'emplacement d'origine, ce qui entraîne plusieurs div du même ID. Par exemple, je demande une courte liste de produits et une longue liste de produits dans un appel Ajax. La liste courte va à l'écran et la liste longue va dans une boîte de dialogue cachée. Étant donné que les listes sont liées, il est logique de les attraper tous les deux dans un appel Ajax. Parce que la boîte de dialogue d'interface utilisateur a déplacé la liste longue du conteneur, il a été ajaxé et bloqué à la fin du corps HTML, lorsque je demande une nouvelle liste, je me retrouve avec deux divs avec le même ID, chacun contenant une liste longue différente. - un dans le conteneur Ajax et un à la fin du corps. La solution la plus correcte que je vois à gérer est de détruire d'abord complètement la vieille longue liste avant d'ajaxer une nouvelle. (On pourrait également vérifier les objets de dialogue d'interface utilisateur et déplacer la longue liste de code mais c'est encombrant et peut aussi perdre des attributs div.) dans le test (JQuery 1.4.4, UI 1.8.10), je a trouvé que Ainsi, le meilleur moyen de détruire à la fois l'interface utilisateur Wrapper de dialogue et l'original div semble être ceci: Si vous souhaitez être sûr de détruire toutes les copies - au cas où vous en créez trop de plusieurs appels avec trop d'appels Vous pouvez le faire en une seule ligne mais Il est moins évident que votre intention est la suivante: J'ai testé tout cela dans FF et certains d'entre eux dans IE8. .dialog ("détruire") rétablit la DIV à son état pré-init, il ne restaure pas la DIV à son emplacement d'origine dans le DOM. (La question de Bahdev mentionne comment la boîte de dialogue UI déplace la DIV en premier lieu.) Ceci est essentiel à l'opération AJAX et ce changement / non-changement de l'emplacement de div devrait être clarifié dans la documentation de JQuery (qui m'a sauvé beaucoup de Temps). .dialog ("détruire") sur l'original divigne fonctionne exactement identique au même que .remove () sur la boîte de dialogue de l'interface utilisateur DIV. C'est-à-dire que seule la boîte de dialogue des interfaces de dialogue des intervalles de dialogue d'interface utilisateur est éloignée et que l'original div est laissé dans son état d'origine. En d'autres termes, chacun des éléments suivants fait la même chose [Remarque: .empty () n'avait aucun effet notable]: .dialog () - vous avez besoin de quelque chose devant le sélecteur #id, tel que:
Firs check the dialog is already exist then destroy that one and re-initilaze dialog on rendering
if ($("#dialogId").hasClass('ui-dialog-content')) {
$('dialogId').dialog('destroy');
}
$("#dialogId").dialog({
title: 'Warning',
autoOpen: false,
modal: true,
width: 600,
closeOnEscape: true,
draggable: false,
resizable: false,
});