Reputation: 986
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
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
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