Tutorial :Jquery UI Dialog inside UpdatePanel doing strange things



Question:

I have a DIV in which I have a asp:repeater which, based on data, puts information in this div. I then use Jquery's UI dialog to display the data to the user via a button click. This all works swimmingly.

So, I want to be able to add records to the data which populates the repeater. I have another part of the screen where people can enter this data, and it is saved to the database using an ajax call. This, too, works swimmingly.

I then want to update the data on my dialog box, without having to do a full postback to the server. So, this is normally pretty easy. I put my div into an UpdatePanel, and from Jquery initiate a __doPostBack. which then refreshes the data, which too, works swimmingly up to a point.

Once the __doPostBack is complete, the div is no longer hidden. It is now displayed on my page (with the updated data mind you), but the javascript i use to show the dialog, now no longer works.

Some investigation shows that:

  1. On initial load of the page, the javascript which tells jquery to create a dialog from a div takes the div from wherever it is on the form, and appends it to the body element.
  2. When the update panel posts back, the div is recreated, but the javascript to turn it into a dialog either isn't executed again (which I can understand... we haven't done a full load of the page, so the javascript doesnt execute again.
  3. This means that the div is no longer a 'dialog' but a simple div on my page, which is not what I want.

So, my questions are is:

Is there a way of injecting javascript aftr the updatepanels postback which will execute and create the dialog properly again?


Solution:1

The solution would be not to use Updatepanel at all and just change the innerHTML of the div with data received through a jquery ajax call.


Solution:2

I found another solution to this. I put the dialog initialization javascript in a separate function called SetupDialog instead of being inside the $(function () { }); block.

Then I used ScriptManager.RegisterStartupScript in Page_Load to register the script so that it runs every time the Update Panel updates:

ScriptManager.RegisterStartupScript(this, GetType(), "SetupDialog", "SetupDialog();", true);  

In this case, the dialog will only work after the UpdatePanel has been updated. If you need the dialog before that, then you can call SetupDialog inside the $(function () { }); block as well.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »