jquery datepicker ms ajax updatepanel

पोस्ट करने के बाद काम नहीं करता है इसलिए मैंने संबंधित प्रश्नों के कुछ पढ़े और कुछ रोचक चीजें थीं लेकिन मुझे मेरा जवाब नहीं मिला, कम से कम जवाब को समझ में नहीं आया।jquery datepicker ms ajax updatepanel

मैं सामान्य रूप से AJAX, जावास्क्रिप्ट और स्क्विडेंट साइड स्क्रिप्टिंग के लिए बहुत नया हूं।

मैं थोड़ी देर के लिए सी # एएसपीनेट का उपयोग कर रहा हूं और हाल ही में उपयोगकर्ता नियंत्रण और बिट्स को अद्यतन करने के लिए सुचारु बनाने के लिए मेरे पक्ष में कुछ अपडेट पैनेल जोड़ दिए गए हैं ताकि पृष्ठ हर बार पुनः लोड नहीं किया जा सके। सभी काम शानदार ढंग से और मैं तब तक बहुत खुश था जब तक कि मैंने कुछ JQuery का प्रयास करने और उपयोग करने का फैसला नहीं किया।

मैंने ui.jquery.js से डेटपिकर उठाया है जो ठंडा है और सामान्य पृष्ठ पर बहुत अच्छा काम करता है। मेरी समस्या तब आती है जब मैं एक अपडेट पैनेल के भीतर से एक पोस्टबैक करता हूं। डेटपिकर बस काम करना बंद कर देता है।

जो मैंने पढ़ा है उससे मुझे पोस्ट बैक के बाद मैन्युअल रूप से इस बैक अप को तार करने की आवश्यकता है।

1) मैं वास्तव में क्यों नहीं समझता। मेरे मास्टर पेज पर मेरे पास है:

<script type="text/javascript"> 
    $(function() { 
     $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'}); 
    }); 
</script>

जो मेरे इनपुट बॉक्स को mydatepickerclass के साथ निर्दिष्ट करता है। और सभी काम करता है। यह पोस्टबैक पर क्यों काम करना बंद कर देगा।

2) मैं इसे कैसे ठीक कर सकता हूं .... मैं इसे कैसे तारूं ताकि अपडेटपेनल में पोस्टबैक के बाद भी यह काम करे।

मैं समझता हूं कि आईडी पोस्टबैक पर बदल सकती है, मुझे लगता है लेकिन जैसा कि मैं कक्षाओं का उपयोग कर रहा हूं, मुझे नहीं पता कि क्या गलत हो रहा है।

संपादित

मैं अपने usercontrol में निम्न कोड है जहां अद्यतन हो रहा है:

<asp:UpdatePanel ID="HistoryUpdatePanel" runat="server"> 
<ContentTemplate> 
    <%-- Start of Company History section --%> 
    <fieldset> 
     <legend>Activity History</legend> 

      <script type="text/javascript"> 
       $(function() { 
       $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'}); 
       }); 
      </script>    

     <div> 
      <asp:ListBox ID="listBoxHistoryTypes" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="listBoxHistoryTypes_IndexChanged" /> 
      <label>Date From:</label><asp:TextBox class="mydatepickerclass" ID="txtdatefrom" runat="server" /> 
      <label>Date To:</label><input class="mydatepickerclass" type="text" /> 
      <asp:TextBox class="mydatepickerclass" ID="txtdateto" runat="server" /> 
      <asp:Button ID="btnFilterSearch" runat="server" Text="Filter Results" OnClick="btnFilterSearch_Click" /> 
     </div> 


    </fieldset> 
</ContentTemplate>

UpdatePanel के अंदर स्क्रिप्ट यह rewire नहीं है?

धन्यवाद

जॉन हॉकिन्स

स्रोत

2009-02-06 Jon

अद्यतन पैनल एचटीएमएल की सामग्री को फिर से लोड करने जा रहा है। डेटपिकर को पूरा करने और फिर से बनाने के लिए आपको UpdatePanel को सुनना होगा।

