TextBox 값 변경 및 Ajax 호출 업데이트

Question

장바구니 관리에 걸린 전자 상거래 사이트에서 작업하고 있습니다. 기본적으로 로그인하기 전에 제품을 세션에 보관하고 Ajax를 사용하여 세션에 저장된 제품 수량을 업데이트하려고합니다. 나는 '수량 변경'을 쓸 때마다 변경된 값이 '수량'열에 반영되어야 함을 의미합니다.

참고 : 나는 게시물을 짧게 만들고 디버깅하는 동안 왜 발사하지 않았는지 알아 냈습니다. 실제로 관련 제품의 ID를 알 수 없었습니다. 이제는 이드를 지나친 다. 그게 전부 야. 이제 또 다른 문제가 있습니다 - TextBox는 for 루프로 동적으로 생성됩니다. 나는 텍스트 상자가 동적으로 생성하는 방법을 알아 내기 위해 개발자 도구를 사용하고이 같은 것입니다 : 나는 동적으로 생성 된 텍스트 상자에서 양 또는 값을 잡아하는 방법을 궁금

For Product 1: cartDetails_0__Quantity 
For Product 2: cartDetails_1__Quantity 

. 생성 된 id를 HTML에서 Ajax로 직접 저장하면 수량이 업데이트된다. 그렇지 않으면 그렇지 않습니다. Ajax에서 루프를 사용하려고 시도했지만 생각이 잘못되었습니다. 보기을 참조하십시오.

뷰 : 여기

<table border="1" width="100%" cellpadding="4"> 
    <thead> 
     <tr> 
      <th style="text-align:center;">Name</th> 
      <th style="text-align:center;">Price</th> 
      <th style="text-align:center;">Quantity</th> 
      <th style="text-align:center;">Quantity To Change</th> 
     </tr> 
    </thead> 
    <tbody> 
     @if (ViewBag.CartDetails != null) 
     { 
      for (int i = 0; i < cartDetails.Count(); i++) 
      { 
       <tr> 
        <td style="text-align: center; display:none;">@Html.DisplayFor(model => cartDetails[i].ProductId)</td> 
        <td id="ID" style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].ProductName)</td> 
        <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].Price)</td> 
        <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].Quantity, new { @class = "quantityUpdate" })</td> 
        <td style="text-align: center;">@Html.TextBoxFor(model => cartDetails[i].Quantity, new { @class = "quantity", data_id = cartDetails[i].ProductId })</td> 
      </tr> 
      } 
     } 
    </tbody> 
</table> 

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
var url = '@Url.Action("UpdateCart")'; 
$(".quantityUpdate").change(function() { 
    var id = $(this).data('id'); 

    var i = 0; 
    $('.quantityUpdate').each(function (i, item) { 
     $.post(url, { id: id, Quantity: $("#cartDetails_"+i+"__Quantity").val() }, function (response) { 
      if (response) { 
       $("#TotalPrice").load(window.location + " #TotalPrice"); 
      } 
     }); 
    }) 

    alert(id); 
    alert($("#cartDetails_"+i+"__Quantity").val()); 
}); 

내가 노력하고 이미지 샘플입니다 :

Answer 1

아이디어는 당신이 .quality 텍스트 상자의 값을 변경할 때 아약스를 호출하는 경우 다음과 같이하십시오.

$('.quantity').change(function(){ 
    //your ajax call 
}); 

Answer 2

,210

즉시 변경

$('.quantity').keyup(function(){ 
     $('.quantityUpdate').val($('.quantity').val()); 
     // put code here 
    });