Updating Yii Dropdownlist After Insert New Element

Question

Here's my code:

<p>
  <?php echo $form->labelEx($model,'phone_type'); ?>
  <span class="field">
  <?php echo $form->dropDownList($model,'phone_type', 
     CHtml::listData(PhonesTypes::model()->findAll(),
 'id','type' )); ?>     
  <?php echo $form->error($model,'phone_type'); ?>
</span>                                 
</p>

There will be a button to register new Phone types. So, after the submition of the form, that will be inside of a CJUiDialog, I wish that the above dropDownList be updated with the new type, without refresh the page.

I google it a lot, but i only find things related to "dependent dropdowns" in Yii.

What's the better approach to solve this problem? Is there something like $.fn.cgridview.update?

Here's the Dialog code:

<?php  $this->endWidget('zii.widgets.jui.CJuiDialog');

  $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
   'id'=>'dialog-crud',
   'options'=>array(
    'title'=>'Create new Phone Type',
    'autoOpen'=>false,
    'modal'=>true,
    'width'=>1080,
    'height'=>820,
    'resizable'=>false
    ),
  ));
 ?>

<iframe src="http://myapp/phone_types/create"  width="100%" height="100%"></iframe>

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

And the code of the controller, is a trivial create function:

public function actionCreate(){

$model = new PhoneType;

if(isset($_POST['PhoneType'])){  

  $model->attributes = $_POST['PhoneType'];

  if( $model->save() ){

    //----> some suggestion here? echo CHtml::script("");
    Yii::app()->end();

  }
 }
}

---

So, below is the code of my solution. In the view:

<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
  'id'=>'dialog',
  'options'=>array(
    'title'=>'Phone Types',
    'autoOpen'=>false,
    'modal'=>true,
    'width'=>1080,
    'height'=>820,
    'resizable'=>false
  ),
  ));
 ?>
 <iframe src="phoneTypes/create" id="cru-frame" width="100%" height="100%"></iframe>
 <?php $this->endWidget(); ?>

In my PhoneTypesController:

public function actionCreate(){

    $model = new PhoneTypes;

    if(isset($_POST['PhoneTypes'])){

        $model->attributes = $_POST['PhoneTypes'];

        if($model->save()){             

            echo CHtml::script("
                window.parent.$('#dialog').dialog('close');
                window.parent.$('#Phone_types_id').append('<option value=".$model->id." >'+'".$model->type."'+'</option>');
            ");

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

    $this->render('create',array(
        'model'=>$model,
    ));
}

Answer 1

You probably have an action that adds a phone type (for this example, let's call it phoneType/create).

When you send an ajax request to that action to create your phone type, the action should return the newly created phone types information. You can then add it to your dropdown using jQuery.

Look at this example:

<?php
// In protected/controllers/PhoneTypeController.php
public function actionCreate($phoneType)
{
    $phoneType = new PhoneType;
    $phoneType->phone_type = $phoneType;
    if ($phoneType->save())
    {
        echo CJSON::encode(array('value' => $phoneType->id, 'label' => $phoneType->phone_type)); // echos something like {"value":5,"label":"test"}
    }
}
?>

For the rest of this example, I'm going to assume that your original model (the one you have a phone_type field) is called Company (this has an impact on the jQuery code below where I'm selecting your phone_type dropdown).

You can then use this output in the success callback of your ajax function to add a new option to your select (I.E. dropdown):

jQuery.get( // your 'data' and 'url' here
    success: function(data) {
        $('#Company_phone_type').append('<option value="' + data.value + '">' + data.label + '</option>');
});

For more information on how to do this in jQuery, refer to Adding options to a select using Jquery/javascript.