Как реализовать динамическое обновление div на странице вместо обновления всей страницы?

Question

[symply_rabbit]

Добрый вечер!
пытаюсь динамически обновить корзину после добавления в нее товара. с помощью ajax написал добавление товара в корзину. добавляется, проблем нет, но вот при обновлении корзины (без перезагрузки страницы, чисто блока див, в который завернута корзина) возвращает этот div на страницу, но он без актуальных данных корзины, а чисто по нулям данные в корзине которая якобы "обновлена". если же нажать обновление всей страницы - то обновляется эта вся страница и видны актуальные данные корзины.

вот код

<script type="text/javascript">
	


$(document).on('click', '#buy<?=$arItem['ID']?>', function show(){


                $.ajax({  
                type: "POST",  
                url: "/include/add-cart.php", 
                data: ({id:<?=$arItem[ID]?>, count:$('#count<?=$arItem['ID']?>').val()}),  
    cache: false,  
    success: function(data){ 
                    $("#reload").html(data); 
   
    }  
}); 

});

 $(document).ready(function(){ 

            show(); 

            setInterval('show()',500); 

        }); 

</script>

где по клику на кнопку купить с id buy<?=$arItem['ID']?> происходит добавление товара в корзину через файл add-cart.php, в котором код добавления товара в корзину а также код области которая должна обновиться (код вызова корзины)

<div id="reload" class="top-block-item pull-right">
		 <?=CNext::ShowBasketWithCompareLink('', '', true, 'top-btn inner-table-block', true);?>
	</div>

Подскажите пожалуйста, в чем я ошибся?

Answer 1

[Exploding]

$(document).on('click', '#buy<?=$arItem['ID']?>', function show(){

Это я как понимаю вы штоле регите тучу обработчиков для каждого товара на странице или как?

Пишите так:

$(document).ready(function(){ 
		$(".buy-btn").on("click", function(){
		var product_id = $(this).data("id");
		var qty = $(".qty-"+product_id).val();
		$.ajax({  
			type: "POST",  
			url: "/include/add-cart.php", 
			data: ({id: product_id, count: qty}),  
			cache: false,  
			success: function(data){ 
				$("#reload").html(data); //вот этот элемент (#reload) УЖЕ должен быть на странице
				}  
			}); 
		});
	});

Поэтому в php нужно только (как я понимаю, это наверно выдает общую сумму корзины):

<?
   echo CNext::ShowBasketWithCompareLink('', '', true, 'top-btn inner-table-block', true);
?>

Ну и html-заготовка:

<input type="number" class="qty-<?=$arItem['ID']?>" min="1">
<div class="buy-btn" data-id="<?=$arItem['ID']?>">Купить</div>

Comments

[symply_rabbit]

Exploding, все работает, спасибо, да , чрез data-id так и нужно, я делал тучу обработчиков:(

[Exploding]

symply_rabbit, Ну там как бы не в туче дело было, ну да ладно, разберетесь))