Button doesn't postback inside jQuery dialog inside UC

Question

Hi,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

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 2

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