Обновить содержимое div после ссылки на ссылку

Question

Prestashop v1.6 default-bootstrap theme, product-list.tpl файл.

У меня есть кнопка добавить в корзину и DIV с некоторыми Smarty код:

<a class="ajax_add_to_cart_button" href="...."> 

<div id="div1">{if $added}Added{else}not added{/if}</div> 

Теперь, когда я нажимаю на ссылку, я хочу только обновить Div содержание.

Я уже пытаюсь найти код в стеке, но моих знаний по-прежнему недостаточно.

Что я пробую и это не работает:

$(document).on('click', '.ajax_add_to_cart_button', function() { 
    $("#div1").load()  /*also $("#div1").load("#div1")*/ 
});  

и:

$("#div1").load(location.href + " #div1"); 

и несколько больше.

EDIT, также это не работает для меня:

$(function(){ 
$(document).on('click', '.ajax_add_to_cart_button', function(e) { 
e.preventDefault(); 
$("#div1").load($(this).attr("href")); /*and this: $("#div1").load($(this).attr("href #div1"));*/ 
return false 
}); 
}); 

EDIT2: Когда я пытаюсь этот код работает половина

$(document).ready(function(){ 
$(".ajax_add_to_cart_button").click(function(){ 
$("#div1").html("result reloaded successfully"); 
}); 
}); 

почему половина? Потому что текст отображается, но только в первом продукте, и это независимо от того, какой один продукт я нажимаю, а также я пытаюсь переключить html() на load() или refresh(), но затем не работает.

EDIT3

$(document).ready(function(){ 
var productid = "{product.id_product}" 
$(".ajax_add_to_cart_button").click(function(){ 
$("#div1" + productid).html("result reloaded successfully"); 
}); 
}); 


<div id="div1{product.id_product}">{if $added}Added{else}not added{/if}</div> 

Это дисплей информация во всех продукте, весь контейнер в продукте есть сейчас другой идентификатор.

Answer 1

попробовать следующее и проверить, если он работает ..

$(function(){ 
$(document).on('click', '.ajax_add_to_cart_button', function(e) { 
    e.preventDefault(); 
    $("#one").load($(this).attr("href")); 
    return false. 
}); 

}); 

Я заметил, у вас есть неправильный класс в вашем селекторе. пожалуйста, проверьте это тоже.

Answer 2

Mmm ... Я вижу ... Я думаю, ваша проблема в том, что вы используете один и тот же идентификатор для всех продуктов. DOM должен иметь уникальный идентификатор для одного элемента, попробовать другой способ, может быть, простой класс в качестве селектора, вы не можете использовать один и тот же идентификатор для всех этих элементов :)

Например (я предполагаю что ваш DIV имеет mybeautifuldiv класса):

$(document).ready(function(){ 
    $(".ajax_add_to_cart_button").click(function(){ 
     $(".mybeautifuldiv").html("result reloaded successfully"); 
    }); 
}); 

Answer 3

Если вы пытаетесь это сделать, когда есть список продуктов (категория страницы и т.д.), то вы должны предназначаться надлежащим DIV. И вы, возможно, не захотите использовать id, но класс в своем div.

<div class="my-custom-div">{if $added}Added{else}not added{/if}</div> 

Является ли этот div внутри «добавить в корзину» якорем? Если это, то вы должны предназначаться его:

$(document).ready(function(){ 
    $(".ajax_add_to_cart_button").click(function() { 
     $(this).find('.my-custom-div').html('Content updated!'); 
    }); 
}); 

Если это не так, то вы можете пройти к родительским DIV продукта и найти свой собственный DIV внутри него.Например, в категории странице PrestaShop по умолчанию тему в:

$(document).ready(function(){ 
    $(".ajax_add_to_cart_button").click(function() {   
     $(this).closest('.product-container').find('.my-custom-div').html('Content updated!'); 
    }); 
});