Cannot open JQuery Dialog

Question

I have a button in my HTML, once click on the button, I want to open a JQuery Dialog. I have a version of code which works fine, but I just want to reorganize the code, seems like there's something wrong with it since the dialog cannot be displayed anymore.

the version that works:

<script type="text/javascript">
$(function() {
   $('#dialog_trigger').on("click", function() {
       $('#dialog').load('index.php', function() {
          $('#dialog').dialog({
           *********(somehow I must remove 'autoOpen: false' here, otherwise it also stops working) ********

              position: 'center',
              width : 480,
              height : 320, 
              modal : true
          });

        });
      });
  });

</script>

<body>
<button id="dialog_trigger">Click me</button>
<div id="dialog"></div>
</body>

the code that doesn't work:

<script type="text/javascript">
$(function() {
   $('#dialog_trigger').on("click", function() {
       $('#dialog').load('index.php', function() {
          $('#dialog').dialog("open")
       });
    });

   $('#dialog').dialog({
    autoOpen: false,
    position: 'center',
    width : 480,
    height : 320, 
    modal : true
   });

});

</script>

<body>
<button id="dialog_trigger">Click me</button>
<div id="dialog"></div>
</body>

Please help me correct it, thanks.

$('#dialog').dialog("") I don't think that's right, what are you really trying to do there? — Ohgodwhy
– Ohgodwhy, Commented Jul 18, 2013 at 0:33
opps, sorry, copy error, originally is $('#dialog').dialog("open"). fixed it. — user1453951
– user1453951, Commented Jul 18, 2013 at 0:39

Sushanth -- · Accepted Answer · 2013-07-18 00:52:08Z

2

Firstly move the signature for the dialog to outside the click event.

Then in the click event you can use

$('#dialog').dialog("open")

to show the dialog

Check Fiddle

Code

  $('#dialog_trigger').on("click", function() {
       $('#dialog').load('index.php').dialog("open")
    });

   $('#dialog').dialog({
     autoOpen: false,
     position: 'center',
     width : 480,
     height : 320, 
     modal : true
   });

edited Jul 18, 2013 at 0:52

answered Jul 18, 2013 at 0:35

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1453951 Over a year ago

Sorry, there's a copy error before, I do call the "$('#dialog').dialog("open")" inside the click event, and define the dialog outside. However, it doesn't work, I mean, after I clicking the button, nothing happens.

user1453951 Over a year ago

and Sushanth, I want to load a web page into the dialog, please see my first version of code, can you help fix the second one according to what I want in the first one?

Sushanth -- Over a year ago

@user1453951.. Why don't you try this $('#dialog').load('index.php').dialog("open")

user1453951 Over a year ago

huh, that's what I want, thanks!!! Btw, do you know what's the difference if I put "open" to the dialog() or not? Is it a function parameter?

Sushanth -- Over a year ago

open is a method available on the dialog object .. If you just call .dialog() instead of specifying a method , it will just create a new instance of dialog box which is not what you want

|

Collectives™ on Stack Overflow

Cannot open JQuery Dialog

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related