使用jquery填充依赖于php的下拉列表

7hiiyaii  于 2021-06-18  发布在  Mysql
关注(0)|答案(2)|浏览(410)

在phalcon框架中,我想填充依赖的下拉式类别列表。但我在代码中遇到了一些问题:

1. 在“选择类别列表”->“子类别列表”中显示:未定义(不使用值填充选项)

2. 如果数据库没有数据console.log显示:未定义变量:resdata in my controller

3. 如果选择值为“0”的类别,则不会再次禁用子类别列表我在代码中犯了什么错误?


[模块.php]

use Phalcon\Mvc\View;
use Phalcon\Mvc\View\Engine\Volt;

$di->setShared('view', function () use ($config){
    $view = new View();
    $view->setViewsDir(APP_PATH . $config->appB->viewsDir);

# Register Volt Template

    $view->registerEngines(array( 
    ".volt" => function($view, $di) use ($config) {
        $volt = new Volt($view, $di);
        $volt->setOptions(
            array(
                'compiledPath'      => APP_PATH . $config->appB->cacheDir,
                'compiledExtension' => '.php',
                'compiledSeparator' => '_',
                'compileAlways'     => true,
                'autoescape'        => false,
                'stat'              => true
            )
        );
    $compiler = $volt->getCompiler();
    $compiler->addFunction('strtotime','strtotime');

    return $volt;
    }
    ));            
    return $view;
});

[控制器]

public function entryAction()
{
        $formAction = 'backend/index/insert';
        $this->view->setVar('action',$formAction);
        $this->view->product_title = '';
        $this->view->product_price = '';
        $this->view->product_keyword = '';
        $this->view->product_image = '';
        $this->view->product_desc = '';
        $category = Categories::find();
        $this->view->setVar('categories',$category);                       
        $this->view->pick("index/entry");
}

public function getSubcategoryAction()
{ 
    $id = $this->request->getPost('id');
    $data = Subcat::findBycategory_id($id); 
    $resData = array();    
    foreach($data as $result)
    {
        $resData[] = array('id' => $result->id, 'category_id' => $result->category_id, 'subcategory' => $result->subcategory_name);
    }
    echo(json_encode($resData));       
    //$this->view->setVar('subcategory',$resData);
}

[入口电压]

Category:<select name="category" id="category">
    <option value="0">Choose Category ...</option>
{% for category in categories %}
    <option value="{{category.id}}">{{category.categoryname}}</option>
{% endfor %}
</select><br/>
sub-Category:<select name="subcategory" id="subcategory" disabled="disabled"><option value="0">Choose Sub-Category ...</option></select>
<br/>
    Products:<select name="products" id="products" disabled="disabled"><option value="0">Choose a Product ...</option></select>
<br/>

[jquery]

$("select[name='category']").on("change", function(e){
    e.preventDefault();
    var value = $(this).val();
    $("select[name='subcategory']").attr("disabled", false); 
    $.ajax({
        type: "POST",
        url: "http://localhost/shopping/backend/index/getSubcategory",
        data:'id='+value,       
    }).done(function(response){
        $("#subcategory").not(":first").remove();
        response = JSON.parse(response);
        response.forEach(function(value){               
            $('#subcategory').append('<option value="'+value.id+'">'+value.subcategory+'</option>');
        });

    }).fail(function(){
            console.log('error: Please reload page and try again!');
    }).always(function(){
            console.log('Complete:');
    });
});
3ks5zfa0

3ks5zfa01#

按照这个更新你的代码。。。
[jquery]

$("select[name='category']").on("change", function(e){
    e.preventDefault();
    var value = $(this).val();
    if(value === '0'){$("select[name='subcategory']").attr("disabled", true); $("select[name='products']").attr("disabled", true);}else{$("select[name='subcategory']").attr("disabled", false);} 
    $.ajax({
        type: "POST",
        url: "http://localhost/shopping/backend/index/getSubcategory",
        data:'id='+value,       
    }).done(function(response){
        $("#subcategory").find('option').not(":first").remove();    
        $("#products").find('option').not(":first").remove();
        response = JSON.parse(response);
        response.forEach(function(value){
            $('#subcategory').append('<option value="'+value.id+'">'+value.subcategory+'</option>');
        });
    }).fail(function(){
            console.log('error: Please reload page and try again!');
    }).always(function(){
            console.log('Complete:');
    });
});
x3naxklr

x3naxklr2#

请注意,在控制器的第一行中,您禁用了视图,因此永远不会处理volt。当您现在工作时,jquery只接收json结果,因此您将附加json而不是volt。您必须选择一个路径:或者使用volt,在这种情况下,您必须删除两个操作中的第1行并使用参数处理视图,或者您继续向jquery发送json数据,并将其正确设置为处理json响应(检查此答案)
就你而言, getSubcategoryAction() 看起来像:

public function getSubcategoryAction()
{ 
    //$this->view->disable();  //Replaced by: 
    $this->view->setRenderLevel(
        View::LEVEL_ACTION_VIEW
     );        
    $id = $this->request->getPost('id');
    $data = Subcat::findBycategory_id($id);   
    foreach($data as $result)
    {
        $resData[] = array('id' => $result->id, 'category_id' => $result->category_id, 'subcategory' => $result->subcategory_name);
    }

    $this->view->setVar('categories', $resData);

}

这是假设您已将volt设置为di中的渲染引擎,并且volt模板对应于../app/views/index/getsubcategory.phtml,即:

<?php

use Phalcon\Mvc\View;
use Phalcon\Mvc\View\Engine\Volt;

// Register Volt as a service
$di->set(
    'voltService',
    function ($view, $di) {
        $volt = new Volt($view, $di);

        $volt->setOptions(
          [
            'compiledPath'      => '../app/compiled-templates/',
            'compiledExtension' => '.compiled',
          ]
        );

       return $volt;
    }
);

// Register Volt as template engine
$di->set(
    'view',
    function () {
        $view = new View();

        $view->setViewsDir('../app/views/');

        $view->registerEngines(
          [
            '.volt' => 'voltService',
          ]
        );

        return $view;
    }
);

volt注册码复制自:https://docs.phalconphp.com/en/3.4/volt 根据应用程序结构修改目录。

相关问题