JQuery UI dialog - *Dialog not a function* error

A

8

17

I am developing a site using pinax. In one of my templates I am trying to open a simple jquery dialog box. However I keep getting the "Dialog not a function" javascript error. I am using jquery 1.2.6 and jquery-ui 1.6. My javascript and HTML are as follows:

<html>
<head>
<link type="text/css" href="/site_media/smoothness/ui.all.css" rel="stylesheet" />
<script src="/site_media/jquery.js" type="text/javascript"></script>
<script src="/site_media/ui/ui.core.js" type="text/javascript"></script>
<script src="/site_media/ui/ui.draggable.js" type="text/javascript"></script>
<script src="/site_media/ui/ui.resizeable.js" type="text/javascript"></script>
<script src="/site_media/ui/ui.dialog.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
                    $('#dialogbox').dialog();
            });
 </script>
 </head>
 <body>
   <div id="dialogbox" title="dialog title">
     <p>Test dialog</p>
   </div>
 </body>
 </html>

Can someone please explain why this is happening?

Advocacy answered 27/12, 2009 at 3:5 Comment(3)

The jQuery UI dialogs code is not initialized properly for some reason. Try building a single proper jquery UI js file as opposed to referencing them one by one - it might solve your problem. That's how you supposed to use it anyway. Have a look at jqueryui.com/download – Rhombencephalon 27/12, 2009 at 3:18

I've tried that approach also but it gives me the same error. – Advocacy 27/12, 2009 at 3:27

Are you sure the javascript files you are including are the official release versions of the files and have not been customized (inadvertently breaking something)? – Loy 27/12, 2009 at 5:59

F

36

I tried to duplicate your error both by using the public google versions and by downloading the legacy (1.6) version from the jQuery UI site and manually including the files. Neither caused a problem (http://jsbin.com/uloqi to see it working).

So, that means one of the following might solve your problem:

Use a tool like Firebug for Firefox to verify each JS file is being included.
Make sure there is no other JS on the page that could cause an error.
Verify you have the correct versions of the files downloaded.

I don't know what else to tell you since the code you pasted, when paired with the right files, works perfectly.

Ferwerda answered 27/12, 2009 at 5:2 Comment(3)

Doug, I had another JS file included in my page that was causing this. I need to drink more caffeine. – Advocacy 27/1, 2010 at 20:35

+1 2.nd point helped me. 2X jquery libs added to the same document. – Footlight 16/1, 2012 at 14:10

Make sure you have not customized your build of jQuery UI to not include the dialog component. – Jena 7/12, 2012 at 12:59

B

4

I had the exact same problem as the one described above (messagebox only opens once). The problem i had was that the html in the messagebox also loads jquery. Since i don't needed it i could remove it without problems. Otherwise you might have to pin down the problem a bit further.

Beghtol answered 24/10, 2010 at 11:12 Comment(0)

T

2

Under certain circumstances you can get this error if multible and different JQuery version are loaded at the same time.

In my case I has a ASP page that used a master. My master was including JQuery 1.4.2.min My aspx page I included JQuery 1.7.2.min

When JQuery functions were called from a control, it got confused about which JQuery to use so even though that script could state that JQuery was loaded ( it could display the JQuery version ), it failed to find any JQuery functions.

When I removed my local JQuery 1.7.2.min inclusion out of my aspx file, and updated my mater from 1.4.2.min to 1.7.2.min, the problem went away.

Tranquilize answered 26/5, 2012 at 0:35 Comment(0)

S

2

The answer by Doug Neiner helped really. My case was a bit more complicated, but still comes to same point:

I opened a dialog from Page A which loads Page B like this:

$('#MyDiv').dialog({
    autoOpen: false
})
$("#MyDiv").load("PageB.aspx", function () {
    $("#MyDiv").dialog("open");
});

The problem is that both Page A and B had included jQuery. Be aware: if you are loading another page into a dialog, it does not need to include same js.

Seigel answered 4/8, 2012 at 0:56 Comment(0)

G

0

As already explained, you probably override the existing libraries.

One way of dealing with it is to ensure that the correct files are loaded.

Another way is to insert an iframe between the dialog and the content in the dialog. Iframes are treated by the browser as a separate page with its own scripts. So the scripts of the content "on top of" the iframe, will be separate from the scripts of the dialog "under" the iframe.

Germiston answered 1/8, 2013 at 9:56 Comment(0)

E

0

I just have this issue too and the only solution that works for me was to save the dialog reference like:

var confirmDialog = $( "#dialog-confirm" ).dialog({
    autoOpen: false
});
$("#test").click(function () {
    confirmDialog.dialog('open');
});

Otherwise, everything I've tried failed with

.dialog() is not a function error

Hope this help.

Earmuff answered 29/8, 2017 at 13:6 Comment(0)

A

0

I had the same problem. Mine was self inflicted from a jQuery UI update from 1.11.4 to 1.12.1. I installed the upgrade using NuGet and NuGet removed the old 1.11.4 reference from my project but never added the new project reference.

Running locally the application worked great, but when deploying it the new 1.12.1 file never made it with the publish. I hope this helps someone else.

Aegir answered 13/11, 2017 at 21:0 Comment(0)

W

0

Another situation that can cause this issue is nested layouts that ultimately inhibit the rendering of jqueryUI scripts. I encountered this situation and worked backwards through the view folder and worked backward through the layouts to discover the "prevailing" layout did not have jqueryUI, just jquery, even though jqueryUI was specified in the "topmost" layout in the hierarchy. When I explicitly added it to the specifically named layout file, the problem was resolved - although I suspect the real issue involves digging through the layouts and understanding why sections were duplicated.

Weep answered 17/6, 2021 at 19:35 Comment(0)

Recommended topics

Hot tags