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?

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>