4

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?

Ann L.
  • 13,760
  • 5
  • 35
  • 66
  • You can extend the function in the js file to receive a callback function for each method from the dialog box that needs hooking into; then just wire up those functions, but check them first: if (typeof(cbFncClose) === 'function') cbFncClose(); – rkw Nov 09 '11 at 04:48

1 Answers1

3

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

    }
umlcat
  • 4,091
  • 3
  • 19
  • 29
rick schott
  • 21,012
  • 5
  • 52
  • 81
  • Very ingenious! Thank you! I wasn't keen at first on having a hidden button that only gets clicked through script, but I can see that, given the complications of posting back AND an update panel, this might be the most reliable solution. Thanks again! – Ann L. Nov 09 '11 at 15:23
  • 1
    That does works great! Finally! Took me 2 days to get this to work (with fiddling and with google surfing). Thanks for the posted answered code that works. – fletchsod Jul 10 '14 at 19:39