ASP.NET with jQuery popup dialog: how to post back

Folks,

I'm working on a rather complicated site. We have an update panel that contains some controls. When one of the controls is clicked, a jQuery dialog box opens.

When the dialog box closes, I want to signal the update panel to change its display. To do that I need to post back to the update panel.

I know the dialog box has a handy callback event that you can hook up to. But here's the thing. The javascript that manipulates the dialog is all in a separate .js file. I want to continue keeping it separate. So the code that does the postback has either be in that .js file, or injected as a parameter into some method in the .js file.

How can I do that? And what would I pass to the .js file methods?

Many thanks.

Just had to solve this recently. I have a generic function to help with the issue.

Put a hidden asp:button within the UpdatePanel or outside and set it as an AsyncPostBackTrigger.
Call the js function from ItemDataBound if needed, passing in the ClientID of the hidden asp:button.
The js function will call the click event on the button passed in once the "OK" or whatever you set buttonTxt to, button is clicked.
You can then handle the UpdatePanel.Update automatically if the button is inside the UpdatePanel or call Update within the butHidden_Click.

Markup:

<asp:UpdatePanel runat="server" ID="UpdatePanel1">
  <ContentTemplate>
     <asp:button id="btnHidden" style="display:none" runat="server" onclick="btnHidden_Click"/>
   </ContentTemplate>
 </asp:UpdatePanel>

Script:

   function showjQueryUIDialogOkBtnCallback(buttonToClick, dialogSelector, buttonTxt, isModal, width, height) 
   {
       var buttonOpts = {};
       buttonOpts[buttonTxt] = function () {
           $("#" + buttonToClick).trigger('click');
       };

       buttonOpts['Cancel'] = function () {
           $(this).dialog("close");
           $(this).dialog('destroy'); 
       }

       $(dialogSelector).dialog({
           resizable: false,
           height: height,
           width: width,
           modal: isModal,
           open: function (type, data) {
               $(this).parent().appendTo("form"); //won't postback unless within the form tag
           },
           buttons: buttonOpts

       });

       $(dialogSelector).dialog('open');

    }