Chained Dropdown-Menü in CakePHP 3

Question

Ich habe 4 Tabellen categories, subcategories, product_types und products. Jede ist in der folgenden Hierarchie mit anderen verknüpft.

categories 
|- subcategories 
    |- product_types 
     |- products 

Der Blick auf add() Wirkung von ProductsController ist

 <?= $this->Form->create($product, ['type' => 'file', 'class' => 'ajax_page']) ?> 
      <fieldset> 
       <legend><?= __('Add Product') ?> <div class="ajax_loading_image"></div></legend> 
       <?php 
        echo $this->Form->input('category_id', ['options' => $categories, 'empty' => true]); 
        echo $this->Form->input('subcategory_id', ['options' => $subcategories]); 
        echo $this->Form->input('product_type_id', ['options' => $productTypes]); 
        echo $this->Form->input('product_code'); 
        echo $this->Form->input('SKU'); 
        echo $this->Form->input('title'); 
        echo $this->Form->input('description'); 
      </fieldset> 
    <?php echo $this->Form->end(); ?> 

Gerade jetzt ist es Liste ganze subcategories in der Liste ist. Ich möchte subcategories bei Änderung von categories und product_types bei Änderung von subcategories mit Ajax laden.

Es gibt kein gutes Beispiel, das ich für CakePHP 3.x gefunden und auch einige Dokumentation erwähnt, dass js Helfer von CakePHP entfernt wurde 3

Wie es in CakePHP umgesetzt werden können 3. Ich bin neu in CakePHP und Ajax auch.

Vielen Dank.

Answer 1

ctp-Datei wie folgt. hier gebe ich ID zu Feldkategorien, Unterkategorien, Produkttyp und Produktcode zuerst.

<?= $this->Form->create($product, ['type' => 'file', 'class' => 'ajax_page']) ?> 
    <fieldset> 
     <legend><?= __('Add Product') ?> <div class="ajax_loading_image"></div></legend> 
     <?php 
       echo $this->Form->input('category_id', ['options' => $categories, 'empty' => true,'id'=>'categories']); 
       echo $this->Form->input('subcategory_id', ['options' => '$subcategories','id'=>'subcategories']); 
       echo $this->Form->input('product_type_id', ['options' => '$productTypes','id'=>'producttype']); 
       echo $this->Form->input('product_code',['options'=>'$productcode','id'=>'productcode']); 
       echo $this->Form->input('SKU'); 
       echo $this->Form->input('title'); 
       echo $this->Form->input('description'); 
    </fieldset>  <?php echo $this->Form->end(); ?> 

und in Ihrem Ajax Anruf für Unterkategorien ist wie folgt. Sie können

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

     $("#subcategories").find('option').remove(); 
     if (id) { 
      var dataString = 'id='+ id; 
      $.ajax({ 
       dataType:'json', 
       type: "POST", 
       url: '<?php echo Router::url(array("controller" => "yourcontroller", "action" => "youraction")); ?>' , 
       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($("#subcategories")); 

        }); 
       } 
      }); 
     } 
    }); 

von diesem Code gleichen Ajax-Aufruf für product_type und Produkt-Code erstellen Sie Drop-Down-Menü gekettet bekommen können. seine Arbeit für dich.