Почему этот диалог jQuery не работает?

Question

Диалоговое окно не запускается при нажатии ссылки, вы можете увидеть что-то не так с моим кодом JS/HTML?

Спасибо.

http://jsfiddle.net/LtQnT/

Answer 1

Вы <a href="javascript:forgotPassword();"> и forgotPassword функция определена внутри $(document).ready. Для того, чтобы сделать его работу нужно либо переместить определение из forgotPassword снаружи ready или сделать что-то вроде

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

Answer 2

Исправлено: http://jsfiddle.net/LtQnT/9/

Answer 3

Были некоторые проблемы с вашей скрипкой.

Во-первых, вы не включили пользовательский интерфейс jquery в библиотеку, поэтому, очевидно, ваш код не удастся. Вам также необходимо включить CSS. Были некоторые проблемы сферы применения, а также, я фиксированная те и отправили решение

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"); 
       } 
      }, 
    }); 
}); 

Answer 4

Я подправил свой код немного, так что он работает сейчас:

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> 

Работает демо-версия: http://jsfiddle.net/HxbTY/.

Вы не использовали jQuery UI, так как dialog() является частью jQuery UI, а не jQuery.

Я не уверен, почему эта функция не срабатывала (возможно, ошибка jsFiddle.net), но я добавил обработчик click() к ссылке, чтобы заставить ее работать.

Answer 5

Вы определяете функцию forgotPassword() в анонимной области, что хорошо. Тем не менее, встроенный Javascript, который в любом случае плохой, больше не может получить к нему доступ.

Используйте этот код вместо: <a href="#" id="forgotPasswordLink">Forgot?</a>

В ваших на готовый код: $('#forgotPasswordLink').click(forgotPassword); - объединить эти два отдельных $(document).ready() функций в одном одном, хотя: http://jsfiddle.net/ThiefMaster/LtQnT/13/