2011-04-18 4 views
0

현재 체크 박스가있는 표가 있습니다 - 체크 박스를 클릭하면 프로필이 업데이트되었다는 경고가 팝업됩니다. ajax circle 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); 
         } 
        } 
       }); 

답변

1

당신이 한 어려운 자신을 비트.

일반 개요를 제공 할 수 있습니다.

아약스 이미지가 포함 된 체크 박스와 div를 옆에 놓습니다. 처음에는 체크 박스가 표시되고 div를 숨 깁니다.

아약스 요청의 각 콜백 함수에서 체크 박스와 div를 적절히 표시하십시오. 더 나은 효과를 내기 위해 jQuery에 내장 된 fade/slide 메서드를 사용할 수도 있습니다.

이것이 이해가되지 않는다면 알려주십시오. 나는 약간의 코드를 쓸어 버릴 것이다.

편집 :이 같은

뭔가 다음에 마지막으로

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 

과 :

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

와 (체크 박스를 클릭 할 때 호출되는)를 CheckEnt() 함수 내에서

아약스 전화 성공 기능

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

이 모든 것을 테스트하지는 않았지만 제대로 작동합니다.

+0

몇 가지 코드를 쓸어 주실 수 있습니까? 감사 – rbur0425

관련 문제