CODEWITHSUNDEEP
c#javascriptasp.netajax
shahin
shahin

Reputation: 35

jquery problem with updatepanel

i'm create asp.net4 c# web application i have jquery in page that using master page and my content place holder is in update panel script not working when pastbacks happen

master page

<body>
<form runat ="server">    
    <br />
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
    <asp:ScriptReference Path="~/Scripts/jquery-1.4.4.min.js" />
    <asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.6.custom.min.js" />
    <asp:ScriptReference Path="~/Scripts/jquery-ui-timepicker-addon.js" />
    </Scripts>
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </ContentTemplate>          
</asp:UpdatePanel>
</form>    
</body>

content page

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
    <asp:View ID="View1" runat="server">
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><script type="text/javascript">

                                                                    $('#<%= TextBox1.ClientID %>').timepicker({
                                                                        ampm: true,
                                                                        hourMin: 8,
                                                                        hourMax: 23
                                                                    });
        </script>
    </asp:View>
    <asp:View ID="View2" runat="server">      
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><script type="text/javascript">

                                                                    $('#<%= TextBox3.ClientID %>').timepicker({
                                                                        ampm: true,
                                                                        hourMin: 8,
                                                                        hourMax: 23
                                                                    });
        </script>
    </asp:View>

Upvotes: 1

Views: 1842

Answers (1)

Joe Ratzer
Joe Ratzer

Reputation: 18549

Move your UpdatePanel outside the MasterPage.

Putting an entire page in an UpdatePanel, which is what you have, adds a huge overhead - the entire page is sent over the wire with each partial postback. This overhead will decrease performance.

UpdatePanels should only wrap relevant and small areas of a page.

Once the UpdatePanel is in the content page you then need to ensure you re-add your JQuery statement inside the UpdatePanel. This ensures the JQuery script isn't lost on post-back. Something like:

        <ContentTemplate>
            <script type="text/javascript" language="javascript">
                Sys.Application.add_load(YOUR_FUNCTION_NAME);
            </script>

Upvotes: 1

Related Questions