javascript - Do we Need to refresh the page to display the proper information after AJAX call? -
after clicked on remove cart, javascript deleting product cart table in database seems not refresh view on screen. read somewhere when using ajax need control page refresh after coming back. case ? code missing refresh page here ?
thanks sharing input.
here output looks after remove cart has been clicked:
details of cart: checkout >> ----------- tv hd toshiba has been removed shopping cart. product price(unit) quantity tv hd toshiba 944.99 1 remove cart <== line should remove ? -------------- ---------------- <== line should remove ? total 0 <== line should remove this want wanted should return
details of cart: checkout >> ----------- tv hd toshiba has been removed shopping cart. product price(unit) quantity total 0 index.cshtml
@model tp1webstore3.viewmodels.shoppingcartviewmodel @{ viewbag.title = "shopping cart"; } <script src="/scripts/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('.removelink').click(function () { $.ajax({ url: '/panier/removefromcart', data: { id: $(this).data('id') }, type: 'post', cache: false, success: function (result) { $('#row-' + result.deleteid).fadeout('slow'); $('#cart-status').text('cart (' + result.cartcount + ')'); $('#update-message').text(result.message); $('#cart-total').text(result.carttotal); }, error: function(xmlhttprequest, textstatus, errorthrown) { alert("status: " + textstatus); alert("error: " + errorthrown); }); return false; }); }); </script> <h3> <em>details</em> du panier: </h3> <p class="button"> @html.actionlink("checkout >>", "addressandpayment", "checkout") </p> <div id="update-message"> </div> <table> <tr> <th> produit </th> <th> prix (unitaire) </th> <th> quantite </th> <th></th> </tr> @foreach (var item in model.cartitems) { <tr id="row-@item.produitid"> <td> @html.actionlink(item.produit.description,"details", "produit", new { id = item.produitid }, null) </td> <td> @item.produit.prix </td> <td id="item-count-@item.panierid"> @item.quantite </td> <td> <a href="#" class="removelink" data-id="@item.panierid"> enlever du panier </a> </td> </tr> } <tr> <td> total </td> <td></td> <td></td> <td id="cart-total"> @model.carttotal </td> </tr> </table> here google pf12 network removefromcart. means javascript ran think. preview
{message:tv hd toshiba glove has been removed shopping cart., carttotal:0, cartcount:0,..} cartcount: 0 carttotal: 0 deleteid: 31 itemcount: 0 message: "tv hd toshiba has been removed shopping cart." response
{"message":"tv hd toshiba has been removed shopping cart.","carttotal":0,"cartcount":0,"itemcount":0,"deleteid":31}
move logic rendering table partial razor view call using following html helper. @html.partial("carttable").
update success ajax handler make ajax call server retrieve partial view , update dom results.
@model tp1webstore3.viewmodels.shoppingcartviewmodel @{ viewbag.title = "shopping cart"; } <script src="/scripts/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('.removelink').click(function () { $.ajax({ url: '/panier/removefromcart', data: { id: $(this).data('id') }, type: 'post', cache: false, success: function (result) { $('#row-' + result.deleteid).fadeout('slow'); $('#cart-status').text('cart (' + result.cartcount + ')'); $('#update-message').text(result.message); $('#cart-total').text(result.carttotal); $.get("url").done( function(data){ $("#contenttable).html(data); } ); }, error: function(xmlhttprequest, textstatus, errorthrown) { alert("status: " + textstatus); alert("error: " + errorthrown); }); return false; }); }); </script> <h3> <em>details</em> du panier: </h3> <p class="button"> @html.actionlink("checkout >>", "addressandpayment", "checkout") </p> <div id="update-message"> </div> <div id="table-content"> @html.partial("tablecontent") </div>
Comments
Post a Comment