1

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.

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

Here are my elements:

<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title" hidden="hidden">I'm a dialog</div>

This are my 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>

the jquery-ui-1.11.1.js contains the Core only and not Widget, Mouse and Position.

What I am doing wrong or forgetting to import?

Thanks,

2 Answers 2

2

For opening the dialogue on click :

 $( "#opener" ).click(function() {
  $('#dialog').dialog('open');
 });

as you need to show this on page load, write $('#dialog').dialog('open'); in dom ready event as well.

Working Demo

6
  • As well? I've written it in the ready function only. Where else?
    – mzereba
    Sep 24, 2014 at 9:50
  • $('#dialog').dialog('open'); should work. place the code in dom ready after initializing dialogue. Sep 24, 2014 at 9:51
  • I've changed it to that, but still doesn't unfortunately.
    – mzereba
    Sep 24, 2014 at 9:53
  • The dialog is simply showing when you load the page as a regular DIV
    – mzereba
    Sep 24, 2014 at 9:55
  • @Maged: see the demo. Sep 24, 2014 at 9:57
0

From the dependencies towards the top of the dialog API page, the following are required:

  • UI Core
  • Widget Factory
  • Position
  • Button

and the following are optional:

  • Draggable (optional; for use with the draggable option)
  • Resizable (optional; for use with the resizable option)
  • Effects Core (optional; for use with the show and hide options)

If your jquery-ui-1.11.1.js contains the Core only, that would probably be why it isn't working for you.

1
  • Thanks! Downloading all the dependencies, the zip file contains the following .js files: jquery-ui.js and jquery-ui.min.js. Should I include both of them?
    – mzereba
    Sep 24, 2014 at 11:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.