यहां एक बहुत ही बुनियादी नमूना है। यह आपके पृष्ठ पर एकाधिक अपडेट पैनलों या संभावित मेमोरी लीक को आपके डेटपिकर को सही तरीके से नष्ट नहीं करने से नहीं लेता है।

एक और बात नोट करने के लिए जब मिश्रण ASP.NET अजाक्स और jQuery सावधान क्योंकि दोनों अलग अलग संदर्भों

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"> 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

      function EndRequestHandler(sender, args) { 
       $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' }); 
      } 

     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

    </div> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox> 
      <br /> 
      <asp:Button ID="Button1" runat="server" Text="UpdateMe" 
       onclick="Button1_Click" /> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
    </form> 
</body> 
</html>

स्रोत

2009-02-06 15:20:25 bendewey

कैसे मैं इस बारे में जाना होगा? – Jon

एक नमूना जोड़ा गया। यह आप को जोड़ रहा है। – bendewey

यह आपके सुझाव के साथ काम किया। धन्यवाद .. वास्तव में इसे समझ में नहीं आता है, आपको जो कुछ दिया है उसे खोजना होगा लेकिन धन्यवाद :) – Jon

में $ मैं जानता हूँ कि इस पोस्ट पुरानी है का उपयोग हो सकता है - लेकिन सिर्फ के बाहर अपने jQuery datepicker जगह अद्यतन पैनल - 100% काम करना चाहिए ...

स्रोत

2012-02-28 10:19:15 Mike

यह सच है! लेकिन ओपी की आवश्यकता है। – Zerotoinfinity

मुझे पता है कि यह पुराना है लेकिन ...की जगह का प्रयास करें:

$(document).ready(function() {

साथ:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function() {

स्रोत

2012-04-24 15:17:33

आपको बहुत बहुत धन्यवाद। आपने मेरा समय –

इसके बजाय ऐसा करने का एक सरल विकल्प है।

अद्यतन पैनल में तत्व की पोस्टबैक में अद्यतन पैनल में इस कोड को

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "asddas", "getjquerydate();", True)

और यह जावास्क्रिप्ट में

function getjquerydate() { 

$(".datepicker").datepicker({ 
    numberOfMonths: 2, 
    showButtonPanel: true, 
    minDate: 1, 
    dateFormat: 'dd/mm/yy', 
    showOn: "button", 
    buttonImage: "images/calendar.gif", 
    buttonImageOnly: true 
});

}

जोड़ने आंशिक पोस्टबैक के बाद इसे फिर से datepicker फोन फ़ंक्शन

स्रोत

2013-05-21 07:00:09

$(document).ready(function() { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack(); 
     function EndRequestHandler(sender, args) { 
      $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' }); 
     } 
    });

आप ऐसा कर सकते हैं। इस मामले में यह हमेशा काम करेगा;))

स्रोत

2013-07-02 21:55:22

Sys.Application.add_load(LoadHandler); 

//This load handler solved update panel did not bind date picker after partial postback 
function LoadHandler() { 
    $(document).ready(function() { 
     $(".datepicker").datepicker({ 
      dateFormat: "M d, yy", 
      changeMonth: true, 
      changeYear: true, 
      onSelect: function (dateText, ubst) { your code here... } 
     }).val(); 
    }); 
}

स्रोत

2014-06-17 17:10:19

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मुझे बस इस समस्या का सामना करना पड़ा और इस धागे में जवाब मिला। उम्मीद है कि यह किसी को भी सामना करने में मदद कर सकता है।

मैंने कोड के पीछे कोई क्लाइंट साइड स्क्रिप्ट नहीं डाली। मैं केवल यह कोड डालता हूं:

 <script type="text/javascript">  
     Sys.WebForms.PageRequestManager.getInstance().add_pageL 
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

       function EndRequestHandler() { 
        $('.default-date-picker').datepicker({ 
         format: 'dd-mm-yyyy' 
        }); 
       } 

      }); 
      </script>

ऊपर दिए गए कोड को शरीर अनुभाग के अंदर होना चाहिए, न कि मुख्य भाग। मैंने स्क्रिप्ट मैनेजर के पहले और बाद में, या UpdatePanel के अंदर और बाहर इसे डालने का प्रयास किया और सभी विकल्पों के साथ कोई समस्या नहीं मिली। तो जब तक यह कोड शरीर खंड में है, यह मेरे लिए काम करता है।

