CODEWITHSUNDEEP
c#jqueryasp.net
Payton Byrd
Payton Byrd

Reputation: 986

Object #<Object> has no method 'dialog'

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>

Upvotes: 0

Views: 5755

Answers (2)

DefyGravity
DefyGravity

Reputation: 6031

you need to load jQuery UI to get the 'dialog'. here's google's CDN

jQuery UI name: jqueryui latest version: 1.8.16 (view older versions) load request: google.load("jqueryui", "1.8.16"); extras: uncompressed:true (as in google.load("jqueryui", "1.8.16", {uncompressed:true}); path: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js path(u): https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js site: http://jquery.com/ note: This library depends on jquery. You must also load jquery before loading this module. Version 1.8.3 is not hosted due to its short life, and the alias 1.8.3 actually loads 1.8.4.

Upvotes: 0

Andy Rose
Andy Rose

Reputation: 17014

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"/>

Upvotes: 5

Related Questions