问cakephp 3中的侦听器有什么替代方案？
EN

Stack Overflow用户

提问于 2020-04-12 06:54:03

回答 1查看 640关注 0票数 0

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

使用事件侦听器的类别输入字段如下所示，应该调用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>

已经三天了，因为我不知道我错过了什么。因此，如何在cakephp3.7中实现由所选选项触发的额外输入表单的动态加载。

第一编辑

正如我在评论中所说，我简化了这个问题，使之可以理解。完整的上下文是，我有两个标准字段category和subcategory。当用户选择一个类别时，AJAX字体会向用户显示一个可供选择的子类别列表。My 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实际上正在接收像extraForm(s1, s2)这样的2个参数。这才是我真正的背景。

我真的被困在这里了。任何帮助都是非常感谢的，谢谢。

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

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();
            }
        }

提前谢谢，致以最诚挚的问候！

ajax

cakephp

onchange

cakephp-3.7

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-30 05:59:11

不知道真正的问题是什么，总是让人望而生畏，因为这不是我第一次尝试使用ajax和cakephp。在Greg 上，当他说“子类别根本不会显示”时，就能证明他有很好的经验。事实上，两天后，当我努力寻找真正的问题时，就开始了，

我清空了缓存，
我删除了浏览器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