ASP.NET user control and jQuery dialog

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

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 2

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,

1. make sure that your javascript is injected with the script manager.
2. 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.

Answer 3

Has anyone else found an answer for this? I am getting the exact same problem. This only seems to occur when you have .net controls inside a dialog within an UserControl. If you do this in an aspx page, everything seems to work fine. It's seems that with an usercontrol the IDs get renamed by Jquery somehow, because up until the postback I was able to access the textboxes on the clientside, but as soon as I go to the codebehind it gives me only the default values. I tested the viewstate of controls outside of the dialog, and they retain the changed values.

Any help would be appreciated!

Answer 4

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!