在單個表格行旁邊顯示確認消息

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"); 
       } 
      }); 
     } 

它將'添加'按鈕變成綠色並將其淡化。

我也嘗試在'添加'列的右側創建一個新的行元素，並在那裏添加消息。它可以工作，但在淡入淡出的動畫期間將「添加」按鈕移動到左側，更不用說在點擊之前它會永久刪除最後一列的邊框，直到頁面刷新。

這裏是我的表：

<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這個案件。您可以簡化與unobutrusive的javascript代碼像這樣

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

和聽這類型的按鈕（按鈕，addBtn CSS類）的Click事件，你可以使用$(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"); 
        } 
      }); 

     }); 
}); 

編輯：如果你想保持Add按鈕完好，但要顯示旁邊的一個消息，你可以做到這一點。

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

您可以根據需要將其他CSS樣式應用於消息範圍。