div id refresh on ajax success

Question

I have a div at index.php which i want to refresh as the ajax call succeeds. I tried this. But it is not refreshing the div unless i refresh the whole page. here is the code.

Div

<div id="cartContainer">
    <div id="cart">
        <li style="color: #515151">
            <img id="cart_img" src="images/cart.png"> Cart <span class='badge' id='comparison-count'>
      <?php
      if(isset($_SESSION['cart'])&& !empty($_SESSION['cart']))
      {
        $cart_count=count($_SESSION['cart']);
        echo $cart_count;
      } else {
        $cart_count=0;
        echo $cart_count;
      }
        ?>
      </span>
        </li>
        <div id="sidebar">
            <?php if(isset($_SESSION[ 'cart'])&& !empty($_SESSION[ 'cart'])){ ?>
            <table id="s_table">
                <?php foreach($_SESSION[ 'cart'] as $id=> $value){ ?>
                <form class="product" method="get" action="index.php?">
                    <tr id="tr_s">

                        <input type="hidden" name="action" value="remove">
                        <input type="hidden" name="id" value="<?php echo $value['id'] ?>">
                        <td class="s_th">
                            <?php echo $value[ 'name']; ?>
                            <input type="hidden" name="name" value="<?php echo $value['name'] ?>">
                        </td>
                        <td class="s_th">
                            <?php echo $value[ 'quantity'] ?>
                            <input type="hidden" name="quantity" value="<?php echo $value['quantity'] ?>">
                        </td>
                        <td class="s_th">
                            <?php echo $value[ 'color']; ?>
                            <input type="hidden" name="color" value="<?php echo $value['color'] ?>">
                        </td>
                        <td class="s_th">
                            <?php echo $value[ 'size'] ?>
                            <input type="hidden" name="size" value="<?php echo $value['size'] ?>">
                        </td>

                        <td>
                            <button type="submit" id="btn_submit">Remove</button>
                        </td>
                    </tr>
                </form>
                <?php } ?>
                <tr>
                    <td class="cart_btn" colspan="2"><a href="index.php?page=cart" style="">GO TO CART</a>
                    </td>
                    <td class="cart_btn" colspan="2"><a href="index.php?page=checkout">CHECK OUT</a>
                    </td>
                </tr>
            </table>
            <?php } else { ?>
            <p id="p_s"><i> "Your Cart is Empty"</i>
            </p>
            <?php } ?>
        </div>
    </div>
</div>

Ajax

<script>
    $(document).ready(function() {
        $('#addtocart').click(function(e) {
            e.preventDefault();

            var page = $("#page").val(),
                action = $("#action").val(),
                name = $("#name").val(),
                id = $("#id").val(),
                color = $("#color").val(),
                size = $("#size").val(),
                cat_id = $("#cat_id").val(),
                s_cat_id = $("#s_cat_id").val(),
                category = $("#category").val();

            var proceed = true;
            if (proceed) {
                post_data = {
                    'Page': page,
                    'Action': action,
                    'Name': name,
                    'Cat_id': cat_id,
                    'S_cat_id': s_cat_id,
                    'Category': category,
                    'Id': id,
                    'Color': color,
                    'Size': size
                };
                $.post('add_cart.php', post_data, function(response) {

                    //load json data from server and output message
                    if (response.type == 'error') {
                        //output=$('.alert-error').html(response.text);
                    } else {
                        output = $("#cartContainer").load();
                    }

                    $(".alert-error").delay(3200).fadeOut(300);
                }, 'json');
            }
        });
    });
</script>

Answer 1

If you want to update the div with the return from you AJAX you would do something like this:

 $.post('add_cart.php', post_data, function(response) {
     $("#cartContainer").html(response);
 }

Of course this depends on many things: the kind of data you're returning, what you wish to update, etc. It is hard to tell, from what you have posted, what your intent is.