[Помогите] Динамический вывод дочерних категорий

Здравствуйте, при выборе из select какой-нибудь категории пробую вывести ее подкатегории с помощью $.ajax.
tpl-файл

Код:

<div class="form-group">
                <label class="col-sm-2 control-label" for="input-category"><?php echo $entry_main_category; ?></label>
                <div class="col-sm-10">
                  <select id="maincategoryid" name="main_category_id" class="form-control">
                    <option value="*" selected="selected"><?php echo $text_none; ?></option>
                    <?php foreach($categories0 as $category0) { ?>
                    <option value="<?php echo $category0['category_id']; ?>"><?php echo $category0['name']; ?></option>
                    <?php } ?>
                  </select>
                </div>
              </div>
                <div class="col-sm-12">
                  <div class="well well-sm" id='caeg' style="min-height: 150px;max-height: 500px;overflow: auto;">
 
                  </div> 
                </div> 
<script type="text/javascript">
    $(document).ready(function(){
    $('#maincategoryid').on('change',function(){
        var dataId = this.options[this.selectedIndex].value;
       $.ajax({
              url: 'index.php?route=catalog/course/coursetocategory&token=<?php echo $token; ?>&course_id=' + this.value,
              dataType: 'json',
               success: function(json) {
               $('#caeg').html(json);
          }
  });
    });
});
</script>

модель

Код:

    public function getCourseToCategory($parent_id){
        $query = $this->db->query("SELECT c.category_id, cd.name FROM " . DB_PREFIX . "category_description cd LEFT JOIN " . DB_PREFIX . "category c ON cd.category_id=c.category_id  WHERE c.parent_id = '" . (int)$parent_id . "'");
        return $query->rows;
    }

контроллер

Код:

    public function coursetocategory() {
        $json = array();
      if (isset($this->request->get['course_id'])) {
        $course_id = (int) $this->request->get['course_id'];
      }
      if ($course_id > 0) {
          $this->load->model('catalog/course');
          $catcourse = $this->model_catalog_course->getCourseToCategory($course_id);
          foreach($catcourse as $catc){
             $json[]=array(
                 'cat_id'=>$catc['category_id'],
                 'cat_name'=>$catc['name']
                 );
             
          }
        $this->response->addHeader('Content-Type: application/json');
        $this->response->setOutput(json_encode($json));
      }
     
}

Вывести ничего не получается, ошибок не дает. Но на каждое изменение селекта получаю такое предупреждение: [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952. Посоветуйте пожалуйста как сделать правильно?

 

А у вас в Опенкарте установлен только 1 язык? Ибо эта функция по идее должна вернуть строк = кол-во подкатегорий * кол-во языков

PHP:

 public function getCourseToCategory($parent_id){
       $query = $this->db->query("SELECT c.category_id, cd.name FROM " . DB_PREFIX . "category_description cd LEFT JOIN " . DB_PREFIX . "category c ON cd.category_id=c.category_id  WHERE c.parent_id = '" . (int)$parent_id . "'");
       return $query->rows;
   }

по идее надо бы добавить

PHP:

... AND cd.language_id = $this->config->get('config_language_id');

Ну и как уже сказал Dotrox, json возвращается у вас в виде объекта-массива, а не html.
Вам нужно сначала собрать html, а потом добавлять куда надо.

Код:

html = '';
for(var category of json) {
    html += '<div data-id="' + category['category_id'] + '">' + category['name'] + '</div>';
}
$('#caeg').html(html);

Ну или по аяксу принимать уже готовый html. Если вы изучите js-скрипты в файле checkout.tpl я думаю вы разберетесь как это сделать.

Что-то типа того!

 

Спасибо за помощь! Я попробовал сделать так.

Код:

<script type="text/javascript">
$(document).ready(function(){
    $('#maincategoryid').on('change',function(){
        var dataId = this.options[this.selectedIndex].value;
       $.ajax({
              url: 'index.php?route=catalog/course/coursetocategory&token=<?php echo $token; ?>&course_id=' + this.value,
              dataType: 'json',
               success: function(json) {
                var cat=[];
                 for(var i=0; i<json.length; i++){
                  cat.push('<p>'+json[i]['cat_name']+'</p>');
            }
            $('#caeg').html(cat);
          }
  });
    });
});
</script>

Получается json как массив надо перебрать и вывести значения.