0

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,

mzereba
  • 2,467
  • 5
  • 26
  • 40

1 Answers1

0

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();
});
Rhumborl
  • 16,349
  • 4
  • 39
  • 45
  • So I've organized my imports like you suggested, and sorry for not answering back, but I had to clean up after eliminating some libraries. So still this way doesn't fire! JQuery UI I've added only the core and no widget fyi. – mzereba Sep 24 '14 at 09:38