JQuery संवाद: आंशिक पृष्ठ रीफ्रेश कैसे करें और प्रत्येक बार

Question

पर नए संवाद प्राप्त करें, मेरे पास संवाद बनाने और फिर आंशिक पृष्ठ प्रस्तुत करने का प्रयास करते समय मेरे JQuery संवाद के साथ वर्कफ़्लो समस्या हो रही है। मैं एक नमूना परिदृश्य के माध्यम से जाने की कोशिश करूंगा, और लंबी समस्या के लिए अग्रिम में मेरी माफी मांगूंगा:

पृष्ठ लोड होता है, HTML के साथ जो मैं JQuery संवाद में बदलना चाहता हूं। संवाद document.ready पर बनाए गए हैं (.dialog() का उपयोग करके), लेकिन ऑटो ओपेन प्रॉपर्टी को गलत पर सेट किया गया है। जब JQuery संवाद बनाता है (यदि मैं पृष्ठ का निरीक्षण करने के लिए फ़ायरबग का उपयोग कर रहा हूं), तो डायलॉग एचटीएमएल वास्तव में अपने सामान्य स्थान से अलग हो जाता है और दस्तावेज़ के बहुत अंत में फंस जाता है, इसके आसपास कुछ रैपर वर्गों के साथ। उपयोगकर्ता एक लिंक पर क्लिक करके संवाद खोलता है जो सिर्फ $dialogDiv.dialog('open') करता है।

ताकि सभी ठीक काम कर सकें। समस्या यह है कि कई बार मैं AJAX का उपयोग करके आंशिक पृष्ठ रीलोड कर रहा हूं (एएसपी.नेट एमवीसी रेंडरपार्टियल का उपयोग करके)। जिस पृष्ठ पर मैं ताज़ा हूं, उसका हिस्सा उसमें सभी संवाद HTML होता है, ताकि पुनः लिखा जा सके। लेकिन संवाद याद रखें (सभी JQuery wrapper वर्गों के साथ, आदि) पहले से ही दस्तावेज़ के नीचे है। वह एचटीएमएल पेज रीफ्रेश का हिस्सा नहीं था, इसलिए अब मैं डायलॉग एचटीएमएल के दो सेट के साथ फंस गया हूं। यह मुझे सभी प्रकार की समस्याएं दे रहा है क्योंकि मेरे पास पृष्ठ पर डुप्लिकेट आईडी है, और इन HTML तत्वों पर jQuery व्यवहार अप्रत्याशित हो जाता है। जब मैं 3, 4, 5 आंशिक पृष्ठ रीफ्रेश करना शुरू करता हूं, तब भी यह और भी बदतर है, क्योंकि मेरे पास 3, 4, 5 डायलॉग एचटीएमएल 5 सेट हैं (दस्तावेज़ में पहले से ही एक वास्तविक संवाद किया गया है)।

मुझे लगता है कि मुझे किसी बिंदु पर संवाद या कुछ नष्ट करने की आवश्यकता हो सकती है, लेकिन मुझे इस दृष्टिकोण के साथ कोई भाग्य नहीं मिला है। क्या किसी के पास कोई विचार है?

बहुत बहुत धन्यवाद।

Answer 1

the docs के अनुसार एक संवाद को नष्ट करने से संवाद कार्यक्षमता हटा दी जाती है और इसे पूर्व-इनिट स्थिति में पुनर्स्थापित कर दिया जाता है लेकिन इसे डीओएम से नहीं हटाया जाता है।

चूंकि आप सामग्री और संवाद को बदल रहे हैं, तो आप पुराने लोगों को हटा सकते हैं।

$.ajax({ 
    url: '/some/url/', 
    success:function(data){ 
    $('.ui-dialog').empty().remove(); 
    //add the new html and make the dialogs 
    } 
}); 

आप के जवाब में टिप्पणी

मैं तुम्हें कोड नहीं देखा है, इसलिए मैं वास्तव में यकीन है कि कैसे आप सेटिंग्स संवाद कर रहे हैं नहीं कर रहा हूँ, लेकिन एक सामान्य अर्थ में मैं हो जाएगी केवल एक संवाद के साथ एक चर जो प्रतिस्थापित किया जाएगा।

//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(); 
    }); 
} 

Answer 2

