CODEWITHSUNDEEP
jquery
Or Weinberger
Or Weinberger

Reputation: 7472

Why is this jQuery dialog not working?

Dialog window is not launched when pressing the link, can you see anything wrong with my JS/HTML code?

Thanks.

http://jsfiddle.net/LtQnT/

Upvotes: 1

Views: 27773

Answers (6)

Waruna Manjula
Waruna Manjula

Reputation: 3477

  <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>
  <script>
  $( function() {
   $('#theLink').click(function(){
                   $( "#dialog" ).dialog();    
    });

  } );
  </script>
  
 <a id='theLink' href="#">Forgot?</a> 
  
  <div id="dialog" title="Forgot Password" style="display:none;">
  <div id="forgot-dialog"  title="Reset your password">
<form id="forgotform" action="/forgotPassword.php" method="post">
<label for="forgot_email">Email</label>
<input type="text" name="forgot_email" id="forgot_email" class="text ui-widget-content ui-corner-all" value="<?= $fb_email ?>" />
</form>
</div>
</div>

Upvotes: 0

ThiefMaster
ThiefMaster

Reputation: 318488

You are defining the forgotPassword() function in an anonymous scope which is a good thing. However, inline Javascript - which is a bad thing anyway - cannot access it anymore.

Use this code instead: <a href="#" id="forgotPasswordLink">Forgot?</a>

In your on ready code: $('#forgotPasswordLink').click(forgotPassword); - merge those two separate $(document).ready() functions in a single one though: http://jsfiddle.net/ThiefMaster/LtQnT/13/

Upvotes: 0

Blender
Blender

Reputation: 298106

I tweaked your code a little bit, so it works now:

JavaScript:

$('#forgot').click(function() {
        $( "#forgot-dialog" ).dialog( "open" );
});

$(document).ready(function() {
    $( "#forgot-dialog" ).dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Retrieve": function() {
                    document.forms["forgotform"].submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
    });
});

HTML:

<a href="#" id="forgot">Forgot?</a>

<div id="forgot-dialog" style="display:none;" title="Reset your password">
<form id="forgotform" action="/forgotPassword.php" method="post">
<label for="forgot_email">Email</label>
<input type="text" name="forgot_email" id="forgot_email" class="text ui-widget-content ui-corner-all" value="<?= $fb_email ?>" />
</form>
</div>

Here's a working demo: http://jsfiddle.net/HxbTY/.

You weren't including jQuery UI, as dialog() is part of jQuery UI, not jQuery.

I'm not sure why that function didn't fire (probably a jsFiddle.net bug), but I added a click() handler to the link to make it work.

Upvotes: 5

JohnP
JohnP

Reputation: 50019

There were a few problems with your fiddle.

First, you didn't include the jquery UI as a library so obviously your code will fail. You also need to include the CSS. There were some scope issues as well, I've fixed those and posted the solution

http://jsfiddle.net/jomanlk/LtQnT/11/

$(document).ready(function() {
    $('#theLink').click(function(){
                $( "#forgot-dialog" ).dialog( "open" );    
    });

    $( "#forgot-dialog" ).dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Retrieve": function() {
                    document.forms["forgotform"].submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
    });
});

Upvotes: 1

a1ex07
a1ex07

Reputation: 37354

You have <a href="javascript:forgotPassword();"> and forgotPassword function is defined inside $(document).ready. To make it work you need either to move definition of forgotPassword outside of ready or do something like

<a id='my_link' href='javascript:void(0)'>Forgot</a>
$(document).ready(function() {
 .... 
  $("#my_link").click(function(e){ 
$("#forgot-dialog").dialog("open");
});

Upvotes: 1

mattsven
mattsven

Reputation: 23253

Fixed: http://jsfiddle.net/LtQnT/9/

Upvotes: 0

Related Questions