1

現在、Ajax/jQuery を使用するように登録ページを調整しています。単純な段階で、ユーザー名とパスワードを要求するだけです。

jQuery を使用して、ユーザー名テキスト ボックスの現在のエントリが無効であるか、既に使用されているかをユーザーに伝えたいと考えています。いずれかの条件が満たされた場合、div namemsg にテキストが追加され、fadeIn イベントが実行されます。

送信ボタンが無効な状態でページが読み込まれ、検証に合格するとボタンが有効になります。これを行うには、ユーザー名の検証を処理する次の ajax リクエストがあります。

$("#username").keyup(function(){
    //get current value
    thisVal = $(this).val();

    //execute request to see if current val exists in database
    $.ajax({
      type: "GET",
      url: "includes/phpscripts.php?action=checkUser",
      data: {username:thisVal},
      success: function(data){

        //if username is already taken, show warning and disable submit button
        if (data == 'true'){
          $("#namemsg").text("Username is already taken");
          $("#namemsg").fadeIn(100);
          $("#submit").attr('disabled', 'disabled');
        } 

        //otherwise, possible valid username
        else if (data == 'false'){

          //check if username is of the proper length.  If not, display
          //error and disable submit button
          if ($(this).val().length < 5){
            $("#namemsg").text("Invalid Username");
            $("#namemsg").fadeIn(100);
            $("#submit").attr('disabled', 'disabled');
          } 


          //valid username, enable submit button and hide any error messages
          else {
            $("#namemsg").hide();
            $("#submit").removeAttr("disabled");
          }

        }
      }

    });

    return false;
});

私の問題は、リクエストがサーバーから適切な値を取得することですが、firebug はelem.nodeName、jquery 1.7.2 の 2368 行で未定義であると不平を言います。その行は

if ( elem ) {
  hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];

にブレークポイントを設定するとif (elem)、elem値がありました

nodeName : INPUT
type : text

hooks未定義を返しました。これは Firefox 固有の問題ですか、私のコードまたは jQuery の問題ですか? また、これに対する回避策はありますか?

4

2 に答える 2

5

successハンドラー内には、フィールドでthisはなく jqXHR リクエストがあるため、エラーが発生しています。$("#username")$(this).val()

thisVal値がキャッシュされているので、代わりにを使用するのが最善です$(this).val()が、一般的にこれを修正する方法はcontext、要素にオプションを設定することです。

$.ajax({
    context: this,
    type: 'GET',
    // etc
});

ページでこのメソッドのドキュメントを参照できjQuery.ajax()ます (「コンテキスト」を検索してください)。

もう 1 つの方法はthis、要素を指している を別の変数に設定することです。

$("#username").keyup(function(){
    var that = this;

    $.ajax({
      type: "GET",
      url: "includes/phpscripts.php?action=checkUser",
      data: {username:thisVal},
      success: function(data){
          // use `that` and `$(that)` in here
      }    
    });

    return false;
});
于 2012-06-14T15:13:33.913 に答える
2

問題はこの行にあります

if ($(this).val().length < 5){

this#usernameその非同期コールバックの内部を参照しません。

使用する

if (thisVal.length < 5){

以前にキャッシュしたように。

于 2012-06-14T15:13:47.987 に答える