jquery-ui-डायलॉग - डायलॉग क्लोज इवेंट में हुक कैसे करें

186

मैं jquery-ui-dialogप्लगइन का उपयोग कर रहा हूँ

मैं संवाद को बंद करने पर कुछ परिस्थितियों में पेज को रीफ्रेश करने का तरीका ढूंढ रहा हूं।

क्या संवाद से एक करीबी घटना को पकड़ने का एक तरीका है?

मुझे पता है कि करीबी बटन पर क्लिक करने पर मैं कोड चला सकता हूं लेकिन यह उपयोगकर्ता को भागने के साथ या शीर्ष दाएं कोने में x को कवर नहीं करता है।

— ब्राउनी
स्रोत

248

मैंने यह पाया है!

आप निम्न कोड का उपयोग करके करीबी घटना को पकड़ सकते हैं:

 $('div#popup_content').on('dialogclose', function(event) {
     alert('closed');
 });

जाहिर है कि मुझे जो कुछ भी करने की जरूरत है, मैं अलर्ट को बदल सकता हूं।
संपादित करें: Jquery 1.7 के रूप में, बाँध () बन गया है ()

— ब्राउनी
स्रोत

3

टाइपो: $ ('div # popup_content')। बाइंड ('डायलॉग्स', फंक्शन (इवेंट)) {...}

— CFNinja

1

यह मददगार है लेकिन $('div#popup_content')सही है? मुझे इसके साथ क्या प्रतिस्थापित करना चाहिए, मेरे संवाद को ध्यान में रखते हुए इस तरह खोला गया हैjQuery.fn.dialog.open({})

— जेक एन

मैं देख रहा हूं कि संवाद पहले बंद हो रहा है और फिर अलर्ट दिखाई देता है, अगर यह सभी के लिए समान स्थिति है, तो क्या कोई मेरी मदद कर सकता है ताकि अलर्ट पहले दिखाई दे और फिर ओके पर क्लिक करने पर खिड़की बंद हो जाए? सही मुझे ....

— changeme

5

इसे बाइंड () के बजाय ऑन () का उपयोग करने के लिए अपडेट किया जाना चाहिए जो अब अप्रचलित है।

— RBZ

2

ध्यान रखें कि यदि jQuery UI डायलॉग पहले कभी किसी पेज पर नहीं खोला गया है, तो DOM में ओवरले div मौजूद नहीं होगा। इसलिए, आप इसके बजाय ऐसा कुछ करने पर विचार कर सकते हैं:$('body').on('dialogclose', '.ui-dialog', function(){...});

— थूडन

192

मुझे विश्वास है कि आप इसे डायलॉग बनाते समय भी कर सकते हैं (मेरे द्वारा की गई परियोजना से कॉपी):

dialog = $('#dialog').dialog({
    modal: true,
    autoOpen: false,
    width: 700,
    height: 500,
    minWidth: 700,
    minHeight: 500,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

ध्यान दें close: CloseFunction

— डैरिल हेन
स्रोत

9

यह उत्तर मुझे स्वीकृत उत्तर की तुलना में अधिक सही लगता है। इसके अलावा, सही एपीआई प्रलेखन यहां पाया जा सकता है: api.jqueryui.com/dialog/#event-close

— क्रिस गिलम

2

जेक एन - आपको वास्तव में काम करने के लिए 'क्लोजफंक्शन' नामक संवाद के लिए एक फ़ंक्शन को लिखने की आवश्यकता है, उदाहरण के लिए, इसके ठीक ऊपर आप लिख सकते हैं var CloseFunction = function() { //Do your custom closing stuff here };

— एडम डिएम

यह एक विकल्प है, लेकिन समय पर विभिन्न स्थानों में कोड का उपयोग किया जा रहा है। जब आप विभिन्न संदर्भों में भिन्न व्यवहार जोड़ना चाहते हैं और मानकीकरण प्राप्त करने के लिए संवाद निर्माण कोड का पुन: उपयोग करना चाहते हैं, तो चयनित उत्तर काम करता है।

— नेक्टर्सॉफ्ट

आपके पास overlayदो बार है। यह सही नहीं है?

— राडबीक्स

1

यह काम करता है और निश्चित रूप से यहाँ एक आवश्यक और उपयोगी उत्तर है, लेकिन यह किसी भी समय संवाद बंद कर देता है, केवल एक्स या कुछ के साथ बंद होने पर, किसी भी तरह से बंद हो जाता है। इसलिए यदि आप एक्स या कैंसल बटन के साथ डायलॉग बंद होने पर कुछ कोड चलाना चाहते हैं, लेकिन ऐसा तब नहीं है जब यह कुछ और हो रहा हो (जैसे कि मेरे द्वारा सबमिट किए गए इनपुट को सही माना जाता है), तो यह नहीं होगा काम।

— मिकातो

31

$("#dialog").dialog({
    autoOpen: false,
    resizable: false,
    width: 400,
    height: 140,
    modal: true, 
    buttons: {
        "SUBMIT": function() { 
        $("form").submit();
    }, 
        "CANCEL": function() { 
        $(this).dialog("close");
    } 
    },
    close: function() {
      alert('close');
    }
});

— मो मिंग सी
स्रोत

21

$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

संवाद की "करीब" संपत्ति उसी के लिए करीबी घटना देती है।

— Taksh
स्रोत

16

यू भी यह कोशिश कर सकते हैं

$("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            height: 400,
            width: 150,
            position: 'center',
            title: 'Term Sheet',
            beforeClose: function(event, ui) { 
               console.log('Event Fire');
            },
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

— उमैर नूर
स्रोत

10

इसी से मेरा काम बना है...

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});

— morttan
स्रोत

8

JQuery 1.7 के रूप में, .on () विधि एक दस्तावेज़ में इवेंट हैंडलर संलग्न करने के लिए पसंदीदा तरीका है।

क्योंकि किसी ने वास्तव में उपयोग करने के साथ एक उत्तर नहीं बनाया। on()इसके बजाय bind()मैंने एक बनाने का फैसला किया।

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});

