Problem Updating Values Using Ajax

Yii 1.1 Extensions
1

Hi!! This is my first ever post…

I’m working on a shopping website using Yii-Booster but I’m currently stumped! Basically what I’m trying to achieve is that when a user adds a product to the cart, a modal displays showing an acknowledgement message and then the div with the shopping cart is updated to reflect the new total.

Really simple, innit?? I’ve spent the entire day trying to get it to work. Any help you can offer would be greatly appreciated.

Oh yeah… one more thing, the dropdown menu in the navbar stops working after almost any sort of AJAX action(loading modals, etc). I’m guessing its caused by a conflict somewhere but I’m completely lost in Jquery/Ajax stuff.

2

What happens is when I click the ajaxLink, it updates the #Cart div but it does not display the modal. Here’s my code:

StoreController:


// action allowing a product to be added to the shopping cart

public function actionAddToCart($id)

{

    //fetch item

    $item = Item::model()->findByPk($id);


    //if item is in cart

    if(Yii::app()->shoppingCart->contains($id))

    {

        //Yii::app()->clientScript->scriptMap['jquery.js'] = true;

        //$this->renderPartial('_addToCart',array('data'=>$data),false,true);           

        echo CJSON::encode(

            array(

                //'total'=>'Your Cart (N'.number_format(Yii::app()->shoppingCart->getCost()).')',

                'addCart'=>$this->renderPartial('_inCart',array('item'=>$item),true),

            )

        );

        //CHtml::ajax();

    }

    else

    {

        Yii::app()->shoppingCart->put($item);

        //Yii::app()->clientScript->scriptMap['jquery.js'] = true;

        //$this->renderPartial('_addToCart',array('data'=>$data),false,true);

        //$this->renderPartial('_addToCart',array('item'=>$item),false,true);

        echo CJSON::encode(

            array(

                'total'=>'Your Cart (N'.number_format(Yii::app()->shoppingCart->getCost()).')',

                'addCart'=>$this->renderPartial('_addToCart',array('item'=>$item),true),

            )

        );

    }

}

_display (partialview showing the product)


<div style="float: left; display: inline; margin-right: 30px; margin-top: 20px;">

<img style="border: 1px solid black;" src="<?php echo Yii::app()->baseUrl; ?>/images/products/thumbs/<?php echo $data->image; ?>" />

<div style="font-size: 14px; margin-top: 3px;">

Name: <?php echo CHtml::ajaxLink($data->name, array("view", "id"=>$data->id), array('update'=>'#viewdetailsDiv',)); //array(), array('data-toggle'=>'modal','data-target'=>"#".$data->id)); ?><br/>

Category: <?=$data->category->category?><br/>

Gender: <?=$data->gender?><br/>

Price: <?php echo "N".number_format($data->price);?><br/>

<?php //echo CHtml::ajaxLink("Add to Cart", array("addtocart", "id"=>$data->id), array( 'update'=>'#addtocartDiv',)); ?>

<?php echo CHtml::ajaxLink("Add to Cart", array("addtocart", "id"=>$data->id), array( 'type'=>'POST', 'dataType'=>'json', 

    'success'=>'function(data){

        $("#Cart").html(data.total);            

        }'

    )

); ?>

</div>

Here’s the code for the view containing the modal


<?php $this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'myModal', 'autoOpen'=>true, 'htmlOptions'=>array('style'=>'margin-top: 2px;'))); ?>


<div class="modal-header">

    <a class="close" data-dismiss="modal">&times;</a>

    <h4>Your Cart has been updated</h4>

</div>


<div class="modal-body">

    <p>The item, <strong><?php echo $item->name; ?></strong> (<?php echo $item->category->category; ?>),  has been added to your shopping cart.</p>

</div>


<div class="modal-footer">

    <?php $this->widget('bootstrap.widgets.TbButton', array(

        'type'=>'primary',

        'buttonType'=>'ajaxButton',

        'label'=>'Close',

        //'url'=>"store/updateTotal",

        'htmlOptions'=>array(

            //'data-dismiss'=>'modal',

        ),

        'ajaxOptions'=>array(

                'type'=>'POST',

                'dataType'=>'json',

                'url'=>$this->createUrl("store/updateTotal"),

                'success'=>'function(data){

                    $("#Cart").html(data.total); 

                    $("#myModal").hide();

                }',

        ),      

    )); ?>

</div>


<?php $this->endWidget(); ?>

Thanks in advance