0

onchange在 cakephp3.7 中使用 javascript 事件监听器时遇到问题。事实上,我有一个使用 cakephp3.7 构建的电子商务 Web 应用程序运行良好。现在我想通过动态加载卖家根据卖家选择的产品类别填写的额外字段来增强网站中的销售提交表单。这意味着,如果卖家从类别输入字段中进行选择,那么之前在 CSS 中的 style :electronic的电子 exta 字段现在将被显示。电子附加字段如下:displaynoneid=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如下所示,extraForm()应该调用 javascript 函数,但它没有调用,并且存在问题:

<?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触发的额外输入表单的动态加载呢?

**

  • 第一次编辑

**

就像我在评论中所说的那样,我简化了问题以使其易于理解。完整的上下文是我有 2 个标准字段categorysubcategory. 当用户选择一个类别时,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中手动更改displaybloc,它确实显示,这意味着javascript函数没有调用onchange事件,我什至使用onselect但仍然没有它。并且 javascript 函数 extraForm 实际上接收 2 个参数,例如extraForm(s1, s2). 这是我的真实背景。

我真的被困在这里了。任何帮助都非常感谢,在此先感谢。

- 根据格雷格的要求进行编辑: 根据格雷格的评论,这是我生成子类别列表的蛋糕代码。我不知道所有这些细节都是必要的,因为我认为这是关于 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();
            }
        }

在此先感谢,最好的问候!

4

1 回答 1

0

不知道真正的问题是什么总是非常令人生畏,因为这不是我第一次尝试使用ajaxcakephp。当Greg Schmidth“子类别根本不会显示”时,我可以证明他的丰富经验。事实上,两天后,在努力追查真正的问题时,

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

突然间,整个应用程序开始出现意外行为,

  • 子类别不再显示

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

这些都让我想到了 jQuery 问题,而这确实是真正的问题。我正在使用 3 个不同版本的 jQuery,所有 3 个版本都是我的项目所必需的。3 个 jquery 版本默默地冲突,并没有给我任何线索来解决问题所在。现在我知道这是一个 jquery 问题,我使用了此链接中描述的 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的其他问题也对我有所帮助。

最终,这不是我们是否仍然可以使用 cakephp 版本 3 表单助手的 enchange 事件的问题,而是关于 jquery 在 ajax 代码中使用正确的$变量来获取子类别的问题,它没有产生。

于 2020-04-30T13:59:11.143 回答