aperez
aperez

Reputation: 451

ASP.NET - UpdatePanel inside a JQuery modal dialog

I am trying to update the content of a modal dialog. I am using an updatepanel inside the dialog, but the page refreshes so the dialog is closed.

$("#dlg").dialog({
  autoOpen: false,
  bgiframe: true,
  width: 500,
  modal: true,
  closable: true,
  buttons: {
    Close: function () {
      $(this).dialog('close');
    }
  }
});
$("#dlg").parent().appendTo($("form:first"));

function openDialog() {
  $('#dlg').dialog('open')
  return false;
}

Here's the page:

<div id="dlg">
<asp:UpdatePanel ID="upNewUpdatePanel" runat="server">
    <ContentTemplate>
    <asp:Label ID="updateLabel" runat="server"></asp:Label>
    </ContentTemplate>
    </asp:UpdatePanel>
</div>


<asp:LinkButton ID="updateSomething" runat="server" Text="Update" CausesValidation="false" OnClientClick="openDialog();" onclick="UpdateButton_Click" />

And the update function:

protected void UpdateButton_Click(object sender, EventArgs e)
{
    updateLabel.Text = DateTime.Now.ToString();
}

Can anyone tell me what I have to do to update the dialog without refreshing the page?

Upvotes: 1

Views: 5213

Answers (2)

David Hoerster
David Hoerster

Reputation: 28701

Bala is right on. I'm pretty sure of this, but one thing to keep in mind is that if you are wiring up your dialog in $(document).ready(), it won't be preserved when the UpdatePanel refreshes. Essentially, that portion of your page will be recreated (partial page post-back) and any events that you wired up on the document load will be lost. I've run into this in the past - I'm pretty sure this is what's happening.

Hopefully this helps.

Upvotes: 2

Bala R
Bala R

Reputation: 108937

You'll have to define AsyncPostBackTrigger for the linkbutton in the updatepanel like this

<asp:UpdatePanel ID="upNewUpdatePanel" runat="server">
   <ContentTemplate>
       <asp:Label ID="updateLabel" runat="server"></asp:Label>
   </ContentTemplate>
   <Triggers>
       <asp:AsyncPostBackTrigger ControlID="updateSomething" EventName="Click" />
   </Triggers>
</asp:UpdatePanel>

Upvotes: 3

Related Questions