Блог

Новинка в YII. Я должен загрузить страницу с вызовом AJAX при выборе из поля CJuiAutoComplete.

 <?php
     echo CHtml::label(Yii::t('location', 'PLZ'), 'GeoData_plz'); 
    ?>
    </td><td>

    <?php 

    $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
        'name' => 'GeoData[plz]',
        'source' => 'js:function(request, response) {getAutoCompleteData("plz", response);}',
        'options' => array(
            'minLength' => '0',
        ),

        'htmlOptions' => array(
            'size' => 8,
            'maxlength' => 15,
            'class'=>'addrChange'
        ),
        'value' => $model->geo_data->plz));
    ?>
  

Я попытался добавить onSelect из разных plz в htmlOptions (действовать как submit buttion), но это не работает, здесь я просто хочу отправить plz в базу данных при выборе другого plz, ниже приведен код.

     echo CHtml::label(Yii::t('location', 'PLZ'), 'GeoData_plz'); ?></td><td><?php $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'id'  => 'GeoData_plz',
'name' => 'GeoData[plz]',
'source' => 'js:function(request, response)  {
getAutoCompleteData("plz", response);
}',
'options' => array(
    'minLength' => '0',
    //'select' => 'js:function(event, ui){ alert(ui.item.value) }',
),

'htmlOptions' => array(
    'size' => 8,
    'maxlength' => 15,
    'class'=>'addrChange',
    'onSelect' => 'CHtml::ajax({
    url: "'.$this->createUrl('location/getAddressTabContent').'",
    dataType: "json",
    data: {
                    loc_id: ' . $model->id . '
                },
    success: function(data) {
                    $("#addressBricks").html(data.brick_table);
                }
})'
),
'value' => $model->geo_data->plz
));
  

Спасибо за ответ, но здесь я просто хочу отправить данные при выборе. Я использовал приведенный вами код, но он не работает

 $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
          'model'=>$model,
          'attribute'=>'GeoData[plz]',
          'source'=>'js: function(request, response) {
                                        getAutoCompleteData("plz", response);

                                        $.ajax({
                                                url: "'.$this->createUrl('location/getAddressTabContent').'",
                                                dataType: "json",
                                                data: {
                                                       loc_id: ' . $model->id . '
                                                      },
                                                success: function (data) {
                                                       $("#addressBricks").html(data.brick_table);
                                                }
                                              })
                                        }',
           'options'=>array(
                            'delay'=>300,
                            'minLength'=>0,
                            'select'=>'js:function(event, ui) { 
       $.ajax({
       type:"POST",
       url:  "' . $this->createUrl('location/getAddressTabContent'') . '",
       data: {selected: ui.item.value},
       success:function(data) {$("#addressBricks").html(data.brick_table);}
       });}'
                           ),
           'htmlOptions' => array(
                            'size' => 8,
                            'maxlength' => 15,
                            'class'=>'addrChange',
                            'value' => $model->geo_data->plz,
                            'id'  => 'GeoData_plz',
                           ),
  

));

Это в массиве опций, а не в htmlOptions:

 'options'=>array(
.....
   'select'=>'js:function(event, ui) {
        //your ajax request here
        //use $.ajax() 
        //your selected item = ui.item.id
   }
  

Надеюсь, это поможет.

Я отредактировал ваш виджет. Просто используйте этот виджет, чтобы заставить его работать.

 $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
              'model'=>$model,
              'attribute'=>'GeoData[plz]',
              'source'=>'js: function(request, response) {
                                            $.ajax({
                                                    url: "'.$this->createUrl('location/getAddressTabContent').'",
                                                    dataType: "json",
                                                    data: {
                                                           loc_id: ' . $model->id . '
                                                          },
                                                    success: function (data) {
                                                           $("#addressBricks").html(data.brick_table);
                                                    }
                                                  })
                                            }',
               'options'=>array(
                                'delay'=>300,
                                'minLength'=>1,
                               ),
               'htmlOptions' => array(
                                'size' => 8,
                                'maxlength' => 15,
                                'class'=>'addrChange',
                                'value' => $model->geo_data->plz,
                                'id'  => 'GeoData_plz',
                               ),
 ));