In this article I will provide solution for jQuery UpdatePanel Conflicts i.e. how to solve the issue of jQuery not working with ASP.Net AJAX UpdatePanel Asynchronous PostBack.
 
Cause:
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. Now jQuery assigns a unique identification to all controls when applying the plugin. But when some control is inside UpdatePanel and a Partial PostBack occurs the Unique Ids assigned by jQuery is lost and hence the plugin stops working
 
Solution:
The solution to this problem is that we need to re-apply the jQuery Plugin every time the UpdatePanel’s Asynchronous request or Partial PostBack is completed. For which we can make use of the event handlers provided by the ASP.Net Framework to detect completion of UpdatePanel’s Asynchronous request or Partial PostBack. For more information you can read my article Detect ASP.Net Asynchronous PostBack using PageRequestManager Events in JavaScript
<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>
 
Thus above you will notice that first I am applying the jQuery Plugins of Accordion and Tabs, as usual done in the document read event. Then I am re-applying the same jQuery Plugins in the ASP.Net UpdatePanel endRequest event handler. Thus in spite of UpdatePanel Refresh the plugins will now always work.
Below is the complete page code
<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>
 
 
Demo
View Demo
 
Downloads