Symfony 2.0使用JS更新选择选项?

时间:2012-05-23 16:18:59

标签: ajax symfony dynamic-forms

我一直在谷歌上搜索数小时但令人惊讶的是我没有找到关于该主题的任何话题。

我有以下表格

class propertyType extends AbstractType
{

    public function buildForm(FormBuilder $builder, array $options)
    {

        $builder
            ->add('city')
            ->add('district', 'entity', array('class'=>'FlatShanghaidefaultBundle:district', 
                                   'property'=>'name',
                                   'query_builder' => function ($repository) {
                                   $qb = $repository->createQueryBuilder('district');
                                   $qb->add('where', 'city = :city');
                                   $qb->setParameter('city', 1);
                                   return $qb;

    }


    public function getName()
    {
        return 'property';
    }
}

当用户在表单中选择城市时,我希望区域选项能够动态更新并限制在该城市。使用Ajax还是JS? 什么是最佳做法?你知道关于那个主题的教程吗? 如果有人能把我放在正确的轨道上,那将会有很大的帮助..

谢谢!

3 个答案:

答案 0 :(得分:2)

查询构建器无法解决您的问题,您可以完全删除它。

在构建表单时运行该查询,一旦在浏览器上显示该表单,就需要使用javascript填充选项。

您可以将选项存储在javascript变量中,或者根据需要使用ajax从服务器中提取它们(您需要一个控制器来处理这些ajax请求)。

您可能希望使用一些jquery插件来处理select元素之间的级联逻辑,有几个可用:

至少还有我知道的这个Bundle:https://github.com/genemu/GenemuFormBundle,它有几个jquery插件可用的ajax字段类型。这可能会节省你编写ajax部分来处理数据,因为它内置了(无论如何,实现控制器可能更容易)。我没有试过这个,我不知道它是否有级联支持。

答案 1 :(得分:1)

Jbm对查询构建器是正确的。他的方法完全有效。

另一种选择可能是分配级联选择以支持自动完成字段。

假设您将国家/地区,城市和地区保存为实体并且它们之间存在关联,您甚至无需保存已选择的城市/国家/地区,因为您只需致电:

$district->getCity()->getCountry();

我已经为国家/城市选择实施了类似的事情,并将链接到主要涉及的文件。

首先,创建一个自定义表单类型来封装所有表单内容,它包含一个用于存储所选id的隐藏字段和一个用作自动完成逻辑输入的文本字段:

https://github.com/roomthirteen/Room13GeoBundle/blob/master/Form/LocationFieldType.php

然后主题表单类型:

https://github.com/roomthirteen/Room13GeoBundle/blob/master/Resources/views/Form/fields.html.twig

自动完成源的url作为数据属性传递,因此没有JS会抓住html代码。

最后但并非最不重要的是,必须实现JS功能:

https://github.com/roomthirteen/Room13GeoBundle/blob/master/Resources/public/jquery.ui.location-autocomplete.js

结果如下图所示,为清楚起见,国家名称将显示在城市名称后面的大括号中:

autocomplete is loading

-

我更倾向于使用级联选择这个解决方案,因为可以在一个步骤中选择实际值。

欢呼声 autocomplete has loaded and city has to be selected

答案 2 :(得分:0)

我自己在表格上做这件事。 我更改了一个字段(一个产品),并且更新了可以测量数量的单位。 我正在使用带参数的宏来更容易地调整它。

宏:

{% macro javascript_filter_unit(event, selector) %}
<script>
    $(function(){
        $('#usersection')
                .on('{{ event }}', '{{ selector }}', function(e){
                    e.preventDefault();
                    if (!$(this).val()) return;
                    $.ajax({
                        $parent: $(this).closest('.child_collection'),
                        url: $(this).attr('data-url'),
                        type: "get",
                        dataType: "json",
                        data: {'id' : $(this).val(), 'repo': $(this).attr('data-repo'), parameter: $(this).attr('data-parameter')},
                        success: function (result) {
                            if (result['success'])
                            {
                                var units = result['units'];
                                this.$parent.find('.unit').eq(0).html(units);   
                            }
                        }
                    });
                })
    });

</script>

{% endmacro %}

ajax返回一个数组:array(&#39; success&#39; =&gt; $ value,&#39; units&#39; =&gt; $ html)。您使用$ html代码并将其替换为您要更改的选择。 当然,需要修改ajax调用的javascript代码以匹配您的字段。

您可以像平常一样调用宏:

{% import ':Model/Macros:_macros.html.twig' as macros %}
{{ macros.javascript_filter_unit('change', '.unitTrigger') }}

所以我有两个参数:事件,通常是一个选择的变化。和一个选择器,其更改触发ajax调用。

我希望有所帮助。