阿贾克斯装载机和链接选择框 [英] Ajax Loader and chained select boxes
问题描述
我正与动态选择框，我使用JS / jQuery来更新每个选择框的值。因为我从MySQL表拉动值，有时需要一点时间与自己的价值观加载选择框。其中一个解决方案，我搜索是使用AJAX装载机。
我如何可以把一个ajax装载机（只是jQuery.getJSON在updateSelectBox.js之前），这样没有任何东西可以在加载第一个选项卡上，并成功处理后，将其删除（在同一个文件）被点击？或者没有更好的办法？下面是一个例
updateSelectBox.js
VAR formObject = {
运行：函数（OBJ）{
。obj.nextAll（'更新'）ATTR（{禁用：真实的，隐藏：真}）HTML（'＆LT;期权价值=＆GT; ----＆LT; /选项＆GT;'）。 ;
VAR ID = obj.attr（'身份证'）;
变种ν= obj.val（）;
jQuery.getJSON（MOD / postfile.php'，{ID：ID，值：V}，功能（数据）{
$（'更新'）removeClass移除（'最后'）。
如果（！data.error）{
obj.next（更新。）HTML（Data.List模块）.removeAttr（禁用隐藏）。
} 其他 {
。obj.addClass（'最后'）nextAll（'更新'）ATTR（{禁用：真实的，隐藏：真}）HTML（'＆LT;期权价值=＆GT; ---- ＆LT; /选项＆GT;'）;
}
}）;
}
};
$（函数（）{
$（'更新'）。住（'变化'，函数（）{
VAR海峡=;
$（选择选项：选择），每个（函数（）{。
STR + = $（本）的.text（）+;
}）;
$（＃postSelected）文本（STR）。
formObject.run（$（本））;
}）;
}）;
HTML
＆LT;选择名称=性别ID =性别类=更新大小=7＆GT;
＆LT;期权价值=＆GT;选择一个实施; /选项＆GT;
＆LT;（！空（$清单））？如果PHP {＆GT;
＆LT; PHP的foreach（$清单，$行）{＆GT？;
＆LT;期权价值=＆LT;？PHP的回声$行['身份证'];？＆GT;＆GT;
＆LT;？PHP的回声$行['CATEGORY_NAME']; ？＆GT;
＆LT; /选项＆GT;
＆LT; PHP}＆GT？;
＆LT; PHP}＆GT？;
＆LT; /选择＆GT;
＆LT;选择名称=类别ID =类级=升级已禁用=禁用隐藏=隐藏大小=7＆GT;
＆LT;期权价值=＆GT; ----＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;选择名称=颜色ID =颜色级=升级已禁用=禁用隐藏=隐藏大小=7＆GT;
＆LT;期权价值=＆GT; ----＆LT; /选项＆GT;
＆LT; /选择＆GT;
首先，你应该在这里一>），并将其保存在服务器上。就在之前的的getJSON 的的ajaxloader覆盖应显示（自定义图像源！）：
$（'＃标签）追加（'＆LT; DIV CLASS =叠加＆GT;＆LT; DIV CLASS =overlay_image＆GT;＆LT; IMG SRC =ajaxloader .gif注意ALT =ajaxloader＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;'）;
$（'＃标签.overlay）的CSS（行高，$（'＃标签）高度（）+'像素'）。
和在成功处理程序结束其删除：
$（'＃标签.overlay）删除（）。
您的 formObject 的应该是现在的：
VAR formObject = {
运行：函数（OBJ）{
。obj.nextAll（'更新'）ATTR（{禁用：真实的，隐藏：真}）HTML（'＆LT;期权价值=＆GT; ----＆LT; /选项＆GT;'）。 ;
VAR ID = obj.attr（'身份证'）;
变种ν= obj.val（）;
$（'＃标签）追加（'＆LT; DIV CLASS =叠加＆GT;＆LT; DIV CLASS =overlay_image＆GT;＆LT; IMG SRC =ajaxloader.gifALT =ajaxloader＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;'）;
$（'＃标签.overlay）的CSS（行高，$（'＃标签）高度（）+'像素'）。
jQuery.getJSON（MOD / postfile.php'，{ID：ID，值：V}，功能（数据）{
$（'更新'）removeClass移除（'最后'）。
如果（！data.error）{
obj.next（更新。）HTML（Data.List模块）.removeAttr（禁用隐藏）。
} 其他 {
。obj.addClass（'最后'）nextAll（'更新'）ATTR（{禁用：真实的，隐藏：真}）HTML（'＆LT;期权价值=＆GT; ---- ＆LT; /选项＆GT;'）;
}
$（'＃标签.overlay）删除（）。
}）;
}
};
以下附加样式表是必要的，看到覆盖：
#tabs {
位置：亲属;
}
。覆盖 {
位置：绝对的;
顶部：0;
左：0;
宽度：100％;
高度：100％;
的z-index：2000;
背景颜色：#EEEEEE;
不透明度：0.5;
}
.overlay＆GT; DIV {
位置：亲属;
文本对齐：中心;
}
.overlay＆GT; IMG {
垂直对齐：中间;
}
另请参见这个例子。
I am working with dynamic select boxes and I am using JS/Jquery to update the values of each select box. Since I am pulling the values from MySQL table, sometimes it takes a little longer to load the select boxes with its values. One Solution i search is the use of an ajax loader.
How can I place an ajax loader (just before the jQuery.getJSON in the updateSelectBox.js) so that nothing can be clicked while loading on the first tab and remove it after the success handling (in the same file)? or any better solutions? Here is an 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>
First you should create an ajax loader image (e.g. here) and save it on your server. Just before the getJSON the ajaxloader overlay should be shown (customize the image source!):
$('#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');
And remove it at the end of the success handler:
$('#tabs .overlay').remove();
Your formObject should be now:
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();
});
}
};
Following additional stylesheets are necessary to see the overlay:
#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;
}
Also see this example.
这篇关于阿贾克斯装载机和链接选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
