jqueryasp.netcontent-pages

My jquery selectors doesn't work after update panel in content page


i have a content page, i write some jquery selectors after asp:updatepanel, for first time, when page loaded $(document).ready(function() works right, but after a postback, selectors doesnt work anymore, any way does exist to solve this problem??

<asp:content id="Content1" contentplaceholderid="contentplaceholder1" runat="server">       
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <ContentTemplate>
              <asp:TextBox ID="txtdate" runat="server" CssClass="persianDTP" ></asp:TextBox>
                           <!-- some code --> 

           </ContentTemplate>
    </asp:UpdatePanel>

    <script>
                    $(document).ready(function () {
                        $('.PersianDTP').datepicker({
                            showOn: 'button',
                            buttonImage: 'calendar.png',
                            dateFormat: 'yy/mm/dd',
                            //appendText: ' (yy/mm/dd)',
                            changeMonth: true,
                            changeYear: true,
                            //selectOtherMonths: true,
                            //showOtherMonths: true,
                            showStatus: true,
                            showButtonPanel: true,
                            buttonImageOnly: true,
                            buttonText: 'Choose a Date',
                            onClose: function () {
                                this.focus();
                            }
                        });

                        jQuery(function ($) {
                            $(".PersianDTP").mask("9999/99/99");
                        });  

                    });
     </script>
</asp:content>

Solution

  • All JQuery plugins are applied on the Page Load event of the HTML Page or in other words document ready event which is fired when the whole page or document is rendered completely in browser .But when control is inside UpdatePanel and a Partial PostBack occurs the Unique Ids assigned by jQuery is lost and hence the plugin stops working , you could re-apply the jQuery Plugin every time the UpdatePanel’s Asynchronous request or Partial PostBack is completed : You need to recreate the Jquery Codes on postbacks.
    sample code :)

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            $(document).ready(function () {
                $(<%=lstBoxTest.ClientID%>).SumoSelect({ selectAll: true });
            });
    
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args) {
                //Binding Code Again
                $(<%=lstBoxTest.ClientID%>).SumoSelect({ selectAll: true });
            }
        </script>