बस सुनिश्चित करें कि आप अपनी परिभाषित डेटाटेमिपर श्रेणी बदलते हैं। मेरे लिए जेएस फ़ाइल में "डिफ़ॉल्ट-दिनांक-पिकर" है।

स्रोत

2015-07-31 03:07:19

प्लेस एक स्क्रिप्ट प्रबंधक और पृष्ठ पर एक अद्यतन पैनल "jQuery के यूआई datepicker ajax आंशिक पोस्टबैक के बाद काम नहीं करता है"।

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

अब अपडेट पैनेल नियंत्रण के अंदर एक टेक्स्ट बॉक्स और एक बटन रखें।

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
<asp:UpdatePanel ID="upd1" runat="server"> 
<ContentTemplate> 
    <div style="font-family: Arial; font-size: small;"> 
     Select Date : 
     <asp:TextBox ID="txtDate" runat="server"Font- Names="Arial">   
     </asp:TextBox> 
    </div> 
    <asp:Button ID="btnAjax" runat="server" Text="Ajax PostBack" 
     OnClick="btnAjax_Click" /> 
    </ContentTemplate> 
</asp:UpdatePanel>

अब टेक्स्ट बॉक्स के साथ डेटपिकर नियंत्रण को बांधें।

<script type="text/javascript" language="javascript"> 
$(document).ready(function(){  
    $("#<%=txtDate.ClientID %>").datepicker(
    { changeMonth:true, 
     changeYear:true, 
     showOn: 'button', 
     buttonText:'Show Date', 
     showAnim: 'fadeIn', 
     showButtonPanel: true, 
     dateFormat: 'DD, MM d, yy', 
     buttonImage: 'Images/imgCalendar.png', 
     buttonImageOnly: true 
    } 
    ); 
    $(".ui-datepicker-trigger").mouseover(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
}); 
<script>

अब जो एक ajax आंशिक पोस्टबैक कारण होगा बटन के लिए एक सर्वर साइड क्लिक पैदा करते हैं।

protected void btnAjax_Click(object sender, EventArgs e) 
{ 
    System.Threading.Thread.Sleep(1000); 
}

पेज चल रहे पर, यू इस

datepicker पर क्लिक करें की तरह कुछ देखना होगा। डेटपिकर खोला जाता है और चयनित तिथि टेक्स्ट बॉक्स का मान बन जाती है। अब बटन पर क्लिक करें। सर्वर साइड बटन क्लिक को कॉल किया जाता है और अब आप इस तरह कुछ देखेंगे।

datepicker बटन gone.So क्या अब हम ऐसा करते हैं ajax के भीतर काम कर इसे बनाने के लिए है। नीचे कोड देखें।

<script type="text/javascript" language="javascript"> 
function pageLoad(sender, args) 
{ 
    $(document).ready(function(){  
    $("#<%=txtDate.ClientID %>").datepicker(
    { changeMonth:true, 
     changeYear:true, 
     showOn: 'button', 
     buttonText:'Show Date', 
     showAnim: 'fadeIn', 
     showButtonPanel: true, 
     dateFormat: 'DD, MM d, yy', 
     buttonImage: 'Images/imgCalendar.png', 
     buttonImageOnly: true 
    } 
    ); 
    $(".ui-datepicker-trigger").mouseover(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
    }); 
} 
</script>

पेज लोड() फ़ंक्शन जावास्क्रिप्ट में उपलब्ध है यदि आप ASP.NET AJAX का उपयोग कर रहे हैं। AJAX ढांचे स्वचालित रूप से एक Application.Load हैंडलर के रूप में किसी भी क्लाइंट साइड समारोह Pageload (नाम तारों तक)

स्रोत लिंक क्रेडिट

http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html

स्रोत

2016-12-30 19:00:33 Krishna

बचाया धन्यवाद! इससे मुझे मदद मिली .. –

jquery datepicker ms ajax updatepanel

उत्तर

संबंधित मुद्दे