1

Hi folks I've a situation here

I've a page to order food it works fine add to shopping cart successfully but with one issue its delete item button click event dose not perform as it should.

It work fine as i load the page, i mean if i refresh page using F5. If another item is added in the basket and then press the delete button it show # sign in the url an go to the top of the page. where as it should print to console 'remove item'

here is the PHP code when I load the page

$total = 0;
$index = 0;
if(isset($_SESSION['order_array'])){
    foreach ($_SESSION['order_array'] as $value) {
        echo '<div class="row">';
        echo '<div class="col-md-2"><a href="#" id="' . $index . '" class="removeItemCLS"> <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span> </a></div>';
        echo '<div class="col-md-7">' . $value['product_name'] . '</div>';
        echo '<div class="col-md-3"><div class="pull-right">' . $value['price'] . '</div></div>';
        echo '</div><br />';
        $total = (float) $total + $value['price'];
        $index++;
    }
}

When user adds another item which is done by jQuery post...

$('.addbasketCLS').click(function(event){

    var itemID = $(this).attr('id'),
        output = "",
        cart_total = 0;

    $.post("addtobasket_json.php",
    {
        product : itemID
    },
    function(data){

        $("#cart_result").empty();
        $(data).each(function(index,item) {
            output = setCartContent(index, item);
            cart_total += +item.price;
            $("#cart_result").append(output);
        });

        $("#cart_total").empty();
        $("#cart_total").html(cart_total.toFixed(2));
    });

    return false;
});

setCartContent() method below

function setCartContent(index, data){
    return '<div class="row">' + 
        '<div class="col-md-2"><a href="#" id="' + index + '" class="removeItemCLS"> <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span> </a></div>' +
        '<div class="col-md-7">' + data.product_name + '</div>' + 
        '<div class="col-md-3"><div class="pull-right">' +  data.price + '</div></div>' + 
    '</div><br />';
}

click event for rermoveItem

$('.removeItemCLS').click(function(event){
    console.log('remove Item : ');
    return false;
});

it works fine if do not any more item after refreshing the page... if i add an item i'll have to refresh the page to get this working.

Any Idea where I'm going wrong

Regards

Sharif
  • 708
  • 1
  • 7
  • 17

0 Answers0