2

私は動的選択ボックスを使用しており、JS/Jquery を使用して各選択ボックスの値を更新しています。MySQL テーブルから値を取得しているため、選択ボックスにその値をロードするのに少し時間がかかることがあります。私が検索する1つの解決策は、ajaxローダーの使用です。

ajax ローダー (updateSelectBox.js の jQuery.getJSON の直前) を配置して、最初のタブでの読み込み中に何もクリックできず、(同じファイル内で) 処理が成功した後にそれを削除するにはどうすればよいですか? またはより良い解決策はありますか？ここに例があります

updateSelectBox.js

var formObject = {
    run : function(obj) {

            obj.nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
            var id = obj.attr('id');
            var v = obj.val();
            jQuery.getJSON('mod/postfile.php', { id : id, value : v }, function(data) {
            $('.update').removeClass('last');
                if (!data.error) {
                    obj.next('.update').html(data.list).removeAttr('disabled hidden');
                } else {
                 obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
                }
            });
        }   
}; 

$(function(){

    $('.update').live('change', function() {
        var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("#postSelected").text(str);

        formObject.run($(this));
    });

});

HTML

<select name="gender" id="gender" class="update" size="7"> 
  <option value="">Select one</option> 
    <?php if (!empty($list)) { ?> 
    <?php foreach($list as $row) { ?> 
       <option value="<?php echo $row['id']; ?>"> 
        <?php echo $row['category_name']; ?> 
       </option> 
    <?php } ?> 
    <?php } ?> 
</select> 

<select name="category" id="category" class="update" disabled="disabled" hidden="hidden" size="7"> 
  <option value="">----</option> 
</select> 

<select name="colour" id="colour" class="update" disabled="disabled" hidden="hidden" size="7"> 
  <option value="">----</option> 
</select>
4

2 に答える 2

3

最初に ajax ローダー イメージ (例:ここ) を作成し、サーバーに保存する必要があります。getJSONの直前にajaxloader オーバーレイを表示する必要があります (画像ソースをカスタマイズしてください!)。

$('#tabs').append('<div class="overlay"><div class="overlay_image"><img src="ajaxloader.gif" alt="ajaxloader"></div></div>');
$('#tabs .overlay').css("line-height", $('#tabs').height()+'px');

そして、成功ハンドラの最後でそれを削除します:

$('#tabs .overlay').remove();

formObjectは次のようになります。

var formObject = {
    run : function(obj) {
        obj.nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
        var id = obj.attr('id');
        var v = obj.val();
        $('#tabs').append('<div class="overlay"><div class="overlay_image"><img src="ajaxloader.gif" alt="ajaxloader"></div></div>');
        $('#tabs .overlay').css("line-height", $('#tabs').height()+'px');
        jQuery.getJSON('mod/postfile.php', { id : id, value : v }, function(data) {
        $('.update').removeClass('last');
            if (!data.error) {
                obj.next('.update').html(data.list).removeAttr('disabled hidden');
            } else {
             obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
            }
            $('#tabs .overlay').remove();
        });
    }   
};

オーバーレイを表示するには、次の追加のスタイルシートが必要です。

#tabs {
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: #EEEEEE;
    opacity: 0.5;
}

.overlay > div {
    position: relative;
    text-align: center;
}

.overlay > img {
    vertical-align: middle;
}

この例も参照してください。

于 2012-07-30T07:01:28.520 に答える
0

考慮すべき代替アプローチの 1 つは、MySQL クエリにそれほど時間がかからないようにすることです。これらは本当に単純なルックアップです。時間がかかる場合は、インデックスが欠落している可能性があります。プリロード ロジックを追加する前に、バックエンドでクエリにかかる時間を確認し、それらのクエリを最適化しようとしました。

于 2012-07-27T19:49:29.763 に答える