Jquery dialogue box with ASP.Net button control

Question

I'm calling this function from code-behind after getting successful result in datatable.

JavaScript

function ReportPossibilities() {
    $(document).ready(function () {
        var dlg = $('#ctl00_ContentPlaceHolder1_pnlReportDetails').dialog({
            show: 'slide',
            hide: 'blind',
            modal: true,
            minHeight: 150,
            minWidth: 600
        });
        $(".ui-dialog-titlebar").hide();
        dlg.parent().appendTo($("form:first"));
    });
}

ASPX

<asp:Panel ID="pnlReportDetails" runat="server" style=" display:none;">
<table>
<tr>
    <td style="padding: 4px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;
            font-size: .78em; font-variant: normal;" colspan="3">
                <asp:Label ID="lblMsg" runat="server"></asp:Label>
    </td>
</tr>
<tr>
    <td></td>
    <td colspan="3">
        <div id="ReportDetails">
            <asp:GridView ID="gvReportDetails" runat="server" AutoGenerateColumns="False" DataKeyNames="ReportID,ExistingColumnID" CssClass="box-table-a" Height="50px" BorderColor="Black" BorderWidth="1px">
                <RowStyle CssClass="row_odd" />
                <AlternatingRowStyle CssClass="row_even" />
                <Columns>
                    <asp:BoundField DataField="ReportId" Visible="false" />
                    <asp:BoundField DataField="ExistingColumnID" Visible="false" />
                    <asp:TemplateField HeaderText="Report Name">
                        <ItemTemplate>
                            <asp:CheckBox runat="server" ID="cbSelect" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Report Name">
                        <ItemStyle CssClass="ItemPixel" />
                        <ItemTemplate>
                            <asp:Label ID="lbReportName" runat="server" Text='<%#Bind("ReportName")%>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Existing Column">
                        <ItemStyle CssClass="ItemPixel" />
                        <ItemTemplate>
                            <asp:Label ID="lbExtCol" runat="server" Text='<%#Bind("ExistingCalc")%>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <ajaxToolkit:RoundedCornersExtender Corners="All" Radius="4" TargetControlID="Panel2" ID="RoundedCornersExtender1" runat="server" />
        </div>
    </td>
</tr>
<tr>
    <td align="center" colspan="3">
        <asp:Button ID="btnSubmitRptDetails" runat="server" Text="Submit" OnClick="btnSubmitRptDetails_Click" />
    </td>
</tr>
</table>
</asp:Panel>

Code-behind

   Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ReportPossibilities", "ReportPossibilities()", true);

This piece of code works in IE but not in google chrome and Firefox. Will be glad if someone focuses at my mistake.

Answer 1

As I am using 1.10 version of Jquery ui, I added following code and it worked on all browsers.

  $(document).ready(function () {
            var dlg = $('#ctl00_ContentPlaceHolder1_pnlReportDetails').dialog({
                show: 'slide',
                hide: 'blind',
                modal: true,
                minHeight: 150,
                appendTo: "form:first", // added 
                minWidth: 600

            });

        });