CODEWITHSUNDEEP
javascriptjqueryjquery-ui-dialog
mzereba
mzereba

Reputation: 2517

JQuery open pop up dialog not working

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,

Upvotes: 1

Views: 6171

Answers (2)

Chris Kent
Chris Kent

Reputation: 871

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.

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

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

Upvotes: 2

Related Questions