Question

I’m trying to work through a problem I’m having with jQuery’s dialog box in an ASP.Net application.

I have a page that has two dialog boxes, tos_text and tos_thankyou which are of course simple <div> tags with the content to display.

First, I’m using the Google CDN to reference jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

The problem I’m having is that when I attempt to attach the jQuery dialog method, the browser claims that the dialog method does not exist on the object. Since I’m using ASP.Net, I’m injecting the javascript conditionally at runtime in the Page_PreRender event handler as such:

    protected void Page_PreRender(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, GetType(), "RegisterThankYouDialog",
            "\n<script type='text/javascript'>$(function() { $('#tos_thankyou').dialog({ autoOpen: false, modal: true, buttons: { Ok : function() { $(this).dialog('close'); } } }); });</script>\n", false);

        ScriptManager.RegisterStartupScript(this, GetType(), "RegisterTOSDialog",
            "\n<script type='text/javascript'>$(function() { $('#tos_text').dialog({ autoOpen: false, modal: true, }); });</script>\n", false);

        if (Show || ForceShow)
        {
            ScriptManager.RegisterStartupScript(this, GetType(), "ShowTOSDialog",
                "\n<script type='text/javascript'>$(function() { $('#tos_text').dialog('open'); });</script>\n", false);
        }

        if (ShowThankYou)
        {
            ScriptManager.RegisterStartupScript(this, GetType(), "ShowThankYou",
                "\n<script type='text/javascript'>$(function() { $('#tos_thankyou').dialog('open'); });</script>\n", false);
        }
    }

This is the rendered code (from the Chrome JS console, with error included):

<script type="text/javascript">
//<![CDATA[
(function() {var fn = function() {$get("ctl00_smScripts_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();//]]>
</script>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'ctl00_NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type='text/javascript'>$(function() { $('#tos_thankyou').dialog({ autoOpen: false, modal: true, buttons: { Ok : function() { $(this).dialog('close'); } } }); });</script>
default.aspx:610Uncaught TypeError: Object [object Object] has no method 'dialog'

<script type='text/javascript'>$(function() { $('#tos_text').dialog({ autoOpen: false, modal: true, }); });</script>

<script type='text/javascript'>$(function() { $('#tos_text').dialog('open'); });</script>

<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.ModalPopupBehavior, {"BackgroundCssClass":"modalBackground","CancelControlID":"ctl00_MainContent_btnPrivacyOK","PopupControlID":"ctl00_MainContent_pnlPrivacy","dynamicServicePath":"/default.aspx","id":"ctl00_MainContent_ModalPopupExtender1"}, null, null, $get("ctl00_MainContent_btnPrivacy"));
});
//]]>
</script>

Answer 1

The dialog method is part of the jquery-ui script. Add this to your page:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

You may also want to add the related style sheet:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>