CODEWITHSUNDEEP
c#jqueryasp.net
Shawn Larson
Shawn Larson

Reputation: 137

jQuery Dialog closes immediately

I have a jQuery dialog box that closes immediately upon opening. It is set to a button located in a template field of a GridView.

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 relevant 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 a label with an assigned string from CodeBehind:

<div id="response">
    <asp:Label ID="lblDialog" runat="server" ></asp:Label>
</div>

Upvotes: 4

Views: 4567

Answers (3)

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102388

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

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 this in a different manner:

$(document).ready(function() {

    $("[id*=lnkEquifaxResponse]").on("click", function EquifaxResopnse() {
            $("#lblDialog").empty();
        });

    if($("#lblDialog").text() != "")
    {
        $("#response").dialog("open");
    }
});

Upvotes: 2

Josh Bedo
Josh Bedo

Reputation: 3462

The live method is deprecated and it should be like this instead and you should add an event argument to pass 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 instead add at the end of your callback

return false;

but this becomes quite buggy in IE and ev.preventDefault() checks for IE and whether or not to add return false or returnValue. IE7 likes to see this and won't 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;
    }
},

Upvotes: 1

Rob
Rob

Reputation: 5588

If lnkEquifaxResponse is causing a postback, then that is the problem. The dialog is being re-rendered as closed after the postback. Are you using UpdatePanels or anything else?

Upvotes: 2

Related Questions