Button doesn't postback inside jQuery dialog inside UC

Question

I am developing a user control and it has an asp.net button inside jQuery Dialog but when I press the button nothing happens I mean it doesn't call the button click event on the serverside, I have tried

dlg.parent().appendTo(jQuery("form:first")); 

but it didnt help me too, is it possible to achive this inside asp.net UserControl ? Also I wonder if I can use UpdatePanel inside dialog or not?

Answer 1

You can make the button a dialog button and put a asp.net button on the page with the ID of HiddenButton and wrap it in a div with a style of display:none;

So the button is not visible. (Must not be Visible="false" so the button is rendered)

In the dialog javascript add a button that has the effect of clicking the hidden button

  jQuery("#dialog").dialog({
        buttons: {
            'ButtonText': function() {
                //save the session
           __doPostBack('<%# HiddenButton.ClientID %>', '')
                jQuery(this).dialog('close');
            }
        }
    });

and add a asp click handler to the hidden button

<div style="display:none;">
    <asp:Button ID="HiddenButton" OnClick="HiddenButton_Click" ></Button>
<div>

Click event on the serverside will fire when the dialog button is clicked

Hope this helps I use this pattern all the time

Answer 2

I suspect that it may be something to do with ASP.NET not being able to find the button within the form.

Use the .live event setup in jQuery - bind the event before you create the dialog using .live and it should work...

Live events in jQuery

You will end up with something like this in your document.ready function:

$("#btn").live("click", function(){
  // Do something
});


$("#dialog").dialog({
    ... 
}

Answer 3

I had the same issue. I ended up pulling the button out of the dialog, hiding it with css, and then triggering it from the close event on the dialog (I'm going to do it more cleanly later, but this does illustrate the issue, at least).