Question

I’ve got a prickly one. I have an asp.net web forms page. In the page I have a div tag that I’ve set to be used as a jQuery dialog. In the div is some jQuery controls. I get the dialog to open up and clicking on one of the buttons commences postback. When the page was posting back the code-behind hasn’t been reading the values in the controls. Of course a little delving into the html reveals that the dialog takes my div and moves it to the bottom of the html page OUTSIDE my asp.net form tag. Urk!

How the hell do I get around this?

Not that it really helps the situation by my dialog code is here:

 $("#dialog-copy").dialog({
        autoOpen: false,
        height: 200,
        width: 400,
        modal: true,
        resizable: false,
        buttons: {
            'Cancel': function () {
                $(this).dialog('close');
            },
            'Yes': function () {
                $(this).dialog('close');
                $("[id*=btnCopy]")[0].click();
            }
        },
        open: function () {
            $(":button:contains('Yes')").addClass("blue");
        }
    });
     $("[id*=btnCopy]").live('mousedown', function (e) {
        e.preventDefault();
        $("#dialog-copy").dialog('open');
     });

And a typical div tag (that is moved to outside my form tag) is looking like this:

<div id="dialog-copy" style="DISPLAY: none" title="Copy Schedule">
    <p>Please enter a schedule number:</p>
    <asp:Textbox runat="server" id="txtSchNo"></asp:Textbox>
</div>

Clicking ‘Yes’ fires the button that calls the postback.

Answer 1

It’s a known issue, you have to append it to the form like this and your normal .NET controls can postback:

    open: function () {
        $(this).parent().appendTo("form");
        $(":button:contains('Yes')").addClass("blue");
    }

UPDATE for newer versions of jQuery:

   $('#yourDIv').dialog({
        .....,
        appendTo: $('form'),        
       ....

    });