插入新元素后更新Yii下拉列表

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.

将有一个按钮来注册新的电话类型。因此，在表单的子表示之后，将在CJUiDialog内部，我希望上面的dropDownList可以使用新类型进行更新，而无需刷新页面。

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

我谷歌很多，但我只能在Yii中找到与“依赖性下拉”相关的内容。

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

解决这个问题的更好方法是什么？有没有类似$ .fn.cgridview.update的东西？

Here's the Dialog code:

这是Dialog代码：

<?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:

在我的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,
    ));
}

1 个解决方案

#1

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

您可能有一个添加电话类型的操作（对于此示例，我们称之为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.

当您向该操作发送ajax请求以创建您的电话类型时，该操作应返回新创建的电话类型信息。然后，您可以使用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).

对于本例的其余部分，我将假设你的原始模型（你有一个phone_type字段的那个）被称为公司（这对我选择你的phone_type下拉列表下面的jQuery代码有影响）。

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):

然后，您可以在ajax函数的成功回调中使用此输出，为您的select（I.E.下拉列表）添加一个新选项：

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.

有关如何在jQuery中执行此操作的更多信息，请参阅使用Jquery / javascript向选择添加选项。

#1