0

テキストフィールドの入力を郵便番号としてキャプチャし、データベースから関連データ（降雪と風速）を取得するために使用している小さなjQuery関数があります。

関数：

$(document).ready(function(){
    var zip = $('#id_zipcode');
    zip.change(function() {
      function updateEvnFactors(){
        var selected = zip.val();
        if (selected) {
            $.getJSON(get_zip_factors_url, {zipcode: selected}, function(env_data, jqXHR){
                $('#snow_fall').html(env_data[0].snow);
                $('#wind_speed').html(env_data[0].wind);
            });
        }
      }
      updateEvnFactors();
      $('#id_zipcode').keyup(updateEvnFactors);
   });
});

要素#id_zipcodeはテキスト入力です。これは初歩的な方法で機能しますが、html 要素#snow_fallと#wind_speedは、ユーザーが別のフォーム フィールドにタブ移動するか、入力の外側のどこかをクリックしたときにのみ更新され#zip_codeます。

ajax呼び出しから有効な値が返されるとすぐにhtml要素を更新するために何が欠けていますか(つまり、有効な郵便番号が渡されます)。

おまけの質問として、入力フィールドに 5 桁以上の数字がある場合にのみ ajax がアクティブになるように制限するにはどうすればよいですか?

どんな助けでも大歓迎です。

4

2 に答える 2

1

おまけの質問として、入力フィールドに 5 桁以上の数字がある場合にのみ ajax がアクティブになるように制限するにはどうすればよいですか?

if (selected.length >= 5)

主な質問については、onchangeイベントをサブスクライブしましたが、変更 + ぼかし (フォーカスを失う) でのみ発生します。これは仕様が言うことです。

次のように変更できます。

$('#id_zipcode').keyup(function() {
    var selected = this.value;
    if (selected.length >= 5) {
        $.getJSON(get_zip_factors_url, {
            zipcode: selected
        }, function(env_data, jqXHR) {
            $('#snow_fall').html(env_data[0].snow);
            $('#wind_speed').html(env_data[0].wind);
        });
    }
}).keyup();​
于 2012-11-08T18:29:22.383 に答える
0

onchangeフィールドがフォーカスを失った場合にのみ、イベントが発生すると思います。あなたのコードは次のようになるはずです：

$(document).ready(function() {
    $('#id_zipcode').keyup(function() {
        if ($(this).val().length >= 5) {
            $.getJSON(get_zip_factors_url, {zipcode: selected}, function(env_data, jqXHR) {
                $('#snow_fall').html(env_data[0].snow);
                $('#wind_speed').html(env_data[0].wind);
            });
        }
    });
});
于 2012-11-08T18:32:25.613 に答える