단일 테이블 행 옆에 확인 메시지 표시

Question

"추가 된 제품!" 사용자가 '추가'를 선택한 행의 오른쪽에있는 메시지 지금 가지고있는 방법은 다음과 같습니다.

var addToCart = function (idFromButton) { 

      $.ajax({ 
       type: "POST", 
       data: { prodID: idFromButton }, 
       url: '@Url.Action("Add", "ShoppingCart")', 
       success: function (data) 
       { 
        $('#BadgeIcon').html(data).fadeOut(1).fadeIn('fast'); 

        $('.fakeLink-' + idFromButton).text("Product Added!").css("color", "green").fadeIn(600).fadeOut("slow"); 
       } 
      }); 
     } 

'추가'버튼이 녹색으로 바뀌고 사라집니다.

나는 또한 'Add'열의 오른쪽에 새 행 요소를 만들고 거기에 메시지를 추가하려고 시도했습니다. 그것은 작동하지만 페이딩 애니메이션 동안 'Add'버튼을 왼쪽으로 이동합니다. 페이지가 새로 고침 될 때까지 마지막 열의 경계를 영구히 제거합니다. 어떤 도움을 크게 감상 할 수

<table class="table" id="table"> 
     <tr> 
      <th> 
       Product Name 
      </th> 
      <th> 
       Price 
      </th> 
      <th> 
       Image 
      </th> 
      <th> 
       Add to Cart 
      </th> 
     </tr> 

     @if (Model.Results.Any()) 
     { 
      foreach (var item in Model.Results) 
      { 
       <tr> 
        <td> 
         @Html.DisplayFor(modelItem => item.Name) 
        </td> 
        <td> 
         @item.Price.ToString("$0.00") 
        </td> 
        <td> 
         @if (item.ImageFile != null) 
         { 
          <img src="@Url.Content(item.ImageFile)" /> 
         } 
        </td> 
        <td> 
         <input id="fakeLink" class="fakeLink-@item.ProductID" type="submit" value="Add" onclick="addToCart(@item.ProductID)" /> 
        </td> 

       </tr> 
      } 
     } 
     else 
     { 
      <tr> 
       <td colspan="4">No product found.</td> 
      </tr> 
     } 

    </table> 

:

여기 내 테이블입니다.

Answer 1

텍스트가 아닌 버튼 value을 업데이트해야하는 경우를 제외하고는 코드가 정상적으로 보입니다. val() 방법을 사용할 수 있습니다.

$('.fakeLink-' + idFromButton).val("Product Added!") 
             .css("color", "green").fadeIn(600).fadeOut("slow"); 

또한 루프 내에서 단추의 ID 값이 중복 된 것을 확인할 수 있습니다. 이드는 유일해야합니다. 실제로이 경우에는 ID가 필요하지 않습니다. 이

<td> 
     <input class="addBtn" data-product="@item.ProductID" type="submit" value="Add" /> 
</td> 

처럼 unobutrusive 자바 스크립트와 코드를 단순화하고 (addBtn CSS의 클래스 버튼) 버튼이 유형의 클릭 이벤트를 수신하면 클릭 버튼의 참고 자료로 $(this)을 사용할 수 있습니다.

$(function() { 

     $(".addBtn").click(function(e) { 
      e.preventDefault(); 
      var _this = $(this); 
      $.ajax({ 
        type: "POST", 
        data: { prodID: _this.data("product") }, 
        url: '@Url.Action("Add", "ShoppingCart")', 
        success: function (data) { 
        _this.val("Product Added!").css("color", "green").fadeIn(600) 
                    .fadeOut("slow"); 
        } 
      }); 

     }); 
}); 

편집 : 당신이 그대로 추가 버튼을 유지하지만 그 옆에 메시지를 표시 할 경우, 당신은이 작업을 수행 할 수 있습니다.

success: function (data) { 
     var msg = $("<span />").html("Product added").css("display","none");    
     msg.appendTo(_this.parent()).fadeIn(500).fadeOut("slow"); 
} 

메시지 스팬에 필요에 따라 추가 CSS 스타일을 적용 할 수 있습니다.