JQueryUI and ASP.NET UpdatePanel dispute? Do there is a quick alternative?

Question

Hello all,

I have been using asp.net programming just from few months and I have to maintain an application that is made up of many aspx webforms with updatepanels.

One of the task of the maintenance is to integrate some of the JQueryUI widgets (mostly datepicker, tabs and buttons).

I am experiencing some problems on doing this smoothly expecially when the controls are

1. Inside an update panel
2. Generally inside any templated control (e.g. Wizard control)

For example this very simple code:

<script type="text/javascript">

$(document).ready(function() {

 $("#myTabs").tabs();

 $("[ID$=TextBox2]").datepicker();
 $("[ID$=btnOk]").button();

});
</script>

<div>
    Jquery UI controls inside a div (Tabs, datepicker and buttons)
    <br />
    <div id="myTabs">
     <ul>
      <li><a href="#myTabs-1">quick sample</a></li>
     </ul>
     <div id="p-tabs-1">
         <p>In this page there are a datepicker control and a button</p>
         <p>
         Please select a date :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
         <br />
         <asp:Button ID="btnOk" runat="server" Text="Ok" OnClientClick="btnOk_Click" />
         </p>
     </div>
 </div>
</div>

will immediately cease to work if placed inside an update panel.

Do there is a solution regarding this issue or I have to follow a completely differnt approach? Do I have to substitute all the updatepanels? And what is the best alternative to this easy to use control?

Thanks very much Lorenzo

Answer 1

See: http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels

An updatepanel destroys all javascript references, which includes jquery bindings. If it did not do this it would create a memory leak.

Answer 2

After applying Chuck suggestion I was getting a javascript error (Sys is not defined). Googling around tooked me at this web post that solved my problem. Now everything works! :)