ASP.NET user control and jQuery dialog - asp.net

Question

On my page I got the following user control:
<div class="editFormDialog" style="display: none; font-size: 12px;">
<mm:Form ID="editUC" ShowCreateButton="false" ShowEditButton="true" runat="server" />
</div>
This UC has a public property that takes a DataSet, and updates some fields in the UC.
So when I push a button on my page, it calls this property on the UC, and the UC gets updated with data from the DataSet.
So far so good. The problem arise when I want the UC to be a jQuery UI Dialog.
First I create the dialog:
$(document).ready(function() {
$('.editFormDialog').dialog({
autoOpen: false,
height: 700,
width: 780,
modal: true,
bgiframe: true,
title: 'Rediger',
open: function(type, data) {
$(this).parent().appendTo("form");
$(this).css('display', 'block');
}
});
});
And I wan't it to open on a button push (this is not an ASP.NET button, plain HTML):
$('#btnEdit').live('click', function() {
$('.editFormDialog').dialog('open');
});
The dialog opens, but the UC does not contain the correct data.
When the page loads, the UC is updated with default data. Then the user clicks a button, and the data changes but the UC isn't updated. It still contains the default data. Thats the problem.
Do you have any idea why?
Help will be much appreciated!

Answer 1

I found the solution for this issue. It turns out that when you append to the form, you need to make sure this snippet of code is inside jquery document ready:
$("#dialog1").parent().appendTo($("form:first"));
So the whole thing should look like this:
jQuery(document).ready(function() {
$("#<%=myFamilyGrid.ClientID %>").tablesorter({
sortList: [[0, 1]]
})
.tablesorterPager({ container: $("#pager") });
$("#dialog1").dialog({
modal: true,
height: 370,
width: "350px",
autoOpen: false,
bgiframe: false,
zIndex: 3999
});
$("#dialog1").parent().appendTo($("form:first"));
});
Hope this helps!

Answer 2

Exactly what happens when you "call the property" (I would assume you mean it's a method)? Does the page perform a postback? If that's the case, maybe the postback is getting blocked somehow when you mix jQuery into the scenario?

Answer 3

Since you are using Update Panels, how are you injecting the call to the javascript in the page? I ask, because there's only one way that work properly on partial postbacks: ScriptManager.RegisterStartupScript(). That allows javascript code to act as if the page was loaded. Of course any other onload javascript may be called too, which may result in the behavior you are seeing.
So,
make sure that your javascript is injected with the script manager.
make sure only the bits of javascript that you want to execute
after a partial postback are
executed
There is also the possibility of turning your UC in a ajax control with a web service to change the datasource. No more partial postbacks then, which usually improve the responsiveness of the page.