Ajax अपडेट (अपडेटपैन) के बाद jQuery में रीबाइंडिंग इवेंट

Question 1

मेरे पास मेरे पृष्ठ पर कई इनपुट और विकल्प तत्व हैं, प्रत्येक (अच्छी तरह से) एक घटना है जो पृष्ठ पर कुछ पाठ को अपडेट करने से जुड़ी होती है जब वे बदलते हैं। मैं jQuery का उपयोग करता हूं जो वास्तव में बहुत अच्छा है :)

मैं UpdatePanel का उपयोग करते हुए, Microsofts Ajax फ्रेमवर्क का भी उपयोग करता हूं । ऐसा करने का कारण यह है कि कुछ सर्वर-साइड लॉजिक के आधार पर पृष्ठ पर कुछ तत्व बनाए जाते हैं। मैं वास्तव में यह स्पष्ट नहीं करना चाहता कि मैं अपडेटपैनेल का उपयोग क्यों करता हूं - भले ही यह (काफी प्रयासों के साथ) केवल jQuery का उपयोग करने के लिए फिर से लिखा जा सकता है मैं अभी भी उस अपडेटपैनल को चाहता हूं।

आपने शायद यह अनुमान लगाया है - एक बार जब मुझे अपडेटपैनेल पर पोस्टबैक होता है, तो jQuery की ईवेंट्स काम करना बंद कर देती हैं। मैं वास्तव में यह उम्मीद कर रहा था, क्योंकि "पोस्टबैक" वास्तव में एक नया पोस्टबैक नहीं है, इसलिए दस्तावेज़ में मेरा कोड। पहले से ही घटनाओं को फिर से बंद नहीं किया जाएगा। मैंने jQuery सहायता पुस्तकालयों में इस पर पढ़कर अपने संदेह की पुष्टि की।

वैसे भी मैं अद्यतन को अद्यतन करने की समस्या के साथ छोड़ दिया हूं जब UpdatePanel DOM को अपडेट करने के बाद किया जाता है । मुझे अधिमानतः एक समाधान की आवश्यकता है जिसमें पृष्ठ पर अधिक .js फ़ाइलों (jQuery प्लग-इन) को जोड़ने की आवश्यकता नहीं है, लेकिन UpdatePanel के 'afterupdating' को पकड़ने में सक्षम होने के रूप में कुछ सरल है जहां मैं सभी फॉर्म तत्वों को रिबूट करने के लिए अपनी विधि को कॉल कर सकता हूं ।

Question 2

जब से आप ASP.NET AJAX का उपयोग कर रहे हैं, तो आपके पास एक pageLoadइवेंट हैंडलर तक पहुंच होगी , जो हर बार पेज पोस्ट को वापस बुलाया जाता है, यह अपडेटपैनल से पूर्ण या आंशिक हो। आपको बस अपने पेज में फंक्शन डालने की जरूरत है, कोई हुकिंग की आवश्यकता नहीं है।

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}

Question 3

या आप on()विधि के माध्यम से नवीनतम jQuery की लाइव कार्यक्षमता की जांच कर सकते हैं ।

Question 4

Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}

Question 5

JQuery 1.7 के रूप में, ऐसा करने का अनुशंसित तरीका jQuery का .on () सिंटैक्स का उपयोग करना है ।

हालाँकि, सुनिश्चित करें कि आपने दस्तावेज़ ऑब्जेक्ट पर ईवेंट सेट किया है , न कि DOM ऑब्जेक्ट। उदाहरण के लिए, UpdatePanel पोस्टबैक के बाद यह टूट जाएगा :

$(':input').on('change', function() {...});

... क्योंकि 'इनपुट्स' को फिर से लिखा गया है। इसके बजाय यह करें:

$(document).on('change', ':input', function() {...});

जब तक दस्तावेज़ चारों ओर है, कोई भी इनपुट (अपडेटपैनल रिफ्रेश वालों से) परिवर्तन हैंडलर को ट्रिगर करेगा।

Question 6

निम्नलिखित कोड का उपयोग करें

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}

Question 7

आप jQuery और ईवेंट प्रतिनिधिमंडल का उपयोग कर सकते हैं। मूल रूप से हर तत्व के बजाय कंटेनरों को हुक करें और उस घटना के आधार पर इवेंट.target और रन स्क्रिप्ट को क्वेरी करें।

इसमें कई लाभ हैं जो आपको कोड शोर (रिबंड करने की आवश्यकता नहीं) को कम करते हैं। यह ब्राउज़र मेमोरी (DOM में बंधी कम घटनाओं) पर भी आसान है।

त्वरित उदाहरण यहाँ ।

आसान घटना प्रतिनिधिमंडल के लिए jQuery प्लगइन ।

PS मुझे यकीन है कि 99% यकीन है कि प्रतिनिधिमंडल अगले रिलीज में jQuery कोर में होगा।

Question 8

निम्नलिखित कोड का उपयोग करें, आपको नियंत्रण को मान्य करने की आवश्यकता होगी, जो डेटापैकर का उपयोग करेगा:

    <script type="text/javascript" language="javascript">

         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); 
         function addDataPicker(sender, args)
         {
            var fchFacturacion = document.getElementById('<%= txtFechaFacturacion.ClientID %>');
            if (fchFacturacion != null) {
               $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: 'button', buttonImage: '../Imagenes/calendar.gif', buttonImageOnly: true});}
         } 

    </script>

     <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
              <div id="div1" runat="server" visible="false">
                  <input type="text" id="txtFechaFacturacion" 
                      name="txtFechaFacturacion" visible="true"
                      readonly="readonly" runat="server" />
              </div>
       </ContentTemplate>
     </asp:UpdatePanel>

Question 9

         <script type="text/javascript">
             function pageLoad() {

                 if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {


       }

            </script>

        </ContentTemplate>
    </asp:UpdatePanel>

"अगर" में आप उस कोड को डाल सकते हैं, जिसे आपको हर बार निष्पादित करने की आवश्यकता होती है जो कि अपडेटपॉइंट AsyncPostBack करता है।

Question 10

JQuery की नई 'लाइव' पद्धति का उपयोग करके अपनी घटनाओं को बांधें। यह घटनाओं को आपके सभी वर्तमान तत्वों और भविष्य के सभी लोगों के लिए भी बाध्य करेगा। चा चिंग! :)