我只是需要一点帮助在这里添加一个简单的加载器/微调在我的形式。我在jquery中有一个搜索表单。我想包括一个加载器/微调图像,而搜索过程中。在该过程完成之后,加载器将不再可见。
这是我的代码,顺便说一下,我使用CodeIgniter。
下面是单击搜索按钮时的代码:
//search
$('#search-btn').on('click',function(){
var query = $("#keyword").val();
var image = "<?php echo base_url()."/resources/loading/loading43.gif"; ?>";
$('#loading').html(' + image + ');
var query_url = "<?php echo site_url('item_controller/searchItem'); ?>";
$.ajax({
type:'POST',
url: query_url,
data:{query: $("#keyword").val()},
dataType:'json',
async: false,
success:function(d){
//$('.display').dataTable().fnDestroy( true );
$("#example tbody").html(""); //HERE'S MY PROBLEM, DOESN'T DISPLAY LOADER WHEN SEARCHING
for(i in d){
$("#example tbody").append("<tr><td style='text-align: center; color:' data-code='TRUE'>" + d[i]['item_code'] + "</td><td style='text-align: left' data-name='TRUE'>" + d[i]['item_name'] + "</td><td><div style='text-align: center'><input type='button' value='ADD' class='k-button' id='" + d[i]['item_code'] + "' data-item=TRUE /></div></td></tr>");
}
//$("#search_result").show('blind');
$("[data-item]").on('click',function(){
var code = $(this).parents('tr').find('[data-code]').html();
var name = $(this).parents('tr').find('[data-name]').html();
// console.log(code,name);
$("#grid1 tbody").append("<tr><td style='text-align: center; width: 20%'><input type='text' value=" + code + " readonly style='width:50px; background-color: transparent; border-style: none' id=code" + counter_code++ +" /></td><td style='text-align: center; width: 40%'><input type='text' style='width: 90%; background-color: transparent; border-style: none' value='" + name + "' id=item"+ counter_item++ +" readonly /></td><td style='text-align: center'><input type='text' name='qty[]' id=qty"+ counter_qty++ +" style='text-align: center; width: 50px;' /></td><td style='text-align: center'><div align='center'><select style='width:100px; display: block' name='unit[]' id=unit"+ counter_unit++ +" ><option value=''>----</option><option value='pc/pcs'>PC/PCS</option><option value='BOX/BOXES'>BOX/BOXES</option></select></div></td><td style='text-align: center'><input type='text' name='price[]' id=price"+ counter_price++ +" style='text-align: right; width: 100px;' onblur='' /></td><td style='text-align: center'><input type='text' name='total[]' id=total"+ counter_total++ +" style='font-family: courier; text-align: right; background-color: lightgray; color: red; width: 100px;' readonly='readonly' value='' /></td></tr>");
ComputeTotal();
});
$('.display').dataTable({
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"bDestroy": true,
"bJQueryUI": false,
"bRetrieve": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"destroy": true
});
//$('.display').dataTable().fnDestroy(true);
//$('.display').children().remove()
},
});
});
字符串
这是搜索表单
<div id="loading"></div>
<div id="search_result" class="k-content">
<div class="k-header" id="item-view-list" align="center">
<table border="0" style="width: 80%; align: left" cellpadding="10" cellspacing="10" align="left">
<tr>
<td colspan="3">
<h5>SEARCH ITEM</h5>
</td>
</tr>
<tr>
<td style="width: 3%">
<label>Name/Description</label>
</td>
<td style="width: 40%">
<input type="text" name="keyword" id="keyword" style="width: 80%" /> <input type="button" value="SEARCH" id="search-btn" class="k-button" style="font-size: 12px" />
</td>
</tr>
</table>
<hr />
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="font-size:small; width: 100%">
<thead>
<tr>
</tr>
<tr>
<th>CODE</th>
<th>NAME/DESCRIPTION</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br />
</div>
</div>
型
5条答案
按热度按时间0tdrvxhp1#
你也可以
HTML
字符串
CSS
型
在你
js
在
ajax
调用as之前,型
798qvoo82#
试试这个代码。
字符串
请参阅此链接以获取更多详细信息。Ajax Events
pgccezyw3#
您需要创建
img
标记并添加您的image
作为其src
,如字符串
并且在成功响应时,
型
64jmpszr4#
你甚至可以把它做得太简单,比如
1.
ajax
*启动前, 显示loader gif图片 *。1.
ajax
返回响应后, 隐藏loader gif图片 。1)考虑到您有一个
img
标记(例如:className beloader
**)放置在你需要的加载器所在的区域(默认情况下为display: none
这个图片)。要生成加载器gif,请尝试此ajaxloader在线工具。
字符串
w8ntj3qf5#
HTML
字符串
脚本
如果要在多个地方使用
beforeSend
和complete
本地事件,可以使用ajaxSend
和ajaxComplete
全局事件。本地事件
很直接。
型
全局事件
型
您可以通过将其设置为
false
来禁用特定 AJAX 的全局evet。如果您在本地进行检查,则可以在浏览器中使用这些设置,以便在加载页面时查看您的文本/图像。
x1c 0d1x的数据