Yii - Ajax Get based on drop down selection

Question

I am trying to display the price based on the selection of product from a drop down.

View contains:

<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
                    'id'=>'plan-form',
                    'enableAjaxValidation'=>true,
                )); ?>  

    <?php echo $form->dropDownListRow($model, 'plan_id',
            $planList, array('id'=>'planid', 'prompt'=>'Select Plan',
            'ajax' => array('type'=>'GET',
            'url'=> Yii::app()->createUrl('mbr/plan/ajaxGetPrice'),
            'update'=>'#price'))); ?>

    <div id="price">0.00</div>    
<?php $this->endWidget(); ?>

Action:

public function actionAjaxGetPrice()
{
    Yii::log("Within AjaxGetPrice");

    if (Yii::app()->request->isAjaxRequest)
        Yii::log("ajax request");
    else
        Yii::log("regular request");

    //$plan=Plan::model()->findByPk((int) $_GET['plan_id']);
    //Yii::log(serializ($plan));
    // echo $plan->price;

    echo "10";

    Yii::app()->end();      
}

It is not updating the price. Its not calling the action at all. I looked at the suggestions found in Yiiframework and here and tried those and still no luck.

when I add this to the view

    <?php
        echo CHtml::ajaxLink(
          "Get Price",
          Yii::app()->createUrl('mbr/plan/ajaxgetprice'),
          array( // ajaxOptions
            'type' => 'GET',
            'update' => '#price'),
          array( //htmlOptions
            'href' => Yii::app()->createUrl('mbr/plan/ajaxgetprice')
         )
        );
    ?>

I get the response when I click on the link, but it renders a separate page with value "10". I have URLFormat = Path.

What am I doing wrong? Any pointers?

Answer 1

I'm not really sure how to do this the Yii way but the following javascript should be useful.

$("#yourdropdownidhere").change(function(){
    $.ajax({
       url: 'your url here', //(dynamically generated by product item)
       type: "get",
       success: ajaxSuccessHandler
    });
});

function ajaxSuccessHandler(obj) {
    $('#price').html(obj);
}

I also suggest sending a JSON object as the response for AJAX requests, so it will have an actual structure. A great blog post on this to check out would be Fully ajax website with Yii