— Disper
स्रोत

6

नमूने के तहत विकल्प 'पास' जोड़ें और वह करें जो आप इनलाइन फ़ंक्शन चाहते हैं

close: function(e){
    //do something
}

— मेहदी रोस्टैयन
स्रोत

4

अगर मैं उस खिड़की के प्रकार को समझ रहा हूँ जिसके बारे में आप बात कर रहे हैं, तो वह $ (विंडो) नहीं होगी ।unload () (डायलॉग विंडो के लिए) आपको हुक की आवश्यकता होगी?

(और अगर मैंने गलत समझा, और आप पॉप-अप ब्राउज़र विंडो के बजाय CSS के माध्यम से किए गए एक संवाद बॉक्स के बारे में बात कर रहे हैं, तो उस विंडो को बंद करने के सभी तरीके ऐसे तत्व हैं जिनके लिए आप क्लिक हैंडर्स रजिस्टर कर सकते हैं।)

संपादित करें: आह, मैं देखता हूं कि अब आप jquery-ui संवादों के बारे में बात कर रहे हैं, जो सीएसएस के माध्यम से किए गए हैं। आप हुक कर सकते हैं एक्स जो वर्ग के साथ तत्व के लिए एक क्लिक हैंडलर पंजीकृत करने से खिड़की बंद कर देता ui-संवाद-शीर्षक पट्टी-पास ।

अधिक उपयोगी, शायद, आप बता रहे हैं कि कैसे जल्दी से पता लगाना है। संवाद प्रदर्शित करते समय, बस फायरबग खोलें और उन तत्वों का निरीक्षण करें जो खिड़की को बंद कर सकते हैं। आप तुरंत देखेंगे कि उन्हें कैसे परिभाषित किया गया है और इससे आपको क्लिक हैंडलर को पंजीकृत करने की आवश्यकता होती है।

तो सीधे अपने प्रश्न का उत्तर देने के लिए, मेरा मानना है कि उत्तर वास्तव में "नहीं" है - कोई करीबी घटना नहीं है जिसे आप हुक कर सकते हैं, लेकिन "हाँ" - आप संवाद बॉक्स को काफी आसानी से बंद करने और प्राप्त करने के सभी तरीके हुक कर सकते हैं आपको क्या चाहिए।

— एंडी
स्रोत

हे और हे। मैं jquery-ui के संवाद को मनोरंजक बना रहा हूं जो css और javascript के माध्यम से बनाया गया है। कोड देखने से मुझे लगता है कि मेरे लिए वहां हुक है लेकिन मुझे नहीं पता कि इसे कैसे प्राप्त किया जाए।

— ब्राउनी

2

आप किसी भी आइटम के लिए समापन घटना पर कब्जा करने के लिए निम्नलिखित कोड का प्रयास कर सकते हैं: पृष्ठ, संवाद आदि।

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});

— अलेक्सई
स्रोत

1

बस .on का उपयोग करें ()

— .live