jqueryasp.netupdatepaneljquery-ui-dialogasynchronous-postback

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


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?


Solution

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

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