2012-02-10 15 views
1

私のコードでは、テキストボックスのfocusoutイベントにバインドされたAjax参照があります。指定されたデータが無効である場合、Ajaxリクエストはエラー・メッセージを表示します。また、フォーム上に「キャンセル」ボタンがあります。このボタンをクリックすると、リクエストのあるフィールドを含むいくつかのフィールドが非表示になります。ただし、テキストボックスに無効な値が指定されている場合は、CancelボタンをクリックするとAjaxリクエストが発生し(テキストボックスのフォーカスが失われるため)、エラーメッセージが表示されます。特定のボタンをクリックしたときにjQueryイベントを無視する方法はありますか?

キャンセルボタンをクリックすると、このAjaxイベントはで、は無効になります。したがって、ユーザーが無効なエントリを入力したとしても、エラーメッセージが表示されずにフォームが閉じます。

これは可能ですか?

コードは基本的には、このです:

$('#txtPostalCode').focusout(function() { 
    postalCodeLookup($(this).val()); // ajax method wrapper 
}); 

$('button#cancelButton').click(function() { 
    $('#txtPostalCode').attr('disabled', true).addClass('disabled'); // applies CSS style to make textbox look like a label 
    $('#txtPostalCode').val($('#oldPostalCode').val()); // restore old value 
}); 

私はそれが起動しますので、テキストボックスに無効なエントリがあるかどうクリックする前に、focusout火災以来、フォームを「取り消す」ことができません言ったようにajaxリクエストを送信し、エラーメッセージを表示します。この問題は、ユーザが無効な郵便番号を入力して間違いを認識してからフォームをキャンセルしようとすると、ユーザビリティの観点からですが、フォームは有効な郵便番号を入力するまでキャンセルされませんこれはフォームが実際にキャンセルするときにオーバーライドされます)。

だけでなく、これは私が要求を受け取ったときに心に浮かん最初のものだったことを聞いために私が何をしたいのか、私はすべてだを処理するためのより良い方法があれば:)

+2

あなたはいくつかのコードを投稿することができますか? –

答えて

0

これがかもしれほとんどハッキーではありませんが、キャンセルボタンでホバーをオン/オフする変数を設定します。次に、あなたのfocusoutコードにifブロックを置き、前述の変数がfalseの場合にのみ起動させます。

1

focusキャンセルボタンのclickイベントの前にイベントが発生するため、ajaxリクエストを中止する以外の操作はできません。 XHRabortメソッドを呼び出すと、現在の要求が異常終了します。

また、focusoutイベントでajaxリクエストをトリガーする前に少し時間がかかることがあります。キャンセルボタンをクリックするとタイムアウトをクリアします。

このようなものです。

$(function(){ 
    var xhr; 
    $('input').focusout(function(){ 
     xhr = $.ajax({ 
       ... 
       }); 
    }); 

    $('.cancel').click(function(){ 
     xhr.abort(); 
     //other stuff 
    }); 
}); 

それとも

$(function(){ 
    var timeoutId; 
    $('input').focusout(function(){ 
     timeoutId = setTimeout(function(){ 
      $.ajax({ 
       ... 
      }); 
     }); 
    }); 

    $('.cancel').click(function(){ 
     clearTimeout(timeoutId); 
     //other stuff 
    }); 
}); 
+0

オプション番号2は私には役に立ちました。ありがとうございます。 –

関連する問題