कस्टम क्लिक "कस्टम" कैसे बनाएं और उपयोगकर्ता क्लिक बटन तक जेएस निष्पादन रोकें?

Question

ठीक है, मैं आरआईए/AJAX सामान का एक गुच्छा कर रहा हूं और एक "सुंदर", कस्टम पुष्टिकरण बॉक्स बनाने की आवश्यकता है जो एक डीआईवी है (अंतर्निहित जावास्क्रिप्ट पुष्टि नहीं है)। मुझे यह निर्धारित करने में परेशानी हो रही है कि उपयोगकर्ता को निष्पादन को फिर से शुरू करने या रोकने से पहले स्थिति को स्वीकार या अस्वीकार करने का मौका देने के लिए निष्पादन में विराम कैसे प्राप्त किया जाए। (उनके जवाब के आधार पर)

तो यहाँ तर्क के सामान्य प्रवाह मैं के साथ काम कर रहा हूँ है:

1. उपयोगकर्ता लटकती से एक आइटम का चयन करता है और बटन क्लिक करता है।
2. बटन के लिए क्लाइंट-साइड जावास्क्रिप्ट इवेंटहालर में, मुझे ड्रॉपडाउन में चुने गए आइटम के लिए शर्तों की श्रृंखला (यह कुंजी है) की जांच करने की आवश्यकता है।
3. ये स्थितियां संभवतः किसी भी पुष्टिकरण को प्रदर्शित नहीं कर सकती हैं या संभवतः केवल कुछ स्थितियों का मूल्यांकन सही हो सकता है जिसका अर्थ है कि मुझे आगे बढ़ने से पहले उपयोगकर्ता को शर्त स्वीकार या अस्वीकार करने की आवश्यकता होगी। एक समय में केवल एक पुष्टि दिखाई देनी चाहिए।

   function buttonEventHandler() { 
   
   if (condition1) { 
       if(!showConfirmForCondition1) // want execution to pause while waiting for user response. 
       return; // discontinue execution 
   } 
   
   if (condition2) { 
       if (!showConfirmForCondition2) // want execution to pause while waiting for user response. 
   
       return; // discontinue execution 
   } 
   
   if (condition3) { 
       if (!showConfirmForCondition3) // want execution to pause while waiting for user response. 
   
       return; // discontinue execution 
   } 
   
   ... 
   } 
   
   

   किसी को भी करने से पहले इस चुनौती से निपटा है और एक समाधान मिल गया है, तो मदद बहुत सराहना की जाएगी:

तर्क प्रदर्शित करने के लिए। एक नोट के रूप में, मैं एमएस अजाक्स और jQuery लाइब्रेरीज़ का उपयोग भी कर रहा हूं हालांकि मुझे ऐसी कोई कार्यक्षमता नहीं मिली है जो इस समस्या के लिए पहले से ही शामिल हो सकती है।

Answer 1

मुझे यह कहने में डर है कि जावास्क्रिप्ट रनटाइम को उसी तरह से रोकना संभव नहीं है जैसे "पुष्टि" और "चेतावनी" संवाद इसे रोक दें। इसे एक डीआईवी के साथ करने के लिए आपको अपने कोड को कई हिस्सों में तोड़ना होगा और कस्टम पुष्टिकरण बॉक्स पर इवेंट हैंडलर को कोड के अगले भाग को कॉल करना होगा।

जावास्क्रिप्ट में "निरंतरता" समर्थन लाने के लिए कुछ परियोजनाएं हुई हैं, जैसे कि Narrative Javascript ताकि यदि आप कोड के एक ब्लॉक में काम करने के लिए वास्तव में उत्सुक हैं तो आप उसमें देख सकते हैं।

Answer 2

इस प्रयास करें, अपने अपने जावास्क्रिप्ट ग्राहक समारोह 'इस' वस्तु अपने कस्टम पुष्टि संवाद गुजरती हैं और शुरू लेकिन हमेशा वापसी शुरू होने से ही पोस्टबैक को रोकने के लिए झूठी। हैंडलिंग फ़ंक्शन से बाहर निकलने से पहले, रिलीज जानकारी को प्रतिलिपि बनाने के लिए मैन्युअल रूप से अपने कस्टम पुष्टिकरण बॉक्स के 'हां' बटन पर ट्रिगर करें।

