如何使用ajax添加简单的jquery loader / spinner?
发布时间:2020-12-16 02:46:46 所属栏目:百科 来源:网络整理
导读:我只需要一点帮助就可以在我的表单中添加一个简单的加载器/微调器. 我的 jquery中有一个搜索表单.我想在搜索过程中包含一个加载器/微调器图像.完成该过程后,加载器将再次不可见. 这是我的代码,就像我使用CodeIgniter一样. 单击搜索按钮时,这是我的代码: //s
我只需要一点帮助就可以在我的表单中添加一个简单的加载器/微调器.
我的 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> 解决方法
你需要创建img标签并将你的图像添加为src,比如
var image = "<?php echo base_url(). 'resources/loading/loading43.gif'; ?>"; $('#loading').html("<img src='"+image+"' />"); .. 并成功回应, $('#loading').html("").hide(); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |