web-dev-qa-db-ja.com

手動でトリガーAJAXカスタムJavaScriptから

ユーザーが英国の郵便番号を入力し、テキストフィールドが選択リストに置き換えられるフォームを開発中です。これはすべて、ぼかしイベントを使用すると非常にうまく機能しますが、フィールドが変更されたことは必ずしも明らかではありません。

代わりにkeyupイベントを使用したいのですが、AJAXが引き続き発生するため、キーが押されるたびに少し遅延があります。フィールドにバインドされている既存の関数があります。

_$('#edit-postcode').bind('input', function(){
  $(this).val(function(_, v){
    return v.replace(/\s+/g, '').toUpperCase();
  });
});
_

私はすでに単純な正規表現/(^[A-Z]{1,2}[0-9]{1,2})\s?([0-9][A-Z]{2}$)/iを持っているので、それが広く正しい形式であることを確認します。検証を前の関数に追加し、文字列が検証に合格した場合、既存のAJAX機能をトリガーします。

N.B.デフォルトのDrupalオートコンプリート機能は、郵便番号に関連するIDを非表示にできないことを除けばほぼ完全に機能します。そのため、代わりにこのメソッドを使用しました。

8javascriptajax
1
Colin Shipton

実際には、カスタムjQueryイベントを使用することで、私がpostcodeValidで呼び出した場合は、思ったよりもはるかに簡単です。

'#ajax' => [
  'callback' => [$this, 'checkPostcode'],
  'event' => 'postcodeValid',
  'wrapper' => 'postcode-container',
],

私はすでにしなければならなかったJavaScript関数を変更しました：

$('#edit-postcode').bind('input', function() {
  var trigger = $(this);
  $(this).val(function(_, v) {
    if (isValidPostcode(v)) {
      trigger.triggerHandler('postcodeValid');
    }
    return v.replace(/\s+/g, '').toUpperCase();
  });
});

isValidPostcode関数は、郵便番号の正規表現に対する単純なテストです。おかげで 入力を許可するためにテキストフィールドでajax呼び出しを遅らせる これを発見することができました。

2
Colin Shipton