CODEWITHSUNDEEP
c#jquery
Shawn Larson
Shawn Larson

Reputation: 137

jquery Dialog reappears on postback

I have a GridView with a TemplateField holding a LinkButton. When this button is clicked it converts some XML that is in another hidden TemplateField to a string and assigns it to a label in a hidden div to be used in a modal dialog. Currently the dialog opens as expected with the proper information, it closes and I can select another record in the grid to view with no problems. This is where it goes wrong and I have not been able to find a solution. If I do something else on the page that causes a postback, the last dialog box to be opened will open on the new page load.

Here is my relevant mark-up:

    <script type="text/javascript">
$(document).ready(function() {
    $("#txtBeginDate").datepicker();
    $("#txtEndDate").datepicker();

    $("#response").dialog({
        autoOpen: false,
        modal: true,
        height: "auto",
        width: "auto",
        title: "Equifax Response",
        close: function(ev, ui) {
            $(this).dialog('destroy').remove();
        }
    });

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

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

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

    <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" 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>
            <PagerStyle CssClass="pgr" />
            <AlternatingRowStyle CssClass="alt" />
        </asp:GridView>
    </div>

I am new to programming so any help would be greatly appreciated.

Upvotes: 0

Views: 398

Answers (1)

Viktor S.
Viktor S.

Reputation: 12815

Update your code like this:

 <div id="response" visible="false">
    <asp:Label ID="lblDialog" runat="server" EnableViewState="False"></asp:Label>
 </div>

As far as I understand, when you click on a link, lblDialog is filled with some data on server and because of viewstate is enabled that data is restored on each postback. Than, if shown below returns true and popup is appears.

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

If you will add enableviewstate="false", inner text of lblDialog will be lost on second postback and lable will be empty after page is loaded (if not a link in grid is clicked).

You can get more info about viewstate and how it works here

Upvotes: 1

Related Questions