jQuery UI संवाद अप्रत्याशित रूप से व्यवहार करता है

Question

jQuery UI संवाद मुझे दीवारों को ड्राइव करता है। मेरी समझ में सबसे अच्छी बात यह है कि यह कैसे काम करता है:

जब आप $('#myDialog').dialog({...}) करते हैं, तो यह #myDialog तत्व की प्रतिलिपि बनाता है और इसे आपके शरीर टैग के नीचे इस विचित्र विजेट चीज़ के अंदर ले जाता है। यह पागलपन है! यह संभवतः अद्वितीय डीओएम तत्वों (आईडी के साथ) को डुप्लिकेट करेगा जब यह ऐसा करता है।

तो मैं जो करने की कोशिश कर रहा हूं वह मूल तत्व (#myDialog) के HTML को रीफ्रेश करते समय इसे एक अनुमानित तरीके से व्यवहार करता है। मैं गतिशील ऐसा करते हैं, कभी कभी संवाद किसी भी अधिक खोलने नहीं करता है:

http://jsfiddle.net/t67y7/3/

या कभी कभी संवाद (क्योंकि यह पेज कि जिस तरह से के निचले भाग में कैश की गई है) वर्ष HTML के साथ खुलता है। इसके साथ क्या हो रहा है?

Answer 1

आप क्यों नहीं बस $ ("# dialogId") ("नष्ट") कहते हैं नहीं संवाद करीब समारोह पर, इस तरह:।

$("#dialogId").dialog({ 
    close: function() { 
     $(this).dialog("destroy"); 
     // you may want empty content after close if you use AJAX request to get content for dialog 
     $(this).html(''); 
    } 
} 

नष्ट समारोह सजाया कोड निकाल देंगे, और आपके अगली बार जब आप संवाद दिखाते हैं तो संवाद तत्व डुप्लिकेट नहीं होगा।

मैंने jsfiddle.net example पर एक नमूना कोड जोड़ा।

Answer 2

चूंकि किसी को भी इस जानवर के संवाद को कम करने का कोई विचार नहीं है, यहां तक ​​कि सबसे अच्छी बात यह है कि मैं आज तक आया हूं। मैं किसी भी बेहतर विकल्प स्वीकार करूंगा।

var original = $('#dialogId')[0]; 
var clone = $(original).clone().attr('id', 'dialogIdClone'); 
var saveHtml = $(original).html(); 
$(original).html(''); 
$(clone).dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 
     $(clone).remove(); 
     $(original).html(saveHtml); 
    } 
}); 

इस पूरे पागलपन का उद्देश्य पृष्ठ पर अद्वितीय मूल संवाद का HTML रखना है। मुझे सच में यकीन नहीं है कि यह संवाद का अंतर्निहित व्यवहार क्यों नहीं हो सकता ... असल में, मुझे समझ में नहीं आता कि jQuery UI को HTML को क्लोन करने की आवश्यकता क्यों है।

Answer 3

मैं जानता हूँ कि यह थोड़ी देर के लिए तैनात किया गया है, लेकिन एक कम व्यापक तरीका इस मुद्दे को संभालने के लिए होगा:

$('#your-dialog').dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 

    } 
}); 
$('#your-dialog').remove(); 

यह संवाद विजेट की वजह से है प्रदर्शन को नियंत्रित करने में सक्षम होना चाहता है और लपेट जाएगा मूल संवाद की आंतरिक सामग्री तब शरीर के नीचे एक नया ब्रांड बनाते हैं।

इस समाधान का ड्रॉ बैक है कि यह सुनिश्चित करने के लिए कि आपके सभी तृतीय पक्ष लाइब्रेरी विजेट ठीक से काम करेंगे, संवाद को आरंभ करने वाला पहला होना चाहिए।

Answer 4

आपको इसे खोलने से पहले संवाद को खाली करने की आवश्यकता है।

$("#dialogId").html(''); 
$("#dialogId").dialog({ 
close: function() { 
    $(this).dialog("destroy"); 
} 
}