2012-02-03 17 views
0

これに類似した質問がいくつかありますが、同じではないようですのでここに入りますか?Javascript AJAX呼び出しがfalseを返すと、Firefoxで呼び出しが失敗します。

私はログインフォームを持っているウェブサイトを持っています。私はphp関数を呼び出すためにajaxを使いたいが、すべてがクロムでうまくいく。 FirefoxでlogIn()javascript関数をトリガーするログインボタンをクリックすると、javascript:logIn()ページにリダイレクトされます。このページは白で、falseと表示されます。私がlogIn()メソッドでfalseを返すことを取り除くと、正常に動作するようです。

<form method="post" id="loginform" action="javascript:logIn()"> 
    <div> 
     <input type="text" value="Username..." name="username" id="username" onfocus="defaultInputUsername(this)" onblur="clearInputUsername(this)" /> 
     <input type="text" value="Password..." name="passwordText" id="passwordText" onfocus="setPass()"/> 
     <input type="password" value="" name="password" id="password" onfocus="defaultInputPassword(this)" onblur="checkPass()" /> 
     <input type="submit" id="submit" value="Login" name="Submit"/> 
     <a href="create-account.php" id="create"><span>Create Account</span></a> 
    </div> 
</form> 

以上ログインを呼び出す形である()javascriptのメソッドの下に発見された:

function logIn() { 
    var action = "check-login.php"; 
    var form_data = { 
     username : $("#username").val(), 
     password : $("#password").val(), 
     is_ajax : 1 
    }; 

    $.ajax({ 
     type : "POST", 
     url : action, 
     data : form_data, 
     success : function(response) { 
      if(response != 'failed') 
       $("#loginform").slideUp('slow', function() { 
        $("#login_response").html('<ul id="usernav" class="sf-menu sf-js-enabled sf-shadow"><li><div id="message"></div><ul><li><a href="#"><span>View Profile</span></a></li> <li><a href="#" onclick="logOut()"><span>Logout</span></a> </li></ul></li></ul>'); 
        $("#message").html('<a id="userlink" href="#"><span>' + response + '</span></a>'); 
        $("ul.sf-menu").superfish({ 
         animation : { 
          height : 'show' 
         }, // slide-down effect without fade-in 
         delay : 800, // 1.2 second delay on mouseout 
         autoArrows : false 
        }); 
       }); 
      else { 
       $("#username").css("border", "2px red inset"); 
       $("#password").css("border", "2px red inset"); 
      } 
     } 
    }); 

    return false; 
} 

それはクロームで動作していないのFirefoxをし、私が使用する必要がある場合とき誰かが私に言うことができればまったく偽を返します。それは素晴らしいだろう。

ありがとうございました!

答えて

2

これは非常に慣習的ではないコードなので、完全に答えにくいです。

一緒にハックすると、私はあなたの行動をonsubmit =に変更します。 「行動」はこれを意図したものではなかった。

<form ...stuff... onsubmit="return logIn();"> 

onsubmitでfalseを返すと、ページの投稿ができなくなります。 を返すことに注意してください。これはlogIn()の結果です。この場合は常にfalseです。

あなたも行うことができます:

onsubmit="logIn(); return false;" 

とログイン機能から偽のリターンを削除します。

:ajax呼び出しは、デフォルトではasyncです。

+0

をアドバイスをありがとう、私はonsubmitを使用してみましたが、それについての他の何かが壊れた、私は再びそれを試す必要があります。コードがなぜ非従来的なのかについてもう少し説明してください。また、return falseまたはe.preventDefault()を使用する方が良いです。 – Nath5

+0

@ Nath5 - 個人的には、マークアップのすべてのイベントハンドラとコード内のすべてのイベントハンドラを取得する方が良いと思います。 –

0

すでにjQueryを使用しているので、ユーザーがJavaScriptを無効にしている場合にログインするページにaction-attributeを設定してから、submitボタンを自動的にバインドしてlogIn() -function

このような何かはおそらく働くだろう(それをテストしていませんが、それは動作するはずです):

//When document is ready/loaded 
$(document).ready(function() { 

    //Register click handler for submit-button with id "submit" 
    $("#submit").click(function(event) { 
     //call javascript and prevent postback 
     event.preventDefault(); 
     logIn(); 
    }); 
} 

とあなたのloginformは次のようになります:

<form method="post" id="loginform" action="login-page-without-javascript.php"> 
関連する問題