Ajax加载器和链接选择框

问题描述：

我正在使用动态选择框，我使用JS/Jquery来更新每个选择框的值。由于我从MySQL表中提取值，有时需要花费一点时间才能将选择框加载其值。我搜索的一个解决方案是使用ajax加载器。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>

答

首先，您应该创建一个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]（http://webprolearner.ueuo.com/dropdown-menu/test1.php） – CodingWonders90 2012-07-30 07:52:13

我已经修复了我的答案。 – scessor 2012-07-30 07:54:53

我已经修复了我的答案！ – scessor 2012-07-30 08:01:46

答

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

Ajax加载器和链接选择框

相关推荐