单击链接后刷新div内容

Question

Prestashop v1.6 default-bootstrap theme, product-list.tpl file.

I have a button add to cart and div with some smarty code:

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

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

Now when I click to link I want to only refresh div content.

I already try some code finding in stack but my knowledge is still not enought.

What I try and it is not work:

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

and:

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

and few more.

EDIT, also this is not work for me:

$(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: When I try this code is half working

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

why half? Because text is display but only in first product, and it is no matter which one product I click, and also I try switch html() to load() or refresh() but then is not working.

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>

It is display info in all product, all container in product have now different id.

Answer 1

try following and check if it works..

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

});

I noticed you have wrong class in your selector. please check that too.

Answer 2

Mmm... I see... I guess your problem is that you use the same id for all the products. The DOM 'should' have a unique ID for one element, try another way, maybe a simple class as a selector, you couldn't use the same id for all that elements :)

For example (I'm assuming that your div have mybeautifuldiv class):

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

Answer 3

If you're trying to do this when there is a list of products (category page etc.) then you need to target a proper div. And you might not want to use id but class in your div.

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

Is this div inside 'add to cart' anchor? If it is then you need to target it:

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

If it is not then you can traverse to parent div of product and find your custom div inside it. For example in a category page of a default prestashop theme:

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