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

Question

我在 cakephp3.7 中使用 javascript onchange 事件侦听器时遇到问题。 事实上，我有一个使用 cakephp3.7 构建的电子商务 Web 应用程序运行良好。现在我想通过动态加载卖家根据卖家选择的产品的类别填写的额外字段来增强网站中的销售提交表单。这意味着，如果卖家从类别输入字段中选择electronic，则现在将显示CSS 中以前样式为display:none 的电子exta 字段。 电子附加字段如下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 option触发的额外输入表单的动态加载。

**

• 第一次编辑

**

就像我在 cmets 中所说的那样，我简化了问题以使其易于理解。完整的上下文是我有 2 个标准字段 category 和 subcategory。当用户选择一个类别时，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")']); 
                                               ?>

并且选择子类别后，相关的额外表单没有出现，但是如果我在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 在他说“子类别根本不会显示”时获得了很好的体验。 事实上，在 2 天后，当努力追查真正的问题时，

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

突然间，整个应用开始出现异常，

• 子类别不再显示

• 我为动画广告制作的基于 jQuery 的动画代码 网站前端也变得奇怪了。

这些都让我想到了 jQuery 的问题，而且确实是真正的问题。我正在使用 3 个不同版本的 jQuery，所有 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

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

最终，这不是我们是否仍然可以将enchange事件与cakephp版本3表单帮助器一起使用的问题，而是关于jquery在ajax代码中使用正确的$变量来获取子类别的问题，它没有屈服。