Updating Values Using Ajax in Yii - ajax

Question

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.
Thanks for the replies. 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">×</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',
'label'=>'Close',
'url'=>'#',
'htmlOptions'=>array('data-dismiss'=>'modal'),
)); ?>
</div>
<?php $this->endWidget(); ?>

Answer 1

I can't tell you the perfect solution but can give you a suggestion regarding Yii that can solve your problem.
Always load all the jquery or js files used in first request. Never load again any js file in any ajax request, It will a lot of problems.
You can achieve it in simple way
if(Yii::app()->request->isAjaxRequest){
Yii::app()->clientScript->scriptMap['jquery.js'] = true;
}