Вызов AJAX работает в Chrome и Safari, но не в Firefox и IE?

Question

Это мой код для сброса пароля пользователя, если пользователь забудет пароль. Данные отправляются в PHP-код через AJAX-запросы, а код PHP просто перекликается с «Y» или «N» в зависимости от действительности входов.

Проблема в том, что вызовы AJAX не работают в Firefox 19 и IE 9. Я не пробовал в других версиях IE. AJAX звонки прекрасно работают в хромовой и сафари. Кто-нибудь сталкивался с той же проблемой? Может ли кто-нибудь помочь?

<title> Forgot Password? </title>  

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery- validation/jquery.validate.js"></script> 

    <style type="text/css"> 

     label.error { color: red; } 

     #status { color: green; } 

    </style> 

    <script> 

     $(document).ready(function(){ 

      $('#code_form').hide(); 

      $('#password_form').hide(); 

      $("#email_form").validate({ 

       onkeyup: false, 

       rules: { 

        email: { 
        required: true, 
        email: true 
        } 
       }, 

       messages: { 
        email: { 
        required: "Please enter your email ID.", 
        email: "Please enter a valid email ID." 
       } 
       } 

      }); 


      $('#email_send').click(function() { 

       event.preventDefault(); 

       var email = $('#email').val(); 

       $.ajax({ 
        type: "POST", 
        url: "reset_code.php", 

        data: {email: email}, 
        cache: false, 
        success: function(response){ 

        if(response == "Y") 
        { 
         $('#code_form').show(); 
         $('#email_send').hide(); 
         $('#status').html("Check your mail for the reset code."); 

        } 
        else 
        { 

         $('#status').html("Looks like you have entered a wrong email ID."); 

        } 

       } 

      }); 

      }); 


      $("#code_form").validate({ 

       onkeyup: false, 

       rules: { 

        code: { 
        required: true, 
        digits: true 
        } 
       }, 

       messages: { 
        code: { 
        required: "Please enter the code received in your mail.", 
        digits: "Please enter the code received in your mail." 
       } 
       } 

      }); 

      $('#code_send').click(function() { 

       event.preventDefault(); 

       var email = $('#email').val(); 
       var code = $('#code').val(); 


       $.ajax({ 
       type: "POST", 
       url: "code_verify.php", 

       data: {email: email, code: code}, 
       cache: false, 
       success: function(response){ 

        if(response == "Y") 
        { 
         $('#password_form').show(); 
         $('#code_send').hide(); 
         $('#status').html("Ok, now enter your password twice before you forget again."); 

        } 
        else 
        { 
         $('#status').html("Please enter the code received in your mail."); 
        } 

       } 

      }); 

      }); 


      $("#password_form").validate({ 

       onkeyup: false, 

       rules: { 

        password: { 
        required: true, 
        minlength: 8 
        }, 
        repassword: { 
        required: true, 
        equalTo: "#password" 
        } 
       } 

      }); 

      $('#password_send').click(function() { 

       event.preventDefault(); 

       var email = $('#email').val(); 
       var password = $('#password').val(); 
       var repassword = $('#repassword').val(); 

       $.ajax({ 
        type: "POST", 
        url: "update_password.php", 

        data: {email: email, password: password, repassword: repassword}, 
        cache: false, 
        success: function(response){ 

        if(response == "Y") 
        { 

         $('#email_form').hide(); 
         $('#code_form').hide(); 
         $('#password_form').hide(); 
         $('#status').html("Password reset successful. Proceed to <a href=index.php>login</a> page. "); 


        } 
        else 
        { 
         $('#status').html("Oops. Something went wrong. Try again."); 

        } 

       } 


      }); 

     }); 

    }); 


    </script> 

</head> 

