jquery ui dialog box not opening in html on click of a link

Question

I am trying to open a dialog box in html page on click of a link but its showing me an error like-Object doesn't support property or method 'dialog' on click in ie.

Please check my code below

source files

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Dialog code

$("#link").click(function(c){

                e.preventDefault();
          var dialog = $('<p>Are you sure?</p>').dialog({

            buttons: {
                "Yes": function() {alert('you chose yes');},
                "No":  function() {alert('you chose no');},
                "Cancel":  function() {
                    dialog.dialog('close');
                }
            }
        });
            }); 
            });

Answer 1

You need a div set up that will be the dialog, like in this example:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Animation</title> <link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); }); </script> </head> <body> <div id="dialog" title="Basic dialog"> <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> <button id="opener">Open Dialog</button> </body> </html>

Here's a jsbin with a working example with buttons

Answer 2

Replace the "c" with an "e" and remove the closing brackets at the end. You had one too many.

$("#link").click(function(e){

            e.preventDefault();
      var dialog = $('<p>Are you sure?</p>').dialog({

        buttons: {
            "Yes": function() {alert('you chose yes');},
            "No":  function() {alert('you chose no');},
            "Cancel":  function() {
                dialog.dialog('close');
            }
        }
    });
        });

jquery ui dialog box not opening in html on click of a link

Question

2 answers

solution1
0 2015-04-27 05:03:10

solution2
0 2015-04-27 05:06:08

jquery ui dialog box not opening in html on click of a link

Question

2 answers

solution1 0 2015-04-27 05:03:10

solution2 0 2015-04-27 05:06:08

solution1
0 2015-04-27 05:03:10

solution2
0 2015-04-27 05:06:08