ajaxを使用してyiiで依存コンボボックスを作成しようとしています

musafar006

Yiiアプリケーションで依存コンボボックスシステムを作成しようとしています。最初のコンボボックスにはStatesが入力され、2番目のコンボボックスはajaxrenderPartial()メソッドを使用して動的に生成されます。
以下のコード:

見る

<?php
$this->widget('ext.combobox.EJuiComboBox', array(
    'model' => $adMulti,
    'attribute' => 'state_id',
    // data to populate the select. Must be an array.
    'data' => CHtml::listData(State::model()->findAll(), 'id', 'name'),
    'assoc' => true,
    // options passed to plugin
    'options' => array(
        // JS code to execute on 'select' event, the selected item is
        // available through the 'item' variable.
        'onSelect' => 'getCities(item.value);',
        // If false, field value must be present in the select.
        // Defaults to true.
        'allowText' => false,
    ),
    // Options passed to the text input
    'htmlOptions' => array(
        'style' => 'height: 36px',
    ),
));
?>
<script type="text/javascript">
  function getCities(state) {
      $.ajax({
          url: '<?php echo $this->createUrl('ad/ajaxCities'); ?>',
          data: {state_name: state},
          type: 'POST',
          success: function (data) {
              $('#city_id-carrier').html(data);
          }
      });
  }
</script>
<div id="city_id-carrier" class="textboxes"></div>

AdController

public function actionAjaxCities()
    {
        $stateName = isset($_POST['state_name']) ? $_POST['state_name'] : FALSE;
        if ($stateName) {
            $state = State::model()->findByAttributes(array(
                'name' => $stateName
            ));
            $stateId = $state->id;
            $cities = City::model()->findAllByAttributes(array(
               'state_id' => $stateId
            ));
            $this->renderPartial('_cities', array(
                'cities' => $cities,
                'stateId' => $stateId
                ), FALSE, TRUE
            );
        }
    }

_cities.php

<?php
$this->widget('ext.combobox.EJuiComboBox', array(
    'model' => AdMulti::model(),
    'attribute' => 'city_id',
    // data to populate the select. Must be an array.
    'data' => CHtml::listData($cities, 'id', 'name'),
    'assoc' => true,
    // options passed to plugin
    'options' => array(
        // JS code to execute on 'select' event, the selected item is
        // available through the 'item' variable.
        // 'onSelect' => 'getLocalities(item.value);',
        // If false, field value must be present in the select.
        // Defaults to true.
        'allowText' => false,
    ),
));
?>

コードが機能し、コンボボックスを初めて作成しています。しかし、状態コンボボックスの値を変更すると、何か奇妙なことが起こります。新しいコンボボックスが作成されますが、表示される値は最初に生成されたコンボボックスのものです。Firebugコンソールで「TypeError:this.inputisundefined」というエラーが発生します。

uniqid()を使用してコンボボックスの一意のIDを作成しようとしましたが、コンボボックスのselect要素のIDには影響しません

変えたら

$('#city_id-carrier').html(data)

$('#city_id-carrier').append(data)

それはうまく機能していますが、複数のコンボボックスが生成されています。

これを機能させるためのアイデア/提案はありますか?

musafar006

これを機能させるための解決策を見つけました。コンボボックスを動的に作成する代わりに、コンボボックスを1回配置してから、要求ごとに動的に入力します。依存ドロップダウンによく似ています。
コンボボックスは、ドロップダウンとテキストボックスを組み合わせたものです。したがって、非表示のドロップダウンのIDを書き留めて、ajaxの更新時に更新します。

コード:

見る:

<?php
    $this->widget('ext.combobox.EJuiComboBox', array(
        'model' => $adMulti,
        'attribute' => 'state_id',
        // data to populate the select. Must be an array.
        'data' => CHtml::listData(State::model()->findAll(), 'id', 'name'),
        'assoc' => true,
        // options passed to plugin
        'options' => array(
            // JS code to execute on 'select' event, the selected item is
            // available through the 'item' variable.
            'onSelect' => 'getCities(item.value);',
            // If false, field value must be present in the select.
            // Defaults to true.
            'allowText' => false,
        ),
    ));
    ?>
<script type="text/javascript">
      function getCities(state) {
          $.ajax({
              url: '<?php echo $this->createUrl('ad/ajaxCities'); ?>',
              data: {state_id: state},
              type: 'POST',
              beforeSend: function() {
                  $('#AdMulti_city_id_combobox').val(''); // emptying textbox in case a value is previously selected.
              },
              success: function (data) {
                  $('#AdMulti_city_id').html(data); // populating the hidden dropdown.
              }
          });
      }
  </script>
<?php
$this->widget('ext.combobox.EJuiComboBox', array(
    'model' => $adMulti,
    'attribute' => 'city_id',
    // data to populate the select. Must be an array.
    'data' => CHtml::listData(array(''), 'id', 'name'),
    'assoc' => true,
    // options passed to plugin
    'options' => array(
        'allowText' => false,
    ),
));
?>

AdController

    public function actionAjaxCities()
    {
        $stateName = isset($_POST['state_id']) ? $_POST['state_id'] : FALSE;
        if ($stateName) {
            $state = State::model()->findByAttributes(array(
                'name' => $stateName
            ));
            $cities = City::model()->findAllByAttributes(array(
               'state_id' => $state->id
            ));
            $data = CHtml::listData($cities, 'id', 'name');
            foreach ($data as $id => $name) {
                echo CHtml::tag('option', array('value' => $id),
                    CHtml::encode($name), TRUE);
            }
        }
    }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

