reload cart div on ajax call | Codeigniter

Question

In my pages there is add to cart function, And I post the cart form with ajax.

$(document).ready(function(e) {
    $('.toCart').click(function (e) {

        e.preventDefault();

        var id = $(this).closest('.hidden').find('.idHid').text(); 

        $.ajax({
            type: "POST",
            data:'id='+id,
            url: '<?php echo site_url('cart/added/');?>',
            success: function(respond)
                {
                    //window.alert(respond); 
                    $('#myCart').fadeIn();
                    $('#myCart').delay(5000).fadeOut('slow');
                }
        });
        return false; 
    });
});

The id of the cart div is #myCart , I try to hide this div so that it only shows up when the user insert or update a new cart. Everything works fine until here.

But the problem is whenever I add new cart, the cart is not updated when it fades in. The cart is update if only I reload the page.

I even have separated the cart view :

cart.php:

    <!--My Cart-->
    <div id="myCart">
        <table border="1">
            <thead>
                <td>No</td>
                <td>Name</td>
                <td>Price</td>
                <td>Qty</td>
                <td>Sub Total</td>
            </thead>
        <?php 

            if($cart = $this->cart->contents())
                {   
                    $i=0;
                    foreach ($cart as $item)
                        {   
                            $i++;
                            echo "<tr>"; 
                                echo "<td>".$i."</td>"; 
                                echo "<td>".$item['name']."</td>"; 
                                echo "<td>".$item['price']."</td>"; 
                                echo "<td>".$item['qty']."</td>"; 
                                echo "<td>".$item['qty']."</td>"; 
                            echo "</tr>"; 
                        }
                }
        ?>
        </table>
    </div>
    <!--My Cart-->

Can any body help, please?

This is the controller for the cart:

function added()
    {
        $this->load->model('site_model');

        $product = $this->site_model->getCart($this->input->post('id')); 

        $bag = $this->cart->contents();

        $flag = TRUE;

        foreach ($bag as $item) 
            {                               
                if ($item['id'] == $this->input->post('id'))
                        { 
                            $data = array('rowid'=>$item['rowid'],'qty'=>++$item['qty']);
                            $this->cart->update($data);
                            $flag = FALSE;
                            echo "Cart is update";                          
                            $this->load->view('templates/cart', $data); 
                        }       
            }

        if($flag)
            {
                $cart = array (
                    'id' => $this->input->post('id'), 
                    'qty' => 1, 
                    'price' => $product->price,
                    'name' =>  $product->name
                );
                $echi = $this->cart->insert($cart);  
                echo "New Cart is added";                           
                $this->load->view('templates/cart', $cart); 
            }

        //print_r ($echi); 
    }

Answer 1

You say you've hidden #myCart. But fadeIn() does not unhide it. Here is a part of jQuery fadeIn documentation.

The .fadeIn() method animates the opacity of the matched elements. It is similar to the .fadeTo() method but that method does not unhide the element and can specify the final opacity level.

Maybe it helps.