0
我有一個HTML頁面，其上有不同的部分（通過DIV標籤完成）。 這些部分是使用ajax調用創建/更新的。其中一個div實際上是一個進度指示器 - 它只是顯示一個圖像，告訴用戶我正在後臺處理他們的請求。jquery：進度指示器無法正常顯示/隱藏AJAX調用
我的問題是，即使每個點擊事件處理程序中的前幾行代碼都有代碼顯示此部分，但在請求時並不總是顯示此進度指示符。 （然後在每個按鈕結束點擊我隱藏的div）
這裏是我的代碼基本骨架：
<div class="row-fluid">
<div class="span12">
<h2>Title for Page></h2>
<table class="table table-bordered table-striped" id="assignedRecords">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
<th>Voice</th>
<th>Jumbo</th>
<th>Mode</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php foreach ($databaserecords as $record): ?>
<tr>
... code to create initial table
<td><button class='btn deleteBtn'>Delete</button></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<div id="progress-indicator">
<img src="<?php echo base_url();?>assets/img/wip.gif"> Retrieving records...</img>
</div>
<button class="btn" id="getlist">Get List of Available Objects</button>
</div>
<div class="span12" id="availableObjectsAjaxContainer"></div>
<!--this is updated via ajax when the user clicks on the modify button. -->
</div>
<script>
$(document).ready(function(){
//hide the please wait div by default.
$('#progress-indicator').hide();
$('#getlist').live('click', function() {
$('#progress-indicator').html("<img src='" + BASEPATH + "assets/img/wip.gif' /> Retrieving...</img>");
$('#progress-indicator').fadeIn();
.
// updates availableObjectsAjaxContainer section
.
.
$('#deleteRecord').live('click', function() {
$('#progress-indicator').html("<img src='" + BASEPATH + "assets/img/wip.gif' /> deleting record...</img>");
$('#progress-indicator').fadeIn();
.
.
// updates assignedRecords table section
.
當點擊「的GetList」按鈕，它顯示。但是，當單擊「deleteRecord」按鈕時，它不會顯示。 我確保我的ajax調用不會意外地「消滅」具有進度指示器的div。我的ajax調用只更新「assignedRecords」表部分...和「availableObjectsAjaxContainer」部分。
你能告訴我我要去哪裏嗎？
謝謝。
編輯1
這裏的deleteRecord點擊事件處理函數的完全成熟的版本看起來是這樣的：
$('.deleteBtn').live('click', function() {
$('#progress-indicator').html("<img src='" + BASEPATH + "assets/img/wip.gif' /> deleting vlan...</img>");
$('#progress-indicator').fadeIn();
//get a count of all records. only allowed to delete if you have more than one record.
var reccount = $('#assignedRecords tbody tr').length;
if (reccount > 1)
{
var userSelectionId = $(this).parent().siblings('.id').text();
var modeDelete = $(this).parent().siblings('.mode').text();
var fullpath = BASEPATH + 'index.php/switches/delete/' + userSelectionId + '/' + modeDelete;
console.log(fullpath);
$.ajax({
url:fullpath,
type:'POST',
dataType:'json',
success: function(returnDataFromController) {
console.log(returnDataFromController);
//build table contents
var htmlstring = '<thead>';
htmlstring = htmlstring + '<tr>';
htmlstring = htmlstring + '<th>Id</th>';
htmlstring = htmlstring + '<th>Name</th>';
htmlstring = htmlstring + '<th>Status</th>';
htmlstring = htmlstring + '<th>Voice</th>';
htmlstring = htmlstring + '<th>Jumbo</th>';
htmlstring = htmlstring + '<th>Mode</th>';
htmlstring = htmlstring + '<th> </th>';
htmlstring = htmlstring + '</tr>';
htmlstring = htmlstring + '</thead>';
htmlstring = htmlstring + '<tbody>';
//loop through results from ajax call and build table.
for(i = 0; i < returnDataFromController.length; i++) {
//alert(returnDataFromController[i].Id);
htmlstring = htmlstring + "<tr>"
htmlstring = htmlstring + "<td class ='recordid'>" + returnDataFromController[i].Id + "</td>";
htmlstring = htmlstring + "<td>" + returnDataFromController[i].Name + "</td>";
htmlstring = htmlstring + "<td>" + returnDataFromController[i].Status + "</td>";
htmlstring = htmlstring + "<td>" + returnDataFromController[i].Voice +"</td>";
htmlstring = htmlstring + "<td>" + returnDataFromController[i].Jumbo + "</td>";
htmlstring = htmlstring + "<td class='mode'>" + returnDataFromController[i].Mode +"</td>";
htmlstring = htmlstring + "<td><button class='btn deleteBtn'>Delete</button></td>";
htmlstring = htmlstring + "</tr>";
}//end loop
htmlstring = htmlstring + "</tbody>";
htmlstring = htmlstring + "</table>";
$('#assignedRecords').html(htmlstring);
}//end success ajax call
});//end ajax.
}
else
{
alert("Must have at least one record!");
}
$('#progress-indicator').hide();
}); //end click event
編輯2：
$('#getList').click(function() {
$(this).attr("disabled","disabled");
$('#progress-indicator').html("<img src='" + BASEPATH + "assets/img/wip.gif' /> Retrieving ...</img>");
$('#progress-indicator').fadeIn();
$.ajax({
url:"<?php echo site_url('switches/showavailrecs/'.$ip.'/'.$hardwaremodel);?>",
type:'POST',
dataType:'json',
success: function(returnDataFromController) {
var htmlstring;
htmlstring = htmlstring + "<th>Id</th><th>Name</th>";
//loop through results
for(i = 0; i < returnDataFromController.length; i++) {
//alert(returnDataFromController[i].Id);
htmlstring = htmlstring + "<tr><td><a href=>"+returnDataFromController[i].Id+"</a></td><td>"+ returnDataFromController[i].Name+"</td></tr>";
}
$('#availableObjectsAjaxContainer').html(htmlstring);
$('#progress-indicator').hide();
}//end success
}); //end ajax call
$(this).removeAttr("disabled");
});
編輯3 ：
我想我想通了 - 雖然我不知道它爲什麼這樣做。
我已經把我所有的.hide命令移到了我的ajax調用的成功部分內......現在......他們似乎在工作。 任何人都可以解釋爲什麼會這樣嗎？
你可以展示如何在你調用'click'函數時隱藏進度指示器嗎？ – jeroen
嘿。我已經更新了我的文章，以包含您要求的內容。請查看刪除按鈕的單擊事件中的最後一行。退房編輯1 – dot
你可以看到（使用Firebug或其他），如果元素仍然存在，如果它是可見的（也許在其他東西背後）或隱藏？你的'＃getList'點擊函數也會有用。從我目前看到的情況來看，這應該起作用。 – jeroen