Open pop up dialog in jQuery not working

Question

I am trying to open a pop up window, doing the basic thing to start with, but instead is showing me the dialog when the page loads, plus the button doesn't trigger anything.

<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
    $( "#dialog" ).dialog({ autoOpen: false });
    $( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
    });
</script>

This are my imports:

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

What I am doing wrong or forgetting to import?

Thanks,

Answer 1

dialog isn't built into jQuery - it is part of jQuery UI which is an extension of jQuery - http://jqueryui.com/dialog/ .

Also it looks like you are importing 3 different versions of the core jQuery code, which will probably cause issues.

So this is probably what you are looking for (after downloading jQuery UI to your scripts folder):

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

And then open it using the open() method:

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