[英]Dynamic DIV does not refresh from AJAX success
I have a javascript function that calls a server for JSON and displays the returned data in HTML. 我有一个javascript函数,该函数调用JSON服务器并以HTML显示返回的数据。 I am then deleting a data item via AJAX and then trying to refresh the DIV in the success but this is not working. 然后,我将通过AJAX删除数据项,然后尝试成功刷新DIV,但这不起作用。 I also understand that others have encountered the same problem but I am using code that others have used to resolve but to no avail. 我也了解其他人也遇到了同样的问题,但是我使用的是其他人用来解决但无济于事的代码。 Can someone please help as this looks so trivial but I just can't get it to work, many thanks in advance for an advice on this bug! 有人可以帮忙,因为它看起来很琐碎,但我无法使它正常工作,非常感谢您对此错误的建议!
JAVASCRIPT - JAVASCRIPT-
function getCartData(data){
// console.log(data);
//console.log(JSON.stringify(data.token));
//loop through JSON returned items array
for (var i = 0; i < data.items.length; i++) {
var id = data.items[i].id;
var title = data.items[i].title;
var price = data.items[i].price;
var quantity = data.items[i].quantity;
var image = data.items[i].image;
var error = 'error_'+ data.items[i].id;
var remove = 'remove_'+ data.items[i].id;
//bind JSON object to HTML
$("#result").append("<div class='column left'><img src="+ image + "width=100 height=100 style=padding:20px></div><div class='column middle' >" + " " + title + " " + price + "</div><div class='column right' ><input id='" + id + "' type=number min=1 max=10 step=1 value=" + quantity + " maxlength=2 size=2 /> <br><a id='" + remove + "' class='remove' >Remove</a><div id='" + error + "' class='error'></div></div>");
//load subtotal when page loads
$('#subtotal').html(data.items_subtotal_price);
}}
//invoke server >> bind to DOM
var script = document.createElement('script');
script.src = 'https://example.com/cart.json?callback=getCartData'
document.getElementsByTagName('head')[0].appendChild(script);
HTML - HTML-
<div id="cart-container">
<div id="result"></div>
</div>
AJAX - AJAX-
$( ".remove" ).click(function() {
var self = this;
var remove_id = $(self).attr('id').replace('remove_', '');
$.ajax({
url: "https://example.com/cart/change.json",
dataType: "jsonp",
data: {
id: remove_id,
quantity : 0
},
success: function(data) {
console.log(data); //formatted JSON data
alert('Item removed');
//TO DO - RELOAD DIV WITHOUT LOADING PAGE
// location.reload();
$('#cart-container').load(document.URL + ' #cart-container');
}
});
});
You can recall the cart builder function in the success: 您可以成功调用购物车生成器功能:
success: function(data) {
console.log(data); //formatted JSON data
alert('Item removed');
getCartData(data);
}
Finally found a solution that works, I added another div that surrounded the data row - 终于找到了一个可行的解决方案,我在数据行周围添加了另一个div-
var row = 'row_'+ data.items[i].id; //declare variable then assign to new div row
<div id='" + row + "'>Content HTML...</div>
jQuery .remove() in AJAX success - AJAX成功中的jQuery .remove()-
$('#row_'+ remove_id).remove(); //remove the row
Thanks again to all the replies! 再次感谢所有答复!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.