Button In Dialog Box Won't Post Back

I have a dialog box which I'm displaying with the jQuery .dialog() function, and this dialog box contains a button which I want to post back to another page, but it's not working.

Solution 1:

The problem with this kind of dialogs is that they move what you give them as content somewhere outside the form.

Take that example: http://jsfiddle.net/Qej8S/1/

I have place the content inside the keeper

<div class="keeper">
    <div class="divDialog" style="display: none">
    The content of the dialog        
    </div>
</div>

but if run it, you see that (ether the colors, ether with the dom utilities of the browser) the dialog is moving the content outside of the keeper, and in your case is move it outside the form and thats why is not fires up.

For solution I came up with some kind of a hack. After the dialog is created move it back to the form. Here is an example. I place a div with a specific id, inside the form as:

<div id="MoveItHere"></div>

and I set the move right after the dialog is created as:

$('.divDialog').dialog({modal: true, show: 'slide', title: 'Please Enter Information Below', width: 200, 
create: function( event, ui ) 
 {
    // this is the trick, I move it again inside the form, on a specific place.
    $("#MoveItHere").html($(this).parent());
 }
});

And here is the online test, that is working if you see the dom: http://jsfiddle.net/Qej8S/2/