2012-05-23 1 views
3

나는 몇 시간 동안 인터넷 검색을 해왔지만 놀랍게도 그 주제에 대한 주제는 찾지 못했습니다.Symfony 2.0은 JS 옵션을 업데이트합니까?

나는 사용자가 양식에서 도시를 선택하면, 나는 지역의 옵션을 동적으로 업데이트하고 도시로 제한하려면 다음과 같은 양식

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 사용? 모범 사례는 무엇입니까? 그 주제에 대한 자습서를 알고 있습니까? 누군가 나를 올바른 길로 인도 할 수 있다면, 많은 도움이 될 것입니다 ..

고마워요!

답변

2

쿼리 작성 도구로 문제가 해결되지 않을 수도 있지만 모두 제거 할 수 있습니다.

양식이 빌드되면 쿼리가 실행됩니다. 일단 브라우저에 추가하면 javascript를 사용하여 옵션을 채워야합니다.

옵션을 자바 스크립트 변수에 저장하거나 필요에 따라 서버에서 가져올 수 있습니다 (이러한 ajax 요청을 처리하기 위해서는 컨트롤러가 필요합니다).

당신은 아마 선택 요소 사이의 계단식 로직을 처리하기 위해 일부 jQuery 플러그인을 사용하기를 원할 것입니다

, 거기에 사용할 수 커플 :이 하나를 사용

또한 적어도이 번들이가 내가 아는 : https://github.com/genemu/GenemuFormBundle, ajax 필드 유형을 여러 jquery 플러그인에 사용할 수 있습니다. 이렇게하면 내장 된대로 Ajax 부분을 작성하여 데이터를 처리하는 시간을 절약 할 수 있습니다. 어쨌든 컨트롤러를 구현하는 것이 더 쉽습니다. 나는 이것을 시도하지 않았으며 그것이 계단식으로 지원되는지는 모른다.

+0

안녕하세요, JBM, 방금 ​​내가 필요로하는 것을 정확하게 받았습니다! 고마워, 내 하루 더 행복하게 될거야 ;-) 내가 StackOverflow에 새로운 오전으로 귀하의 답변을 유용한, 미안으로 표시 할 수 없습니다. 동정. 좋은 하루 되세요 !! – 123pierre

1

Jbm이 바로 쿼리 작성기입니다. 그리고 그의 접근 방식은 완벽하게 유효합니다.

또 다른 옵션은 캐스케이드 선택에 자동 완성 필드를 사용하는 것입니다. 당신은 그냥 호출 할 수 있기 때문에

당신이 기관과 국가, 도시 및 지역을 저장하고 그들 사이의 관계를 가지고 있다고 가정하면, 당신도/국가가 선택되어있는 것을 도시 저장할 필요가 없습니다

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

나는 국가/도시 선택을 위해 비슷한 것을 구현했으며 여기에 관련된 주요 파일에 링크 할 것이다.그런 다음

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

:

는 모든 형태의 물건을 캡슐화하는 사용자 지정 양식 유형을 작성, 선택된 ID와 자동 완성 로직 입력으로 제공 할 수있는 텍스트 필드를 저장하는 숨겨진 필드를 먼저 포함

테마 형태 유형 : 데이터가 그래서 JS는 html 코드를 smutching되지 않습니다 속성으로

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

자동 완성 소스의 URL이 전달됩니다.

마지막으로 최소한의 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

+0

또한 매우 좋습니다. 감사!! 이제이 페이지를 북마크에 추가하고 모든 것을 구현해야합니다. 고마워! – 123pierre

+0

새로운 값을 허용하려는 경우이 옵션을 사용하는 것이 좋습니다 (DataTransformer와 같이 서버 측을 조정해야합니다). 이 접근법에서 내가 가진 유일한 문제는 큰 데이터 세트 (3 레벨 선택을 가짐)가 조합 폭발로 인해 목록이 빠르게 커지고 일부 상황에서는 사용할 수 없게 될 수 있다는 것입니다 (사용자 기본 설정에도 많이 달려 있음). – Jens

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 %} 

아약스 배열을 반환 어레이 ('성공'=> $ 값 '부'=> $ HTML). $ html 코드를 사용하여 변경하려는 선택 위치에 넣습니다. 물론 아약스 호출의 자바 스크립트 코드는 필드와 일치하도록 수정해야합니다.

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

그래서 내가 두 개의 인수가 있습니다 : 이벤트, 선별 종종 변화

당신은 당신이 일반적으로 할 것 같은 매크로를 호출합니다. 변경자가 ajax 호출을 트리거하는 셀렉터 등이 있습니다.

도움이 되었기를 바랍니다.

관련 문제