इस समस्या के माध्यम से काम करने के बाद और उत्तर देने के बाद, मैंने उत्तर से कुछ महत्वपूर्ण विवरणों की खोज की। यहां सबसे महत्वपूर्ण बात यह है कि .dialog("destroy") div को अपने प्री-इनिट स्थिति में पुनर्स्थापित करता है, लेकिन यह डीओएम में अपने मूल स्थान पर div को पुनर्स्थापित नहीं करता है। (बीएएचडीव के सवाल का उल्लेख है कि यूआई संवाद पहली जगह में div को कैसे स्थानांतरित करता है।) यह अजाक्स ऑपरेशन के लिए महत्वपूर्ण है और div परिवर्तन के इस परिवर्तन/परिवर्तन में jQuery दस्तावेज़ में स्पष्ट किया जाना चाहिए (जो मुझे बहुत से बचाएगा पहर)।

यदि केवल संवाद div की सामग्री को अजाक्स करना है, तो यह व्यवहार संभवतः महत्वपूर्ण नहीं है क्योंकि आप आसानी से डीओएम में रहते हैं, चाहे वह डीवी सामग्री में आसानी से ढूंढ और पुनः लिख सकें। यदि आपकी संवाद सामग्री अन्य ऑब्जेक्ट्स के साथ अजाक्स इनलाइन हो जाती है, फिर भी, उसके मूल स्थान से एक div को स्थानांतरित करने के बाद बाद में अजाक्सिंग मूल स्थान में एक और div बनाने के लिए कारण बनती है जिसके परिणामस्वरूप एक ही आईडी के एकाधिक divs होते हैं।

उदाहरण के लिए, मैं उत्पादों की एक छोटी सूची और एक अजाक्स कॉल में उत्पादों की एक लंबी सूची का अनुरोध करता हूं।छोटी सूची स्क्रीन पर जाती है और लंबी सूची एक छिपे हुए संवाद में जाती है। चूंकि सूचियां संबंधित हैं, इसलिए उन्हें एक अजाक्स कॉल में दोनों को पकड़ना समझ में आता है। चूंकि UI संवाद ने कंटेनर से लंबी सूची को स्थानांतरित कर दिया था, इसलिए जब मैं एक नई सूची का अनुरोध करता हूं, तो मैं इसे अमेक्स किया गया था और एचटीएमएल बॉडी के अंत में फंस गया था, मैं एक ही आईडी के साथ दो divs के साथ समाप्त होता हूं, प्रत्येक में एक अलग लंबी सूची होती है - अजाक्स कंटेनर में से एक, और शरीर के अंत में एक। इसे संभालने का सबसे सही तरीका यह है कि पहले अजाक्सिंग से पहले पुरानी लंबी सूची को पूरी तरह नष्ट कर दें। (कोई भी यूआई संवाद वस्तुओं की जांच कर सकता है और कोड में लंबी सूची को स्थानांतरित कर सकता है लेकिन यह बोझिल है और div गुण भी खो सकता है।)

परीक्षण में (jQuery 1.4.4, UI 1.8.10), मैंने पाया कि .dialog("destroy") मूल div पर यूआई संवाद माता-पिता div पर बिल्कुल .remove() जैसा ही काम करता है। यही है, केवल यूआई संवाद रैपर divs को हटा दिया गया है, और मूल div अपने मूल स्थिति में पीछे छोड़ दिया गया है। [: .empty() कोई उल्लेखनीय प्रभाव नहीं पड़ा टिप्पणी]:

// Three different ways to destroy just the UI Dialog 
// (and leave the original div). 
$(".ui-dialog:has(#myDialog)").remove(); 
$("#myDialog").parents(".ui-dialog").remove(); 
$("#myDialog").dialog("destroy"); 

इस प्रकार, सबसे अच्छा तरीका है दोनों यूआई संवाद आवरण और मूल div प्रतीत होता है को नष्ट करने के दूसरे शब्दों में, निम्न में से प्रत्येक एक ही बात करता है इस हो:

// Remove the old dialog and div to make way for a new one via Ajax. 
$("#myDialog").dialog("destroy"); 
$("#myDialog").remove(); 

क्या आप वाकई सभी प्रतियों को नष्ट होना चाहते हैं - मामले में अगर आप गलती से .dialog() को भी कई कॉल के साथ भी कई बना सकते हैं - आप इस तरह के रूप में, #ID चयनकर्ता के सामने कुछ चाहिए :

// Remove all old dialogs and divs to make way for a new one via Ajax. 
$("div#myDialog").dialog("destroy"); 
$("div#myDialog").remove(); 

आप एक पंक्ति में ऐसा कर सकता है, लेकिन यह कम स्पष्ट है कि आपके इरादे है:

// Remove all old dialogs and divs to make way for a new one via Ajax. 
// This technique is not recommended. 
$("div#myDialog").parents(".ui-dialog").andSelf().remove(); 

मैं IE8 में एफएफ में यह और इसके बारे में कुछ के सभी परीक्षण किया गया।

Answer 3

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