2

我正在使用动态选择框，并且正在使用 JS/Jquery 更新每个选择框的值。由于我是从 MySQL 表中提取值，因此有时需要更长的时间来加载带有其值的选择框。我搜索的一种解决方案是使用 ajax 加载器。

如何放置一个 ajax 加载器（就在 updateSelectBox.js 中的 jQuery.getJSON 之前），以便在第一个选项卡上加载时无法单击任何内容，并在成功处理后将其删除（在同一文件中）？或任何更好的解决方案？这是一个示例

更新选择框.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

一种可供您考虑的替代方法：您的 MySQL 查询根本不应该花费很长时间。这些是非常简单的查找；如果它们需要很长时间，则可能缺少索引。在添加预加载逻辑之前，我会查看查询在后端需要多长时间，并尝试优化这些查询。

于 2012-07-27T19:49:29.763 回答