CODEWITHSUNDEEP
javascriptjqueryjquery-ui-dialog
mzereba
mzereba

Reputation: 2517

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

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?

Upvotes: 72

Views: 291207

Answers (7)

Manoj Patil
Manoj Patil

Reputation: 980

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>

Upvotes: 14

crazysj
crazysj

Reputation: 405

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

Upvotes: 1

dashtinejad
dashtinejad

Reputation: 6253

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>

Upvotes: 104

Anupam
Anupam

Reputation: 15610

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.

Upvotes: 1

josepainumkal
josepainumkal

Reputation: 1733

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

Upvotes: 0

Bob Ray
Bob Ray

Reputation: 1172

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.

Upvotes: 0

Rocky Royalson
Rocky Royalson

Reputation: 119

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>

Upvotes: 8

Related Questions