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?
Just had to solve this recently. I have a generic function to help with the issue.
asp:button
within the UpdatePanel
or outside and set it as an AsyncPostBackTrigger
.ItemDataBound
if needed, passing in the ClientID
of the hidden asp:button
. buttonTxt
to, button is clicked. 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');
}