JQuery UI dialog not displaying

Question

I'm trying to display a "dialog" with JQuery UI when i click on a button, but it isn't displaying. Is there a problem in my program?

Here is my code:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mode" type="button" class="btn-modalita link">change mode</button>

<div id="dialog" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
    </span>you are changing mode. Are you sure?
  </p>
</div>

Thank you for telling me, I didn't know i should have iniztialized it. Should inizialize it on button click or when the page is loaded? — Filippo
– Filippo, Commented Jan 26, 2018 at 20:54
you need to initialize and hide it before you actually start interacting with it. — Snowmonkey
– Snowmonkey, Commented Jan 26, 2018 at 20:54

Snowmonkey · Accepted Answer · 2018-01-26 20:58:56Z

3

Initialize and hide the dialog, then you're good.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<button id="mode" type="button" class="btn-modalita link">change mode</button>

<div id="dialog" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
    </span>you are changing mode. Are you sure?
  </p>
</div>

edited Jan 26, 2018 at 20:58

answered Jan 26, 2018 at 20:54

Snowmonkey

3,7611 gold badge18 silver badges16 bronze badges

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

6 Comments

npearson Over a year ago

Or initialize $("#dialog").dialog({ autoOpen: false});

Snowmonkey Over a year ago

yup yup. prettier that way, too. I was realizing that there was the option, just had to update. Thanks, @npearson!

Filippo Over a year ago

Thank you very much. I'm sure it is the solution, but it didn't work to me. Should i maybe inizialize my dialog in JS before creating it in HTML?

Snowmonkey Over a year ago

what is it doing or not doing?

Filippo Over a year ago

I tried to display the error and it says "TypeError: $(...).dialog is not a function". Could there be a reason for that? I'm using Chrome

|

user3440782 · Accepted Answer · 2018-01-26 20:53:23Z

0

I guess you are missing on there and also make sure you are using Correct version of jquery

$(function() {
  $("#mode").on('click', function(){
    $("#dialog").dialog("open");
  });
});

answered Jan 26, 2018 at 20:53

user3440782

1442 silver badges14 bronze badges

1 Comment

Snowmonkey Over a year ago

Nah, the .click() function does the same as .on("click",...)

Snowmonkey · Accepted Answer · 2018-01-26 21:20:06Z

I worked in Jsfiddle and it worked fine here is the code:

$( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#mode" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });

<link href="https://code.jquery.com/ui/1.12.1/themes/eggplant/jquery-ui.css" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="mode" type="button" class="btn-modalita link">change mode</button>

<div id="dialog" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
    </span>you are changing mode. Are you sure?
  </p>
</div>

Collectives™ on Stack Overflow

JQuery UI dialog not displaying

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related