I need help with this javascript code. I keep getting this error:

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

Code:

<script>
$(function () {
$('#tdog').dialog({
     autoOpen: false,
     width: 200,
     modal: true,
  });
});
</script>

<div id="tdog"></div>

I included the jquery import in the header. What am I doing wrong?

I need help with this javascript code. I keep getting this error:

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

Code:

<script>
$(function () {
$('#tdog').dialog({
     autoOpen: false,
     width: 200,
     modal: true,
  });
});
</script>

<div id="tdog"></div>

I included the jquery import in the header. What am I doing wrong?

• javascript
• jquery
• html
• modal-dialog

• 1 Did you include jQuery UI or what ever library you are using? There is no dialog in jQuery core. – epascarello Commented Aug 17, 2015 at 19:57
• 1 It says exactly what is wrong...It simply means that the method is not available. Are you using a plugin? – Michelangelo Commented Aug 17, 2015 at 19:58
• I did include it like this: <script type="text/javascript" src="../js/plugins/jquery/jquery-ui.min.js"></script> – o.o Commented Aug 17, 2015 at 19:59
• Ok, when do you call the function after or before the included file? And are you sure the file is found? – Michelangelo Commented Aug 17, 2015 at 20:01
• I call it after the included file. I'm pretty sure it is found. When I check the network tab in Chrome, I see it that it was loaded. – o.o Commented Aug 17, 2015 at 20:04

4 Answers 4

I'm guessing you forgot to include jquery UI. See this answer for reference: Error: TypeError: $(...).dialog is not a function

The script is running before the div has been loaded on the page, thus it is unavailable, add the ready function to ensure it is loaded first.

$( document ).ready(function() {
  $('#tdog').dialog({
       autoOpen: false,
       width: 200,
       modal: true,
  });
});

You have to include the ui and also the styles before starting the script

<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$('#tdog').dialog({
     autoOpen: false,
     width: 200,
     modal: true,
  });
});
</script>

In Laravel, I had a minified version of all the js files in /public/js/app.js being included in app.blade.php (main template page). I mented out the inclusion of app.js and the error went away, presumably because of the 'included twice' points made above.