JQuery - Click event not working

Question

Can anyone spot why the ShowVideo click event won't fire to make the JQueryUI dialog show? I'm sure it's something relatively simple that i'm overlooking.

Here is my page's relevant code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<link rel="Stylesheet" type="text/css" href="Styles/Site.css" />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,600,900' rel='stylesheet' type='text/css' />
 <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>


 <script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $("#dialog").dialog({ autoOpen: false }); //Hide the modal on page load.
        });

        $("#ShowVideo").click(function () {

            $("#dialog").dialog("option", "show", "slow"); // Should show the MF'ing dialog but never gets hit!
        });
    });

  </script>


</head>
<body>

        <h2Links</h2>
        <ul class="SidebarMenu">
            <li id="ShowVideo">Test Popup</li>
        </ul>


   <div id="dialog" title="Test">

  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>



</body>
</html>

Quick JS fiddle to demonstrate: http://jsfiddle.net/Lnp9v/

Off topic: You have nested ready() functions for some reason. — isherwood
– isherwood, Commented Nov 18, 2013 at 18:27
You're just changing an option, not really showing the dialog ? — adeneo
– adeneo, Commented Nov 18, 2013 at 18:27
Thanks Isherwood - copy and paste issue I didn't spot. Not sure why the question got downvoted though - what's wrong with it? — Leopold Stotch
– Leopold Stotch, Commented Nov 18, 2013 at 20:48

Tim Withers · Accepted Answer · 2013-11-18 18:28:51Z

4

You are changing an option, not "open"-ing the dialog:

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

Updated Fiddle: http://jsfiddle.net/Lnp9v/4/

answered Nov 18, 2013 at 18:28

Tim Withers

12.1k5 gold badges45 silver badges68 bronze badges

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

5 Comments

isherwood Over a year ago

This would be better if you'd retained the 'slow' option.

Tim Withers Over a year ago

@isherwood I did. Look at the dialog setup.

isherwood Over a year ago

It doesn't transition in Chrome.

Tim Withers Over a year ago

Not in mine either. Don't know about other browsers, or if it is jsfiddle.

Leopold Stotch Over a year ago

The transition wasn't overly important, i'll work on that, thank you Tim.

km6zla · Accepted Answer · 2013-11-18 18:29:55Z

1

The method is open.

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

answered Nov 18, 2013 at 18:29

km6zla

4,9272 gold badges32 silver badges53 bronze badges

Collectives™ on Stack Overflow

JQuery - Click event not working

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related