Ajax 加载器和链式选择框答案

【问题标题】：Ajax Loader and chained select boxesAjax 加载器和链式选择框
【发布时间】：2012-07-27 19:26:56
【问题描述】：

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

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

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>

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

首先，您应该创建一个 ajax 加载器图像（例如 here）并将其保存在您的服务器上。就在 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;
}

另见this example。

【讨论】：

嘿，我的朋友！谢谢。我尝试了您的代码，似乎可以正常工作，但它会导致选项卡出现一些 css 问题。检查LINK
是的！完美我的朋友！谢谢！
我正在处理一个新问题。如果您想在这里获得更多积分，请点击：QUESTION

【解决方案2】：

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

【讨论】：