cakephp 3 中 javascript onchange 事件侦听器的替代方案是什么？

Question

我在使用 cakephp3.7 中的 javascript onchange 事件侦听器时遇到问题。事实上，我有一个用 cakephp3.7 运行构建的电子商务 Web 应用程序很好。现在我想通过动态加载卖家根据卖家选择的类别产品填写的额外字段来增强网站中的销售提交表单。这意味着，如果卖家从类别输入字段中选择 electronic，那么之前 display:none 在 CSS 中的电子扩展字段现在将是显示。电子附加字段如下id=elctronic:

<div id="electronic">
<?php echo $this->Form->control('subcategorie',['label'=>'choose sub category', 'class'=>'form-control', 'option'=>['Computer','Phone','Multimedia'],'empty'=>'choose'); ?>
<?php echo $this->Form->control('brand',['class'=>'form-control', 'placeholder'=>'the brand']); ?>
<?php echo $this->Form->control('model',['class'=>'form-control', 'placeholder'=>'the model']); ?>
</div>

然后如果产品是关于 clothes 例如，electronic 输入字段将被隐藏，衣服额外字段将显示为 id=clothe 如下：

   <div id="clothe">
    <?php echo $this->Form->control('Gender',['label'=>'What gender?', 'class'=>'form-control', 'option'=>['Males','Females'],'empty'=>'choose'); ?>
    <?php echo $this->Form->control('Size',['class'=>'form-control', 'placeholder'=>'Size']); ?>
    <?php echo $this->Form->control('model',['class'=>'form-control', 'placeholder'=>'the model']); ?>
    </div>

使用 onchange 事件侦听器的 category 输入字段如下所示，应该调用 javascript 函数 extraForm() , 但它没有，存在问题：

<?php echo $this->Form->control('category',['id'=>'categ','label'=>'choose category', 'class'=>'form-control', 'options'=>['electronics','clothes'],'empty'=>'choose'),'onchange'=>'extraForm("categ"); ?>

然后在 ProductsController 的 add() 方法的布局中，我将 extraForm() 函数设置如下：

<script>
function extraForm(s1){
 var s1=documentgetElementById(s1);
 var s2=documentgetElementById("electronics");
 var s3=documentgetElementById("clothes");
  if(s1.value == "electronics"){
    s2.style.display = "bloc"
} else {
    s3.style.display = "bloc"
}
}
</script>

现在已经三天了，因为我不知道我错过了什么。 Yesterday I searched through the net and there were people saying that event listener such as onchange, onclick and onselect event listeners are deprecated for cakephp 3 and I don't understand how. 那么如何在cakephp3.7中实现由selected选项触发的额外输入表单的动态加载。

**

第一次编辑

**

正如我在评论中所说，我简化了问题以使其易于理解。完整的上下文是我有 2 个标准字段 category 和 subcategory。当用户 select 一个类别时， AJAX 函数会向用户显示一个子类别列表以供选择。 我的AJAX是：

$(document).ready(function(){

$('#getSubCat').change(function(e){

    $.ajax({
        type: "POST",
        url:  "/products/getsubsaterogie",
        data: {categ: $(this).find('option:selected').text()},
        dataType: 'json',
        cache: false,
        headers : {
            'X-CSRF-Token': $('[name="_csrfToken"]').val()
        },
        success: function(data){
            console.log(data);
            let subcat = $('#subcategories')

            for (let sc of data) {
                console.log(sc.subcategorie)
                $('<option />', {value: sc.subcategorie_id, text: sc.subcategorie}).appendTo(subcat);
            }
        }
    });

    e.preventDefault();
})

}) 类别输入字段是：

  <?php echo $this->Form->control('categorie_id', ['id'=>'getSubCat', 'options' => $categories, 'label' => __("What category ?"), 'class'=>'form-control', 'empty' => '(choose)']); 
                                               ?>

用户选择类别后，AJAX 从数据库中获取的子类别列表会很好地显示在此表单输入中，这就是 onchange 设置为调用 extraForm() 函数，但不：

 <?php echo $this->Form->control('subcategorie_id', ['id'=>'subcategories', 'label' => __("What subcategory ?"), 'class'=>'form-control', 'options'=> [],'empty' => '', 'onchange' => 'myFormShow("getSubCat","subcategories")']); 
                                               ?>

并且在子类别 selected 之后，相关的额外表格没有出现，但是如果我在 CSS 中手动将 display 更改为 bloc，它会显示，这意味着 javascript 函数没有调用 onchange 事件，我什至使用了 onselect 但仍然没有。 javascript 函数 extraForm 实际上接收 2 个参数，如 extraForm(s1, s2)。这是我的真实背景。

我真的被困在这里了。非常感谢任何帮助，提前致谢。

- 根据格雷格的要求进行编辑： 根据 Greg 的评论，这是我生成子类别内列表的蛋糕代码。我不知道所有这些细节都是必要的，因为我认为这是关于 javascript 事件监听器的 cakephp 3 问题。

public function getsubsaterogie(){
            if($this->request->is('ajax')){
                $d = $this->request->getData();
                $subcat = '';
                $cat = TableRegistry::get('Categories')->find()
                ->where(['categorie' => $d['categ']])
                ->select('id')
                ->first();

                if(!empty($cat)){
                    $subcat = TableRegistry::get('Subcategories')->find()
                    ->where(['categorie_id' => $cat->id])
                    ->all();
                }

                echo json_encode($subcat);
                exit();
            }
        }

在此先致谢，此致！

Answer 1

不知道真正的问题是什么总是令人望而生畏，因为这不是我第一次尝试使用 ajax 和 cakephp。 我可以证明 Greg Schmidth 很棒的经验，他说 "the subcategories won't display at all"。 事实上，2 天后，当努力找出真正的问题，

我清空了缓存，
我删除了浏览器 cookie

然后整个应用突然开始出现异常行为，

子类别不再显示
我为动画广告制作的基于jQuery的动画代码网站前端也变得奇怪了。

这些都让我想到了jQuery的问题，确实是真正的问题。我正在使用 jQuery 的 3 个不同版本，所有 3 个版本都是我的项目所必需的。 3 jquery 版本无声地相互冲突，没有给我任何解决问题的线索。现在我知道这是一个 jquery 问题，我使用 this link

中描述的 jQuery noConflict 方法

 <?= $this->Html- >script('http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js') ?>
    <?= $this->Html->script('lecker/ajax/getSubCategorie.js') ?>
    <script>
        var jQuery_1_12 = $.noConflict(true);
    </script>
<?= $this->Html->script('https://code.jquery.com/ui/1.12.1/jquery-ui.js') ?>
// This for the second jquery version

描述并不像看起来那么简单，但 Whosebug 上的其他问题也对我有所帮助。

最终，这不是我们是否仍然可以使用 cakephp 版本 3 表单助手的 enchange 事件的问题，而是 [=55 使用的正确 $ 变量的问题=] 在 ajax 获取子类别的代码中，它没有屈服。

cakephp 3 中 javascript onchange 事件侦听器的替代方案是什么？

What alternative for javascript onchange event listener in cakephp 3?

javascript

ajax

cakephp

onchange

cakephp-3.7