2013-08-29 5 views
0

다른 Select가 변경되면 내용이 변경되는 Select가 있습니다.부트 스트랩이있는 Ajax.TbSelect2 (Yii)

$this->renderPartial("_townsselect", array('country'=>$country)); 

그것은 $의 _GET에서 $ 국가를 가져옵니다 변경 아약스에 이 작업을 수행하려면 내 컨트롤러에서 함수를 실행합니다. _townselect.php

$towns= $this->townsselect($country); 
$this->widget('bootstrap.widgets.TbSelect2', array(
    'name'=>'clienttown', 
    'asDropDownList' => true, 
    'data' => $towns 
)); 

townsselect

()는 구조화 된 배열을 생성 등 : $ 도시 [도시-ID] = 'TownName'

페이지가 정상적으로로드 $ country를 수동으로 기본값으로 설정 한 이전의 renderPartial도 실행합니다.

그래서 두 번 동일한 코드를 호출합니다. 그러나 페이지로드시 Tbselect2가 올바르게 표시됩니다 (올바른 스타일링, 검색 상자에 제공되는 js 지원 포함 ...). 아약스를 사용하면 표준 Select가 제한된 스타일링과 함께 사용됩니다. 실제로 생성 된 코드가 다른 :

결과 페이지로드 후 아약스 이후로만 선택이 발생

<div class="select2-container" id="s2id_clienttown" style="width: 220px"> 
    <a href="#" onclick="return false;" class="select2-choice" tabindex="-1"> 
     <span>Accrington</span> 
     <abbr class="select2-search-choice-close" style="display:none;"></abbr> 
     <div> 
      <b></b> 
     </div> 
    </a> 
    <div class="select2-drop select2-with-searchbox select2-drop-active select2-offscreen" style="display: block;"> 
     <div class="select2-search"> 
      <input type="text" autocomplete="off" class="select2-input" tabindex="-1"> 
     </div> 
     <ul class="select2-results"></ul> 
    </div>  
</div> 
    <select name="clienttown" id="clienttown" style="display: none;"> 
     <option value="Select">Select</option> 
    ... 
    </select> 
</div> 

.

임시 해결책

나는 어떤 형태로이 작업을 얻을 수 있었다. 전체 선택 상자를 다시 생성하는 대신 JQuery 코드를 변경하여 Select 안에 모든 옵션을 지우고 새 목록으로 다시 채 웁니다. 새 목록은 ajax에서 반환 한 JSON 문자열에서 가져옵니다. 이는 다음과 같이 처리됩니다 :

var towns = $.parseJSON(resp); 
$('#clienttown option:gt(0)').remove(); //remove all options, but leave default 'Select A Town' option 
var sel = $('#clienttown'); 
$.each(towns, function(id, town){ 
    sel.append($("<option></option>").attr("value", id).text(town)); 
}); 

나는 경우 여기를 넣었습니다이 비슷한 일을 달성하기 위해 노력하고 다른 사람 도움이됩니다.

아약스 이후 렌더링 할 때 yiibooster/bootstrap이 작동하지 않는 이유를 알고 싶습니다. 그리고 입력을 페이지로드에서 처음 렌더링하지 않으면이 솔루션이 작동하지 않으므로 작업을 수행 할 수있는 방법이 있습니다.

답변

0

나는 이것이 오래되었다는 것을 알고있다. 그러나 Ajax 렌더링을 사용하기 위해서는 다음을 시도해 보았다.

// Notice the ,false, true at the end of renderpartial 
$this->renderPartial("_townsselect", array('country'=>$country), false, true); 
+0

안녕하세요. 이제 새로운 프로젝트에 구글 하하에 대한 내 자신의 질문을 발견했다. 마지막 프로젝트에서 필자가 생각해 낸 해결책을 고수했다. 그 이후로 당신이 언급 한 솔루션을 시도했지만 스크립트 충돌을 일으키고 테마를 위반했습니다. 내 솔루션은이 새로운 프로젝트에 비록 내가 아약스를 통해 전체 선택을로드하려고 노력하고있어. – James

관련 문제