[英]Jquery ajax loading image/spinner
Im working on a code to create a spinner when a select event is trggered in a drop dropdown, to autofill the dropdowns below it, I have searched different methods on the net on this problem but can't seem to come to a solution, I thinks its the way I structured my Script. 我正在编写代码以在下拉列表中触发选择事件时创建微调框,以自动填充其下方的下拉列表,我在网上搜索了有关此问题的其他方法,但似乎无法解决,我认为这是我编写脚本的方式。 I have multiple codes in my script to run different kinds of functions.
我的脚本中有多个代码可以运行各种功能。 Here is my code below first dropdown which triggers the rest of the dropdowns is 1 and I have binded the last 3 to it.
这是我的第一个下拉列表下面的代码,该代码触发其余的下拉列表为1,并且我将最后三个下拉列表绑定到该下拉列表。 already have my spinner from ajax.info.
已经从ajax.info获得了我的微调器。 I just want to know how I can implement it, using the ajax.start/hide or show methods.
我只想知道如何使用ajax.start / hide或show方法实现它。
phtml code phtml代码
<script type="text/javascript">
$( document ).ready(function() {
$( "#search" ).autocomplete({
source: function(request, response)
{
$.ajax({url: '<?php echo $this->baseURL()?>/../../../../' + request.term,
dataType: 'json',
success: function(data)
{
response(data);
}
})
},
select: function(event, ui)
{
.
ajaxautofill(ui.item.id);
}
,
minLength:2});
$("#1").bind('change', function () {
ajax2();
ajax3();
ajax4();
});
$('#add').click(function(){
$.ajax({
url:'<?php echo $this->baseURL()?>/../..',
type:'post',
dataType: "json",
data:{ '1':$('#1').val(),
'4':$('#4').val(),
'2':$('#2').val(),
'3':$('#3').val()},
success:function(data){
var row = '<tr><td>' + data["1"] + '</td><td>'
+ data["4"] + '</td><td>'
+ data["2"] + '</td><td>'
+ data["siccode"] + '</td>';
$('#t2').append(row);
//alert();
}
});
});
});
/*************************************1 Change*************************************************/
function ajax4() {
$.ajax({
type: "POST",
url: '<?php echo $this->baseURL()?>/../../.../1/' + encodeURIComponent($('#1').val()),
success: function(newElement) {
// Insert new element before the Add button
$("#4-label").remove();
$("#4").parent().remove();
$("#2-label").before(newElement);
//$("#1").after(newElement);
}
});
}
function ajax2() {
$.ajax({
type: "POST",
url: '<?php echo $this->baseURL()?>/../../2/1/' + encodeURIComponent($('#1').val()),
success: function(newElement) {
// Insert new element before the Add button
$("#2-label").remove();
$("#2").parent().remove();
$("#3-label").before(newElement);
//$("#1").after(newElement);
}
});
}
function ajax3() {
$.ajax({
type: "POST",
url: '<?php echo $this->baseURL()?>/../../../1/' + encodeURIComponent($('#1').val()),
success: function(newElement) {
// Insert new element before the Add button
$("#3-label").remove();
$("#3").parent().remove();
$("#2-label").after(newElement);
//$("#1").after(newElement);
}
});
}
/********************************************Autocomplete Search Select ****************************************/
function ajaxautofill(id) {
$.ajax({
type: 'POST',
datatype: 'JSON',
url: '<?php echo $this->baseURL()?>/../../../../' + id,
select: function(event, ui){
//$("#1-label").remove();
//$("#1").remove();
//data: '1':$('#1').val(),
//dataType: 'JSON',
//async: true,
// + encodeURIComponent($('#1').val()),
/*success: function(id) {
// Insert new element before the Add button
//$("#1").remove();
$("#1-label").remove();
//$("#1-label").before();
//$("#search-label").after(newElement);
}*/ }
});
}
</script>
Thanks in Advance 提前致谢
看看这个插件,可能是您尝试实现的插件https://code.google.com/p/jquery-loadmask/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.