Tuesday, 23 December 2014

jQuery Plugins not working after ASP.Net AJAX UpdatePanel Partial PostBack or when Asynchronous request is over

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    //On Page Load
    $(function () {
        $("#dvAccordian").accordion();
        $("#tabs").tabs();
   });
    //On UpdatePanel Refresh
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                $("#dvAccordian").accordion();
                $("#tabs").tabs();
            }
        });
    };
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="dvAccordian" style="width: 400px">
            <h3>
                Section 1</h3>
            <div>
                <p>
                    This is content of Section 1
                </p>
            </div>
            <h3>
                Section 2</h3>
            <div>
                <p>
                    This is content of Section 2
                </p>
            </div>
            <h3>
                Section 3</h3>
            <div>
                <p>
                    This is content of Section 3
                </p>
            </div>
        </div>
        <br />
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>
                <li><a href="#tabs-3">Tab 3</a></li>
            </ul>
            <div id="tabs-1">
                Content 1
            </div>
            <div id="tabs-2">
                Content 2
            </div>
            <div id="tabs-3">
                Content 3
            </div>
        </div>
        <br />
        <asp:Button ID="btnRefresh" runat="server" Text="Refresh" />
    </ContentTemplate>
</asp:UpdatePanel>

No comments:

Post a Comment