Answer 3

मेरे मामले में, लक्ष्य एक customConfirm बॉक्स प्रदर्शित करने के लिए था, जब भी उपयोगकर्ता को हटा लिंक एक नेट पुनरावर्तक

जब भी उपयोगकर्ता किसी विशेष पंक्ति के नष्ट लिंक पर क्लिक करता है, कस्टम पुष्टि समारोह की प्रत्येक पंक्ति के रूप में एम्बेडेड क्लिक करता है कहा जाता है। अब इस बात की पुष्टि समारोह के अंदर, नया बॉक्स प्रतिपादन के अलावा, निम्नलिखित 2 बातें की जरूरत किया जाना:

// obtain the element(we will call it targetObject) that triggered the event 

targetObject = (event.target==undefined ? event.srcElement : event.target); 

// include a call to _doPostBack in the onclick event of OK/YES button ONLY 

(targetObject.href!=undefined){ eval(targetObject.href); } else{ _doPostBack(targetObject.name,''); // it is assumed that name is available 

ऊपर अगर/किसी और मेरे मामले से संबंधित निर्माण। मुख्य बात यह जानना है कि आप इवेंट ऑब्जेक्ट और __doPostBack फ़ंक्शन का उपयोग करते हुए पुष्टिकरण & निरंतरता को अनुकरण कर सकते हैं।

Answer 4

पॉल की तरह कहा ... यह मेरे लिए काम करता है (मुझे लगता है कि आप एएसपी का उपयोग करते हैं।नेट, लेकिन यदि नहीं आप आसानी से इस पुनर्लेखन कर सकते हैं):

function BeforeDelete(controlUniqueId) { 
    confirmPopup('question...?', function() { __doPostBack(controlUniqueId, ''); }); 
    return false; 
} 

function confirmPopup(message, okCallback) { 
    $('#popup-buttons-confirm').click(okCallback); 
    // set message 
    // show popup 
} 

Answer 5

रास्ता कैसे मैं इस किया था:

1. बटन के साथ अपनी खुद की पुष्टि संवाद बॉक्स बनाएं, मान लें कि "हाँ" है और " नहीं"।
2. संवाद बॉक्स को ट्रिगर करने वाला फ़ंक्शन बनाएं, मान लें कि confirmBox(text, callback)। "हाँ" - -
3. "हाँ" और "नहीं" बटन पर बाध्य घटनाओं callback(true), "नहीं" - callback(false)।

4. आप समारोह उपयोग इस वाक्य रचना बुला रहे हैं जब:

   confirmBox("Are you sure", function(callback){ 
       if (callback) { 
        // do something if user pressed yes 
       } 
       else { 
        // do something if user pressed no 
       } 
   }); 
   

Answer 6

चेक बाहर मेरी फिडल मोडल चेतावनी बॉक्स: http://jsfiddle.net/katiabaer/UXM9y/33/ साथ jQueryUI मोडल

showAlert = function (msg, header, callback) { 
     var mydiv = $("<div id='mydiv'> </div>"); 
     mydiv.alertBox({ 
      message: msg, 
      header: header, 
      callback: callback 
     }); 

    }, 

    $('#show').click(function() { 
     var m = $('#message').val(); 
     var h = $('#header').val(); 
     var callback = function() { 
      alert("I can do anything here"); 
     } 
     showAlert(m, h, callback); 

    }); 

    $.widget("MY.alertBox", { 
     options: { 
      message: "", 
      header: "", 
      callback: '' 
     }, 

     _create: function() { 
      var self = this; 
      self.callback = self.options.callback; 

      self.container = $(".alert-messagebox"); 
      var header = self.container.find(".alert-header"); 
      header.html(self.options.header); 

      var message = self.container.find(".alert-message"); 
      message.html(self.options.message); 

      var closeButton = self.container.find("button.modal-close-button"); 
      closeButton.click(function() { 
       self.close(); 
      }); 

      self.show(); 
     }, 

     show: function() { 
      var self = this; 
      self.container.modal({ 
       maxWidth: 500 
      }); 
     }, 

     close: function() { 

      if (this.callback != null) { 
       this.callback(); 
       $.modal.close(); 
       return; 
      } 
      $.modal.close(); 

     }, 

     destroy: function() { 
      $.Widget.prototype.destroy.call(this); 
     } 

    });