<body class="oneColElsCtr"> 

    <div class ="about_body"> 

     <a href="index.php"><img src="images/title_block_logon.png" style="margin- top:25px; margin-bottom:-10px;"/></a><br/> 

     <div id="status" class="alert alert-success" style="margin-top:20px; width:400px; margin-left:235px; margin-bottom:30px;"> 

      <h4 class="alert-heading"> Reset your password </h4> 

     </div> 

     <form class="form-horizontal" name="email_form" id="email_form" method="POST" action="" > 

      <fieldset> 

       <div class="control-group" style="margin-left:230px"> 

        <label class="control-label">Email</label> 

        <div class="controls" align="left"> 

         <input name="email" id="email" class="input-large" type="text" placeholder="Enter your Email id"/> 

        </div> 

       </div> 

       <div class="control-group"> 

        <button type="submit" id="email_send" class="btn btn-inverse submit">GO</button> 

       </div> 

      </fieldset> 

     </form> 

     <form class="form-horizontal" name="code_form" id="code_form" method="POST" action="" > 

      <p>Enter the code received in your Email</p> 

      <fieldset> 

       <div class="control-group" style="margin-left:230px"> 

        <label class="control-label">Code</label> 

        <div class="controls" align="left"> 

         <input name="code" id="code" class="input-large" type="text" placeholder="#####"/> 

        </div> 

       </div> 

       <div class="control-group"> 

        <button type="submit" id="code_send" class="btn btn-inverse submit">GO</button> 

       </div> 

      </fieldset> 

     </form>     

     <table style="text-align:left"> 

      <tr> 

       <td width="60%"> 

        <form class="form-horizontal" name ="password_form" id="password_form" method ="POST" action ="" > 

         <fieldset> 

          <div class="control-group" style="margin-left:90px;"> 

           <label class="control-label">Password</label> 

           <div class="controls"> 

            <input name="password" id="password" class="input-large" type="password" placeholder="Enter your Password" onfocus="Info_Over('#password_on_focus_info')" onblur="Info_Out('#password_on_focus_info')"/> 

           </div> 

          </div> 

          <div class="control-group" style="margin-left:90px;"> 

           <label class="control-label">Confirm Password</label> 

           <div class="controls"> 

            <input name="repassword" id="repassword" class="input-large" type="password" placeholder="Re-enter your Password"/> 

           </div> 

          </div> 

          <div class="control-group" style="margin-left:250px;"> 

           <button type="submit" id="password_send" class="btn btn-inverse submit">CONFIRM</button> 

          </div>       

         </fieldset>    

        </form> 

       </td> 

       <td width="400px" valign="top" style="padding-right:130px"> 

        <span id="password_on_focus_info" style="display:none;"> 

         Password should be 8 characters or more. Choose a strong password which is a combination of Capital and Small case alphabets, Symbols and Numbers. 

        </span>                

       </td> 

      </tr> 

     </table>  

    </div> 

</body> 
</html> 

Answer 1

Вы должны использовать объект события для параметра обработчика событий, хром и сафари имеет глобальный объект события вызывается событие, когда событие срабатывает, но светлячок не делает. Таким образом, event.preventDefault(); вызовет ошибку.

E.g.

$('#email_send').click(function(event) { 

Answer 2

Как уже было сказано, вы не правильно реализации preventDefault() внутри вашего click обработчика. Однако, даже если вы исправите проблему preventDefault(), скорее всего, она не будет работать должным образом. См.: http://jsfiddle.net/ZEFzx/, где код внутри обработчика click не запускается вообще.

К счастью, вам не нужно беспокоиться о click обработчике, так как плагин JQuery Validate уже имеет обработчик события функции обратного вызова представить встроенную, и это именно то, где вы должен поставить свой Аякс.

As per the documentation for the Validate plugin, функция submitHandler обратного вызова:

«Обратный вызов для обработки фактического смиряться, когда форма действует получает форму в качестве единственного аргумента Заменяет по умолчанию представить право ... место для подачи формы через Ajax после ее подтверждения ».

Попробуйте этот код вместо:

$(document).ready(function() { 

    $("#email_form").validate({ 
     onkeyup: false, 
     rules: { 
      email: { 
       required: true, 
       email: true 
      } 
     }, 
     messages: { 
      email: { 
       required: "Please enter your email ID.", 
       email: "Please enter a valid email ID." 
      } 
     }, 
     submitHandler: function (form) { 
      var email = $('#email').val(); 
      // var data = $(form).serialize(); // capture all the form data at once 
      $.ajax({ 
       type: "POST", 
       url: "reset_code.php", 
       data: { 
        email: email 
       }, 
       cache: false, 
       success: function (response) { 
        if (response == "Y") { 
         $('#code_form').show(); 
         $('#email_send').hide(); 
         $('#status').html("Check your mail for the reset code."); 
        } else { 
         $('#status').html("Looks like you have entered a wrong email ID."); 
        } 
       } 
      }); 
      return false; // blocks redirect after submission via ajax 
     } 
    }); 

}); 

DEMO: http://jsfiddle.net/xMg8e/