Strange issue when opening jquery dialog first time (within asp.net gridview)

Question

I have a gridview inside the update panel. One of the gridview fields is ASP.net linkbutton as follows:

  <ItemTemplate> <asp:LinkButton ID="hlSortOrder" runat="server" CssClass="hlDialog" OnClick="LoadLog" Text='<%# DataBinder.Eval(Container, "DataItem.SortOrder") %>'></asp:LinkButton> </ItemTemplate> 

When someone clicks the linkbutton button, I call the OnClick method that I created is called LoadLog . LoadLog is as follows:

 protected void LoadLog(object sender, EventArgs e) { GridViewRow gr = (GridViewRow)((DataControlFieldCell)((LinkButton)sender).Parent).Parent; Label l = (Label)gr.FindControl("lblID"); DataSet ds; ds = BL.GetRunoffAnswerLog(Convert.ToInt64(l.Text)); if (ds != null) { if (ds.Tables[0].Rows.Count == 0) { gvLog.Visible = false; gvLog.DataSource = null; lblRowsCount.Text = "No log for this record!"; } else { lblRowsCount.Text = ds.Tables[0].Rows.Count.ToString() + " row(s) found for this record."; gvLog.DataSource = ds.Tables[0]; gvLog.DataBind(); gvLog.Visible = true; } } ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$('#dialog').dialog({draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) {$(this).parent().appendTo('form');}});", true); } 

Basically, it gets a grid line descriptor, pulls some data from the database, and assigns it to the gvLog source. After that, pay attention to the line at the end:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$('#dialog').dialog({draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) {$(this).parent().appendTo('form');}});", true);

I need to do this so that I can open my dialog box. When I click a row in my gridview ONLY for the first time, I get the following:

Please note that this really shows the name ... weird. But as soon as I click on the same line again, it will display the entire dialog:

This only happens on the first click, if I keep clicking on different lines, it works fine. I have to add that I had to add the following jquery code:

  <script type="text/javascript"> $(document).ready(function () { var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function () { $("#dialog").hide(); // re-bind your jQuery events here }); ....more code... 

Based on this discussion: jQuery $ (document) .ready and UpdatePanels?

If I do not have this code at the moment the answer appears, the entire div that is inside this dialog is always displayed on my page, and I do not want this ...

As one of the following members mentioned. I believe that the first time you click the linkbutton button, a client-side event occurs that opens the actual open dialog, although I raise this server-side event ... as you see above, only when you click the "LoadLog" Event button click to register this jQuery opendialog. But it looks like it still opens a dialog for the first time, and as soon as you click on it a second time, only then the data is displayed.

Answer 1

I had a lot of problems with jQuery awesomeness and UpdatePanels. Try this approach:

• Place the div that you use for your dialog outside the update panel. Do not create your own dialogue in code. Instead, create your own dialog box when the page loads. Since your dialogue is outside the update panel, it will not stray. Be sure not to open it automatically.
• Add an extra div to your div dialog to hold your content.
• Create a javascript function that
  • clears the contents of div content in your dialog of any previous content
  • adds a gvLog control to the div div of the dialog box, something like $('#dialogContent').append($('#<%= gvLog.ClientID %>'));
  • shows dialogue
• Now, in your code, close the RegisterClientScriptBlock editor to call this new javascript function.

Code example
Code for:

 public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { //load in some dummy data Dictionary<int, string> vals = new Dictionary<int, string>() { {1, "ONE"}, {2, "TWO"}, {3, "THREE"}, {4, "FOUR"}, {5, "FIVE"}, {6, "SIX"} }; gvData.DataSource = vals; gvData.DataBind(); } } protected void LoadLog(object sender, EventArgs e) { LinkButton lb = (LinkButton)sender; var key = lb.CommandArgument; Random r = new Random(); Dictionary<int, int> dict = new Dictionary<int, int>(); for (int i = 0; i <= r.Next(5, 20); i++) { dict.Add(r.Next(), r.Next()); } gvLog.DataSource = dict; gvLog.DataBind(); //show log in dialog on client ScriptManager.RegisterStartupScript(up, up.GetType(), "openDialog", "showLog();", true); } } 

Constructor Code:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script> <link href="ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function () { //setup dialog $('#dialog').dialog({draggable: true, modal: true, height: 500, width: 750, title: 'Log', autoOpen: false}); }); function showLog() { //clear any old log data $('#dvContent').empty(); //append current log $('#<%= gvLog.ClientID %>').appendTo($('#dvContent')); //show dialog $('#dialog').dialog('open'); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="sp" runat="server" /> <div> <asp:UpdatePanel ID="up" runat="server"> <ContentTemplate> <asp:GridView ID="gvData" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:LinkButton ID="lbShowLog" runat="server" Text="Show Log" OnClick="LoadLog" CommandArgument='<%# Eval("Key") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <div style="display:none;"> <asp:GridView ID="gvLog" runat="server"> </asp:GridView> </div> </ContentTemplate> </asp:UpdatePanel> </div> <div id="dialog" style="display:none;"> <div id="dvContent"> </div> </div> </form> </body> </html> 

Answer 2

See this

Try adding a call to $('#dialog').dialog('open')

your first call to $('#dialog').dialog([Parmas]) can create it, but not open it.

Something like that:

  ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$('#dialog').dialog({draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) {$(this).parent().appendTo('form');}});$('#dialog').dialog('open');", true); 

NTN

Answer 3

Try changing the DOM before opening a dialog

In code:

 ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$(this).parent().appendTo('form'); 

In JS:

 $('#dialog').dialog({draggable: true, modal: true, height: 500, width: 750, title: 'Log', true); 

Answer 4

There is a very complicated solution for your problem that will save you from all the problems of the update panel and jquery.

First, we will not depend on the RegisterClientScriptBlock function, and instead, everything will be done using hidden fields.

• Create a hidden field that will be displayed if the show dialog is shown or not.
• Create a javascript function that checks if a hidden field matters or not. If the hidden field matters, display the show dialog box and depend on the hidden fields to get data that does not appear in the dialog box, this will fix the issue of the post-release dialog box message.
• Add an animation extender to the update panel.

<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1" runat="server"> <Animations> <OnUpdated> <Parallel duration="0">
<ScriptAction Script="YouFunctionCall();" /> </Parallel> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender>

and at the end of this javascript function clear the hidden field.

So what happens when sending back javascript will check if the flag is set or not, and it will detect that the flag is empty, and when you click inside the update panel, your server-side code will be launched and set by the hidden field flag and any other information required when the update panel animation expander starts the javascript function after updating the update panel, and checks the hidden field and finds it filled with data and calls the show dialog, and then reset the flag so that any other post does not show back ialog.