[FIXED] How to ajaxify a shopping cart in CodeIgniter

Issue

I'm having problems Ajaxifying a shopping cart built in CodeIgniter. When a user clicks on an add button on a drop down menu for items, the item becomes added onto a div called #cart via an Ajax callback function. However, my issue is that the content generated via Ajax in the cart div is not permanent (since this is done on the client side). Is there a way to make the cart HTML output permanent while still using Ajax?

Although my Ajax call is outputing the content from my controller, i checked out the view source and there is actually no html elements on it.Here is my ajax call:

$(document).ready(function() {
    $('.add').click(function(){
        var button =$(this).val();
        var button = button.split(',');
        var url=<?php echo '"' . base_url() . 'index.php/order_form/add/"' ?>+button[0]+'/'+button[1];
        var quantity=$('#quantity-'+button[0]).val();

        $.ajax({
            url: url,
            data:'quantity='+quantity,
            dataType: 'html',
            success: function(output_string){
                $('#cart').empty().append(output_string);
            }
        });
    });
});

Solution

You have two possibilities:

• Store the response from Ajax in a CodeIgniter session. This means you will be able to verify the session at a refresh and repopulate the cart.
• Store the response from Ajax in a temporary database table... and again, at a refresh, repopulate the cart from the database.

General facts: you will never be able to see Ajax's response by looking at the source code. You will have to look with a browser inspector at the response (XHR response at the network tab in Google Chrome, for example). There you will see what URL was outputed for you through Ajax.

Answered By - Mihai Tudor

Answer Checked By - Candace Johnson (PHPFixing Volunteer)