Bestätigungsmeldung neben einer einzelnen Tabellenzeile anzeigen

Question

Der Versuch, "Produkt hinzugefügt!" Nachricht rechts neben der Zeile, in der der Benutzer "Hinzufügen" ausgewählt hat. Die Art, wie ich es jetzt habe, ist:

was ändert die Schaltfläche "Hinzufügen" grün und verblasst es weg.

Ich habe auch versucht, ein neues Zeilenelement auf der rechten Seite der Spalte "Hinzufügen" zu erstellen und die Nachricht dort hinzuzufügen. Es funktioniert, aber bewegt sich die Schaltfläche "Hinzufügen" nach links während der Fading-Animation, nicht zu erwähnen, dass es dauerhaft den Rand der letzten Spalte beim Klicken entfernt, bis die Seite aktualisiert wird.

Hier ist meine Tabelle:

<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> 

Jede Hilfe wäre sehr geschätzt.

Answer 1

Ihr Code sieht gut aus, außer Sie müssen die Schaltfläche value, nicht Text aktualisieren. Sie können die val() Methode verwenden.

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

Auch ich sehe Sie doppelte ID-Werte für Ihre Schaltfläche in der Schleife. Ihre IDs sollten eindeutig sein. Eigentlich brauchst du für diesen Fall keine ID. Sie können Ihren Code mit unobutrusive Javascript wie diese

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

und hören Sie das Click-Ereignis dieser Art von Schaltfläche (Button mit addBtn CSS-Klasse) vereinfachen und Sie $(this) als Referenz von geklickt Taste verwenden können.

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

     }); 
}); 

EDIT: Wenn Sie auf die Schaltfläche Hinzufügen intakt halten wollen, wollen aber neben, dass eine Nachricht zeigen, können Sie dies tun.

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

Sie können nach Bedarf weitere CSS-Stile auf den Nachrichtenbereich anwenden.