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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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');

    }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0