Error: TypeError: $(...).dialog is not a function

Question

I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>

Html:

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

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

From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.

Any Ideas?

Eupheemia

What about using document ready handler..? – Purloin

Thought that the script has to be after initializing the DIV? – Eupheemia

@RajaprabhuAravindasamy Won't make any difference because the script is after the button element. In any case it wouldn't throw an error. – Hast

@Maged Did you download the dialog dependency as well? – Hast

@Juhana there is no dialog dependency. – Lahdidah

@MichaelPerrenoud Well, I see one at jqueryui.com/download – Hast

If this isn't working that tells me you unchecked the dialog widget when building your download for jQuery UI. – Lahdidah

@Juhana if what you meant was what I said, then yes, but when you say dependency that implies a different library. – Lahdidah

@MichaelPerrenoud I know that's not the right word, but I used the same word the OP used so that they'd know what I meant (Core, Widget etc are not "dependencies" either). – Hast

@Juhana I've added it now, it was missing. although now getting "uncaught exception: cannot call methods on dialog prior to initialization; attempted to call method 'open'" when running it, any clue? – Eupheemia

Well, you're trying to open a dialog without initializing it. See the manual for instructions. – Hast

@ROX removed 'open' getting "TypeError: this.element.prop is not a function", now trying initializing solution. – Eupheemia

@Juhana Initialized and still get that error. – Eupheemia

Answer 1

Be sure to insert full version of jQuery UI. Also you should init the dialog first:

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });
  
  $("#opener").click(function() {
    $("#dialog1").dialog('open');
  });
});

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

Azores

Removing that I get another error "TypeError: this.element.prop is not a function this.options.disabled = !!this.element.prop( "disabled" );" – Eupheemia

@Maged Try to load the latest version of jQuery and jQuery UI, from the jQuery CDN, I'm sure the problem is with your jQuery files. As you see, my demo works correctly. – Azores

Changing jQuery to version 1.11.1 I works. Was definitely a library issue. SOLVED. – Eupheemia

In my case I was not aware of jquery-ui library, I included only the core jquery.min.js and was expecting that that would work. By adding the jquery-ui library, that solved my issue. – Stomachic

Answer 2

if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.

Some times it could be issue with older version (or not stable version) of JQuery files

Solution use $.noConflict();

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
   $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
});
// Code that uses other library's $ can follow here.
</script>

Polenta

This is the cause for my issue, in the end I removed one version, and this solution really gave me the hint. – Extracurricular

Answer 3

If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:

    </footer>

    @*@Scripts.Render("~/bundles/jquery")*@
    @RenderSection("scripts", required: false)
    </body>
</html>

Borlow

Could anyone elaborate on why? – Sapajou

I had this @Scripts.Render("~/bundles/jquery") on my ViewPage (not layout, but layout has this code too) and when I removed it my .js file finally works, thanks for info... me and my collegue were messing with JQuery and I think he added that part and since he did that nothing worked right... why I have no idea I'm a JS n00b – Colossae

Answer 4

I had a similar problem and in my case, the issue was different (I am using Django templates).

The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.

I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.

Thyrse

Answer 5

Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.

Alburg

Answer 6

I just experienced this with the line:

$('<div id="editor" />').dialogelfinder({

I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.

As soon as I commented out the second load, the error went away.

Kaciekacy

Answer 7

Here are the complete list of scripts required to get rid of this problem. (Make sure the file exists at the given file path)

   <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
    </script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
    </script>

and also include the below css link in _Layout.cshtml for a stylish popup.

<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />

Tonsorial