單擊鏈接后刷新div內容

Question

Prestashop v1.6 default-bootstrap主題，product-list.tpl文件。

我有一個按鈕添加到購物車和div與一些聰明的代碼：

<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");

還有更多。

編輯，這也不適合我：

$(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
});
});

編輯2：當我嘗試這個代碼是一半工作

$(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>

它是所有產品中的顯示信息，產品中的所有容器現在都有不同的ID。

Answer 1

嘗試關注並檢查它是否有效..

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

});

我注意到你的選擇器中有錯誤的類。 請檢查一下。

Answer 2

嗯......我明白了...我想你的問題是你對所有產品使用相同的ID。 DOM'應該'擁有一個元素的唯一ID，嘗試另一種方式，也許是一個簡單的類作為選擇器，你不能對所有元素使用相同的id :)

例如（我假設你的div有mybeautifuldiv類）：

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

Answer 3

如果您在有產品列表（類別頁面等）時嘗試執行此操作，則需要定位適當的div。 你可能不想在你的div中使用id而是class。

<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!');
    });
});