更改複選框爲ajax圖像圈

Question

目前我有一堆複選框的網格 - 當點擊一個複選框時，它彈出一個警報，說您的配置文件已更新。我將如何改變這一點，而不是一個警報，只是複選框更改爲ajax圈gif？我意識到我可以用innerhtml將它推到div上，並將其設置爲文本提示，但我不知道如何刪除div。

代碼複選框：

<div id='dropdown<%= proId + entitlements[i].Id.ToString() %>'> 
           <%using (Ajax.BeginForm("UpdateProfileByProfileAdmin", new AjaxOptions { OnBegin = "function(){ ShowProgress(" + proId + entitlements[i].Id.ToString() + ");}", OnComplete = "function(){ HideProgress(" + proId + entitlements[i].Id.ToString() + ");}" })) 
           { 
            if (reqMode == "Edit") 
            {%> 
             <%=Html.CheckBox(proId + entitlements[i].Id.ToString(), profile.PresenceIndicators[i], new { onclick = "CheckEnt('" + proId.ToString() + "', '" + profid.ToString() + "','" + URLUpdateProfile.ToString() + "','" + entitlements[i].Id.ToString() + "','" + softwareId + "')", @class = "riskRank_dd" })%> 
            <%} 
            else 
            {%> 
             <%=Html.CheckBox(proId + entitlements[i].Id.ToString(), profile.PresenceIndicators[i], new {disabled = true})%> 
            <% }%> 
           <input type="submit" value="Go" class="hiddenSubmit" /> 

AJAX方法：

$.ajax({ 
        type: "Post", 
        url: URLUpdateProfile, 
        data: "processProfileId=" + processProfileId + "&enabled=" + value + "&entitlementId=" + entitlementId + "&softwareId=" +softwareId, 
        success: function(affectedRows) { 

         if (affectedRows == "\"0\"") { 
          alert('Unable to update. Please check'); 
          $('#' + id).attr('checked', !value); 
         } 
         else if (affectedRows == "\"-2\"") { 
         alert('Profile have no entitlements selected. Please check.'); 
          $('#' + id).attr('checked', !value); 

         } 
         else if (affectedRows == "\"1\"" || affectedRows == "\"2\"") { 
          alert('Profile is updated successfully.'); 
         } 
         else { 
         alert('The profile is duplicating with' +' '+ affectedRows+'.'+' '+'Please check.') 
         $('#' + id).attr('checked', !value); 
         } 
        } 
       }); 

Answer 1

你做得很艱難位自己。

我可以給你一個概述。

將一個複選框和包含ajax圖像的div放在一起。最初顯示覆選框，隱藏div。

在您的ajax請求的每個回調函數中，相應地顯示覆選框和div。您還可以使用jQuery的內置淡入淡出/幻燈片方法，以獲得更好的效果。

如果這沒有意義，請告訴我。我會寫一些代碼。

編輯：

是這樣的：

<div class="checkbox"><%: Html.CheckBoxFor .... %> </div> <div class="ajaxImage" style="display:none"><img src="the image" /> </div> 

和CheckEnt()函數內部（點擊複選框時被調用）：

var theDiv = $(this).parent("div"); //get the parent div which contains the checkbox 
theDiv.hide(); //you can also use .hide(400); to give a good slide out effect 
var theImg = theDiv.next(); //get the ajax image div next to it 
theImg.show(); 
$.ajax({ ... //make your ajax call now 

在

最後您的阿賈克斯電話的成功功能

theImg.hide(); 
theDiv.show(); //show the selected checkbox 

我沒有測試過這一切，但它應該工作。