Geek Answers Handbook

JQuery dialog closes immediately

I have a jQuery dialog box that closes right after opening. It is installed on the button located in the field of the GridView template.

My JavaScript:

<script type="text/javascript"> $(document).ready(function() { $("#txtBeginDate").datepicker(); $("#txtEndDate").datepicker(); $("#response").dialog({ autoOpen: false, modal: true, title: "Equifax Response" }); $("[id*=lnkEquifaxResponse]").live("click", function EquifaxResopnse() { $("#response").dialog("open"); }); }); </script>

My respective GridView markup:

 <div id="Gridview"> <asp:GridView ID="grClientTransactions" runat="server" AllowPaging="True" PageSize="25" AutoGenerateColumns="False" DataKeyNames="ResponseXML" EmptyDataText="Record not found." EmptyDataRowStyle-BackColor="#CCCCCC" EmptyDataRowStyle-Font-Bold="true" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" OnPageIndexChanging="grClientTransactions_PageIndexChanging" onrowcommand="grClientTransactions_RowCommand"> <Columns> <asp:TemplateField ShowHeader="false"> <ItemTemplate> <asp:LinkButton ID="lnkEquifaxResponse" runat="server" CausesValidation="False" CommandName="EquifaxResponse" Text="View" CommandArgument='<%# DataBinder.Eval(Container, "RowIndex") %>'> </asp:LinkButton> </ItemTemplate> </asp:TemplateField> <asp:TemplateField Visible="false" HeaderText="Equifax Response"> <ItemTemplate> <asp:Label ID="lblEquifaxResponse" runat="server" Text='<%# Bind("ResponseXML")%>' > </asp:Label></div> </ItemTemplate> </asp:TemplateField> </Columns>

My div that displays the label with the assigned string from CodeBehind:

 <div id="response"> <asp:Label ID="lblDialog" runat="server" ></asp:Label> </div>
+4
source share
3 answers

The jQuery live() method has been deprecated and removed in version 1.9 and has been replaced with on() .

Therefore replace this:

 $("[id*=lnkEquifaxResponse]").live("click", function EquifaxResopnse() { $("#response").dialog("open"); });

with this:

 $("[id*=lnkEquifaxResponse]").on("click", function EquifaxResopnse() { $("#response").dialog("open"); return false; // Prevents the postback });

You can do it differently:

 $(document).ready(function() { $("[id*=lnkEquifaxResponse]").on("click", function EquifaxResopnse() { $("#lblDialog").empty(); }); if($("#lblDialog").text() != "") { $("#response").dialog("open"); } });
+2
source

If lnkEquifaxResponse causes a lnkEquifaxResponse , then this is the problem. The dialog is re-displayed as closed after the postback. Are you using UpdatePanels or something else?

+2
source

The live method is deprecated, and it should be like this instead, and you must add an event argument to go into the callback. You also need to add preventDefault (); which prevents the default behavior of the anchor tag

  $("[id*=lnkEquifaxResponse]").on("click", function EquifaxResopnse(ev) { //prevents the default behavior of the anchor tag causing the page to postback or re-render ev.preventDefault(); $("#response").dialog("open"); });

You can also add at the end of your callback

 return false;

but this becomes quite a mistake in IE and ev.preventDefault () checks for IE and whether it adds return false or returnValue. IE7 loves to see this and will not work otherwise.

 ev.returnValue = false;

The source for preventDefault () looks like this in jQuery

 preventDefault: function() { this.isDefaultPrevented = returnTrue; var e = this.originalEvent; if ( !e ) { return; } // if preventDefault exists run it on the original event if ( e.preventDefault ) { e.preventDefault(); // otherwise set the returnValue property of the original event to false (IE) } else { e.returnValue = false; } },
+1
source

More articles:


All Articles