ASP.NET with jQuery popup dialog: how to send a message to close the dialog box

Question

People,

I am working on a rather complicated site. We have an update panel containing some controls. Clicking one of the controls opens the jQuery dialog box.

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

I know that the dialog has a handy callback event that you can connect to. But here's the deal. The javascript that manipulates the dialog box is in a separate .js file. I want to keep it separate. Thus, the code that performs the postback is either located in this .js file or is entered as a parameter into some method in the .js file.

How can i do this? And what would I pass the .js file methods?

Thank you very much.

Answer 1

It was just necessary to solve this recently. I have a general function to help solve this problem.

• Place the hidden asp:button inside the UpdatePanel or outside and set it as AsyncPostBackTrigger .
• If necessary, call the js function from ItemDataBound by going to the ClientID hidden asp:button .
• The js function will trigger an event of clicking on a button passed after pressing the "OK" button or any other button on which you set buttonTxt , pressing the button.
• You can then handle UpdatePanel.Update automatically if the button is inside the UpdatePanel or calls Update inside 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'); }