jquery ui डेटपिकर asp.net UpdatePanel

Question

मेरे पास एक वेब पेज है, जहां मैं एक एपीपीनेट टेक्स्टबॉक्स पर एक jQuery UI डेटपिकर का उपयोग कर रहा हूं, जो एक अपडेटपेनल के अंदर स्थित है। यहां मैं वर्णन करता हूं कि मैं लगभग

<script type="text/javascript"> 
    $(document).ready(function() { $(".datepicker").datepicker(); }); 
</script> 

<asp:UpdatePanel ... > 
    ... 
    <asp:TextBox runat="server" CssClass="datepicker" /> 
    <asp:Button runat="server" /> 
    ... 
</asp:UpdatePanel> 

जब मैं पहली बार पृष्ठ लोड करता हूं, तो सब कुछ ठीक काम करता है। टेक्स्टबॉक्स के अंदर क्लिक करते समय, डेटपिकर पॉप अप हो जाता है। लेकिन जब मैं बटन पर क्लिक करता हूं, और एक एसिंक पोस्टबैक निष्पादित किया जाता है, तो जब मैं फिर से फ़ील्ड पर क्लिक करता हूं, तो डेटपिकर अब पॉप अप नहीं होता है।

मुझे पता है कि समस्या यह है क्योंकि अद्यतन पैनेल पूरी तरह से सभी निहित HTML को अद्यतन होने पर प्रतिस्थापित करता है, इसलिए असल में, यह एक नया टेक्स्ट फ़ील्ड है, जिसे डेटपिकर कार्यक्षमता के साथ प्रारंभ नहीं किया गया है।

मुझे लगता है कि मुझे अपने डेटपिकर्स को प्रारंभ करने के लिए यहां $ (दस्तावेज़) .ready() का उपयोग नहीं करना चाहिए, लेकिन प्रारंभिक कोड रखने के लिए एक अच्छी जगह कहां है? या क्या कोई तरीका है कि मैं AJAX अद्यतन के बाद प्रारंभिक कोड को फिर से शुरू कर सकता हूं?

Answer 1

पीछे लिपि जोड़ें, यही वह है जो मैं करता हूं।

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 

<script type="text/javascript"> 
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) { 
     $(".datepicker").datepicker(); 
    }); 
</script> 

Answer 2

इस पृष्ठ को अपने पृष्ठ के अंत में जोड़ें।

प्रारंभिक() फ़ंक्शन को किसी भी कोड के साथ बदलें जिसे आप अद्यतन पैनेल से आंशिक पोस्टबैक करते समय हर बार चलाने के लिए चाहते हैं।

<script type="text/javascript"> 
    function pageLoad(sender, args) { 
     if (args.get_isPartialLoad()) { 
      initialize(); 
     } 
    } 
</script> 

Answer 3

पृष्ठ के भीतर वस्तु के नाम से वर्ग के नाम '.datepicker' से बदलता है।

उदाहरण:

<script type="text/javascript"> 
    $(document).ready(function() { $("#<%=DateTextBox.ClientID %>").datepicker(); }); 
</script> 

<asp:UpdatePanel ... > 
    ... 
    <asp:TextBox runat="server" ID="DateTextBox"/> 
    <asp:Button runat="server" /> 
    ... 
</asp:UpdatePanel>} 

Answer 4

$(document).ready(function() { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     function EndRequestHandler() { $(".datepicker").unbind().mask("99/99/9999").datepicker() }; 
     $.getScript("../Scripts/jquery.maskedinput.min.js", function() { 
      $(".datepicker").mask("99/99/9999"); 
     }); 
     $.getScript("../Scripts/jquery-ui-1.11.3.min.js", function() { 
      $(".datepicker").datepicker() 
     }); 
    });