jQuery Modal Dialog With dynamic Content

Question

OK, beating my head here. There seems to be lots of discussion about this, but I think I need it broken down in more detail. I would like to create a modal dialog with a tree view that allows some user interaction (check boxes), and then sets a field on the main page when the user clicks OK on the dialog. Not totally sure how to do this.

I can open the dialog with a button click no problem.

Markup:

<input id="buttonBuildSelect" runat="server" value="Build Select" type="submit" onserverclick="buttonBuildSelect_ServerClick" />
<div id="dialog" title="Expression Builder">
    <p>
        <asp:CheckBox ID="checkBoxOverwrite" runat="server" Text="Overwrite Existing Statement" /></p>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Panel ID="Panel1" runat="server" Style="border: 1px solid black; overflow: auto;
                height: 200px;">
                <asp:Label ID="labelExpressionType" runat="server" Text=""></asp:Label>
                <asp:TreeView ID="popupTreeView" runat="server" CssClass="treeview" ShowLines="true"
                    NodeStyle-CssClass="nodeStyle">
                </asp:TreeView>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />        
</div>

Script:

$(document).ready(function () {

    $(function () {
        $("input:submit").button();
        $("input:submit").click(function () {
            $("#dialog").dialog("open");
            return false;
        });
    });


    $(function () {
        $("#dialog").dialog(
            {
                autoOpen: false,
                modal: true,
                width: 400,
                height: 355,
                resizable: false,
                open: function () {
                    $(this).load("ExpressionBuilder.ascx");
                },
                options: { resizable: false },
                buttons: { "OK": function () {
                    return false
                },
                    Cancel: function () {
                        $(this).dialog("close")
                    }
                }
            }
        )
    });
});

But I cannot figure out how to 1) Click Button 2) Load Tree View From Database 3) Open Dialog

I have been working on two methods, but can't get either to work.

Method 1: Use ajax. But, what format do I return data in to bind to tree view and how to bind tree view from script.

Method 2: Put contents of dialog in separate user control, and then set the dialog to load the user control

Which method to pursue, and then need some assistance in getting that method working...

Thanks

Edit

I am building a query builder. The user chooses the entity from a drop down of available entities. The user clicks on a 'Build Select Statement' button. A Dialog appears with a tree view of the selected entity as parent node and child nodes of all fields in the entity. The user checks each field they want included in the select statement and clicks OK. The dialog closes and the 'Select Statement' text box is filled with the checked fields formatted as an Entity Data Source ESQL statement (it.[field1], it.[field2],etc...)

The code posted above opens the dialog, but there us no content (because I have not bound any data. I could hard code the data, but I want the user to be able to select which entity to use, so that means the data source of the tree view must be dynamic. Right now, I have not been able to get either method to work. No errors, but no dialog either (Button click does nothing).

Answer 1

The solution:

Build the dialog in code behind instead of in script. Then register script. So, I created a method:

''' <summary>
''' Open the jquery dialog
''' </summary>
''' <remarks></remarks>
Protected Sub OpenDialog()
    Dim sb As New StringBuilder()
    sb.Append("$(function() { ")
    sb.Append(" $('#dialog').dialog({")
    sb.Append("    modal: true,")
    sb.Append("    width: 400,")
    sb.Append("    height: 355,")
    sb.Append("    show: 'blind',")
    sb.Append("    hide: 'blind',")
    sb.Append("    resizable: false,")
    sb.Append("    buttons: { 'OK': function () {")
    sb.Append("        return false;")
    sb.Append("    },")
    sb.Append("        cancel: function () {")
    sb.Append("            $(this).dialog('close');")
    sb.Append("        },")
    sb.Append("    },")
    sb.Append(" });")
    sb.Append("});")
    Page.ClientScript.RegisterStartupScript(GetType(Page), "myscript", sb.ToString(), True)
End Sub