0

I was wondering if anyone could help me out with an issue I am having. I am using Asp.net and JQuery UI 1.9.2. What I have on my form is a textbox and a button for searching. When the button is clicked, server side I query the database and store all the results in a Gridview. To make the DataTable work with Asp.Net gridview, I do the following in CS:

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);

    // No point to change settings if there isn't any rows
    if (this.gridMemberInfo.Rows.Count <= 0)
        return;

    // Change table so there is a THEAD
    this.gridMemberInfo.HeaderRow.TableSection = TableRowSection.TableHeader;

    if(this.gridMemberInfo.ShowFooter)
        this.gridMemberInfo.FooterRow.TableSection = TableRowSection.TableFooter;
}

This Gridview is inside of a div that I use for a JQuery Dialog to act as a modal popup. After binding the gridview's datasource with the results from the query, I do this to create the modal:

CS:

ScriptManager.RegisterStartupScript(this, this.GetType(), "MemberModal", "CreateMemberModal();", true);

JS:

function CreateMemberModal()
{
    $(document).ready(function ()
    {
        $("#modal").dialog(
        {
            modal: true,
            hide: "explode",
            width: 700,
            height: "auto",
            resizable: false,
            open: function (event, ui)
            {
                $("#gridMemberInfo").dataTable(
                {
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "aaSorting": []
                });
            }
        })
    });
}

The modal is displayed correctly and works perfectly the first time the dialog opens. However, if the user closes the dialog and performs a different search, then the dialog opens but the gridview doesn't take any of the DataTable properties (shown as a regular HTML table in the modal). Also, the modal div is inside of an asp:UpdatePanel, so the page doesn't reload during the search. Can anyone see what I am doing wrong?

4

1 回答 1

0

Going off of Dan's comment, I removed the $(document).ready() logic in the CreateMemberModal() function. I now only call it in my CS when I need to rebind my gridview by doing this:

ScriptManager.RegisterStartupScript(this, this.GetType(), "MemberModal", "CreateMemberModal();", true);

However, addition things needed to be done like Dan noted. I noticed that if I moved my GridView outside of the modal div, then the table showed the updated search results. So this made me think it was an issue with the actual JQuery Dialog and not DataTables. What I found that I needed to do was completely destroy the Dialog on close and remove it from the DOM. So now my CreateMemberModal() function looks like this:

function CreateMemberModal()
{
    $("#modal").dialog(
    {
        modal: true,
        hide: "explode",
        width: 700,
        height: "auto",
        resizable: false,
        autoOpen: false,
        close: function (event, ui)
        {
            $(this).dialog("destroy").remove();
        },
        open: function (event, ui)
        {
            if (!isDataTable($("#modal table")[0]))
            {
                $("#modal table").dataTable(
                {
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "aaSorting": []
                });
            }
        }
    });

    $("#modal").dialog("open");
}

So when I close the dialog, I completely destroy it. Then when I need to do a new search, I recreate it and everything works like a charm!

于 2013-08-28T20:52:31.687 回答