Зависимый (цепочечный) выпадающий список в CakePHP 3.8.0 с использованием AJAX - PullRequest
Новая
       20

Зависимый (цепочечный) выпадающий список в CakePHP 3.8.0 с использованием AJAX

0 голосов
/ 02 июля 2019

Я новичок в CakePHP и ajax. Я пытаюсь понять, как использовать AJAX для создания зависимого (связанного) раскрывающегося списка в CakePHP 3.8.0.

Я делаю несколько таблиц, например, чтобы научиться создавать цепочку выпадающего меню. У меня три таблицы models, chapters, userinputs. В таблице Userinputs я бы хотел загрузить раздел, основанный на модели. Прямо сейчас все модели и все главы показаны. Вот как они все связаны. как все три таблицы связаны

Я просматривал некоторые примеры в Интернете и пытался применить их в своем коде, но, похоже, ничего не работает. Это мой add.ctp моей таблицы Userinputs. 

<div class="userinputs form large-9 medium-8 columns content">
<?= $this->Form->create($userinput, ['type' => 'file', 'class' => 'ajax_page']) ?>
<fieldset>
    <legend><?= __('Add Userinput') ?><div class="ajax_loading_image"></legend>
    <?php
        echo $this->Form->control('model_id', ['options' => $models, 'empty' => true, 'id'=>'models']);
        echo $this->Form->control('chapter_id', ['options' => $chapters, 'empty' => true, 'id'=>'chapters']);
    ?>
</fieldset>
<?= $this->Form->button(__('Submit')) ?>
<?= $this->Form->end() ?>

Я также добавил этот скрипт в конец add.ctp Userinputs table 

<script>
    $("#models").on('change',function() {
        var id = $(this).val();

        $("#chapters").find('option').remove();
        if (id) {
            var dataString = 'id='+ id;
            $.ajax({
                dataType:'json',
                type: "POST",
                url: '<?php echo Router::url(array("controller" => "Userinputs", "action" => "getChapters")); ?>' ,
                data: dataString,
                cache: false,
                success: function(html) {
                    //$("#loding1").hide();
                    $.each(html, function(key, value) {              
                        //alert(key);
                        //alert(value);
                        //$('<option>').val('').text('select');
                        $('<option>').val(key).text(value).appendTo($("#chapters"));

                    });
                } 
            });
        }
    });
</script>

В контроллере моего Userinputs я добавил публичную функцию 

public function getChapters() 
{ 
    $id = $this->request->data('id'); 
    $chapters = $this->Chapters->find('all', [ 'conditions' => [ 'model_id' => $id ] ]); 
    echo json_encode($chapters); 
}

Пожалуйста, ознакомьтесь с моими кодами и, пожалуйста, помогите мне узнать, как это работает правильно. Буду признателен за любую оказанную помощь.

...