すでにitemsourceがあるdatagrid内にコンボボックスを追加しようとしています

分類Dev

リストをコンボボックスにバインドしようとしています

分類Dev

JavaScriptのすべてのチェックボックスを使用して、コンテンツに依存するチェックボックスを作成するにはどうすればよいですか?

分類Dev

Selenium WebDriverを使用してPythonでボタンをクリックしようとしています

分類Dev

ajaxを使用してコンボボックスに値を表示しますか?

分類Dev

複数のテキストボックスから値を呼び出して、コマンドライン引数を作成しようとしています

分類Dev

ajaxを使用してmysqlデータベースを自動更新しようとしていますが、クリックボタンはありません

分類Dev

ボタンクリックでtextareaからコードをコピーしようとしています

分類Dev

スマートコンボボックスアイテムの相互作用を作成しようとしています

分類Dev

Accessのコンボボックスの間隔を広げようとしています

分類Dev

すでに入力されているコンボボックスVBAから特定のアイテムを削除しようとしています

分類Dev

ボタンをクリックしたときにimageViewを作成しようとしています

分類Dev

フレックスボックスでフレックスボックスを作成しようとしています

分類Dev

WPF:コンボボックスでの選択に基づいて可視性を変更しようとしています

分類Dev

anglejsでクリックするとアイコンと色が変わるボタンを作成しようとしています

分類Dev

Jqueryを使用してチェックボックスの値を取得しようとしています

分類Dev

フレックスボックスとパーセントでグリッドを作成しようとしています

分類Dev

支払いに対してIOSINAPPサンドボックスをテストしようとしています

分類Dev

jQueryのremove()関数を使用して選択ボックスを削除しようとしています

分類Dev

チェックボックスを同じボタンと一致させようとしています

分類Dev

WPFで、コンボボックス入力に基づいてエキスパンダーを作成します

分類Dev

私はボタンをクリックして.exeファイルを実行して、/ wとしてインストールできるインターフェイスを作成しようとしています

分類Dev

ajax、jsp、サーブレットを使用して選択ボックスを使用しています..2番目の依存ドロップダウンにチェックボックス付きの選択ボックスを表示したい

分類Dev

7セグメントスコアボードを作成しようとしています

分類Dev

WordPressでクローンajaxとjqueryを使用してメタボックスを作成する方法

分類Dev

フォームなしでjqueryを使用してモーダルボックスを動的に閉じることを理解しようとしています

分類Dev

JComboを使用してチェーンコンボボックスを作成する

分類Dev

javascriptを使用してチェックできるチェックボックスの数を制限しようとしています

分類Dev

画像の上に情報ボックスを配置しようとしていますが、両方ともコンテナ内にとどまっています

Related 関連記事

  1. 1

    すでにitemsourceがあるdatagrid内にコンボボックスを追加しようとしています

  2. 2

    リストをコンボボックスにバインドしようとしています

  3. 3

    JavaScriptのすべてのチェックボックスを使用して、コンテンツに依存するチェックボックスを作成するにはどうすればよいですか?

  4. 4

    Selenium WebDriverを使用してPythonでボタンをクリックしようとしています

  5. 5

    ajaxを使用してコンボボックスに値を表示しますか?

  6. 6

    複数のテキストボックスから値を呼び出して、コマンドライン引数を作成しようとしています

  7. 7

    ajaxを使用してmysqlデータベースを自動更新しようとしていますが、クリックボタンはありません

  8. 8

    ボタンクリックでtextareaからコードをコピーしようとしています

  9. 9

    スマートコンボボックスアイテムの相互作用を作成しようとしています

  10. 10

    Accessのコンボボックスの間隔を広げようとしています

  11. 11

    すでに入力されているコンボボックスVBAから特定のアイテムを削除しようとしています

  12. 12

    ボタンをクリックしたときにimageViewを作成しようとしています

  13. 13

    フレックスボックスでフレックスボックスを作成しようとしています

  14. 14

    WPF:コンボボックスでの選択に基づいて可視性を変更しようとしています

  15. 15

    anglejsでクリックするとアイコンと色が変わるボタンを作成しようとしています

  16. 16

    Jqueryを使用してチェックボックスの値を取得しようとしています

  17. 17

    フレックスボックスとパーセントでグリッドを作成しようとしています

  18. 18

    支払いに対してIOSINAPPサンドボックスをテストしようとしています

  19. 19

    jQueryのremove()関数を使用して選択ボックスを削除しようとしています

  20. 20

    チェックボックスを同じボタンと一致させようとしています

  21. 21

    WPFで、コンボボックス入力に基づいてエキスパンダーを作成します

  22. 22

    私はボタンをクリックして.exeファイルを実行して、/ wとしてインストールできるインターフェイスを作成しようとしています

  23. 23

    ajax、jsp、サーブレットを使用して選択ボックスを使用しています..2番目の依存ドロップダウンにチェックボックス付きの選択ボックスを表示したい

  24. 24

    7セグメントスコアボードを作成しようとしています

  25. 25

    WordPressでクローンajaxとjqueryを使用してメタボックスを作成する方法

  26. 26

    フォームなしでjqueryを使用してモーダルボックスを動的に閉じることを理解しようとしています

  27. 27

    JComboを使用してチェーンコンボボックスを作成する

  28. 28

    javascriptを使用してチェックできるチェックボックスの数を制限しようとしています

  29. 29

    画像の上に情報ボックスを配置しようとしていますが、両方ともコンテナ内にとどまっています

ホットタグ

アーカイブ