Question

There is a left block on my web-page – assume it shows a shopping basket. When user clicks the “add to basket” button on any product page, I want to reload my left block (shopping basket) so the new product that has been added by the customer can be seen on the left side of the page without reloading the page.

When customer clicks “add to basket” button, it already puts the product into the basket, that’s not the problem but I cannot make the left block refresh. The code is like:

<script type="text/javascript">
function js_add_to_basket(){
    /* vars from form */
    var book_id = jQuery.trim($('#book_id').attr('value'));

    $.ajax({
        type:'POST',
        url : '<?=base_url().index_page()?>/basket/add_to_basket/'+new Date().getTime(),
        data : $('#add_to_basket').serialize(),
        success: function(q){
            $('#add_to_basket').html(q);
            $("#left_basket").load("*path*\inc_left.php #left_basket");
        }
    }) // end of ajax request
} // end of js_basket
</script>

left_basket is the id of the whole div of the left block. I think the path of the file inc_left.php is coming wrong. Whatever I wrote it there, it didn’t work. The file is in the path of “views/inc/inc_left.php”.

Any idea?

Answer 1

You need a controller method to render the content for left panel, then js can access it with url such as <?=base_url().index_page()?>/basket/content