2016-07-29 148 views
1

我有4個表categories,subcategories,product_typesproducts。每個都與以下層級中的其他人相關聯。cakephp 3中的鏈接下拉菜單

categories 
|- subcategories 
    |- product_types 
     |- products 

ProductsControlleradd()採取行動的觀點是

 <?= $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(); ?> 

現在它是名單整個subcategories在列表中。我想在categoriesproduct_types的變化上使用Ajax在subcategories的變化上加載subcategories

沒有很好的例子,我可以發現CakePHP的3.x和也有一些文件提到,js的助手已經從CakePHP的3

如何能在CakePHP中3實現去除我是新來的CakePHP和Ajax。

謝謝。

+0

提示:http://sandbox.dereuromark.de/sandbox/ajax-examples/chained-dropdowns :)它也包含源代碼。 – mark

回答

1

ctp文件如下。這裏首先我給id字段類別,子類別,產品類型和產品代碼。

<?= $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(); ?> 

並在您的ajax調用子類別如下。您可以PRODUCT_TYPE和產品代碼

<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")); 

        }); 
       } 
      }); 
     } 
    }); 

從這個代碼,你可以得到鏈接的下拉菜單創建相同的AJAX調用。它爲你工作。

+0

什麼是行動準則。我試過這個,但它不起作用。我試着用行動'public function getSubcategories() {id} = $ this-> request-> data('id'); $ subcategories = $ this->子類別 - > find('all',[ 'conditions'=> [ 'category_id'=> $ id ] ]); echo json_encode($ subcategories); }' –

+0

替換查找與列表功能,並嘗試...其工作 –

+0

感謝它的工作。我錯過的是$('