2011-09-12 2 views
1

사용자가 국가를 선택하고 도시 필드가 업데이트 된 Grails site example 코드를 사용하여 ajax select를 구현했습니다. Prototype 대신 jQuery를 사용하고 있습니다.Grails에서 새로 고침하지 않는 Ajax 선택 선택

새 국가를 선택한 후에도 도시 필드는 변경되지 않지만 사용자가 도시 선택을 클릭하면 새 도시 만 표시되고 사용자는 그 중 하나를 선택할 수 있습니다.

도시 선택 목록이 업데이트되고 있지만 현재 표시된 값은 자동으로 업데이트되지 않습니다.

<g:javascript> 
    function updateCity(data) { 
     if (data) { 
      var rselect = document.getElementById('city') 

      var l = rselect.length 

      while (l > 0) { 
       l-- 
       rselect.remove(l) 
      } 

      for (var i = 0; i < data.length; i++) { 
       var tee = data[i] 
       var opt = document.createElement('option'); 
       opt.text = city.name 
       opt.value = city.id 
       try { 
        rselect.add(opt, null) // standards compliant; doesn't work in IE 
       } 
       catch(ex) { 
        rselect.add(opt) // IE only 
       } 
      } 
     } 
    } 
    window.onload = function() { 
     var zselect = document.getElementById('city') 
     var zopt = zselect.options[zselect.selectedIndex] 
     ${remoteFunction(
      action: "ajaxGetCityJSON", 
      params: "'id=' + zopt.value", 
      onSuccess: "updateCity(data)")} 
     } 
</g:javascript> 
+0

위대한 질문이지만, 스타일에 따라, 나는 모든 * 프로그래밍 언어에서 변수로 소문자 'L'을 사용하지 않을 것입니다. 많은 폰트에서 l과 1의 차이를 식별하는 것은 꽤 어렵습니다. 1 = l, even | 그리고 L과 1 '1 = l' – avgvstvs

+0

당신은 시도 할 수 있습니다이 aproach [http://stackoverflow.com/questions/17450294/grails-select-remotefunction-not-working][1] [ 1] : http://stackoverflow.com/questions/17450294/grails-select-remotefunction-not-working –

답변

0

당신이 도시를 선택 목록에 새로운 옵션에 추가 한 후 다음 줄을 추가합니다 : 여기

 <div data-role="fieldcontain"> 
      <label for="country">Country</label> 
      <g:select 
        optionKey="id" optionValue="name" name="country" id="country" 
        from="${com.TourneyCard.Country.list(sort:'name')}" value="${homeCountry.id}" 
        onchange="${remoteFunction(
         action:'ajaxGetCityJSON', 
         params:'\'id=\' + escape(this.value)', 
         onSuccess:'updateCity(data);')}"> 
      </g:select> 
     </div> 

     <div data-role="fieldcontain"> 
      <label class="ui-select" for="city">City</label> 
      <g:select name="city" id="tee" data-native-menu="true" 
         optionKey="id" optionValue="name" from="${homeCities}"> 
      </g:select> 
     </div> 

는 자바 스크립트입니다 :

뷰입니다.

rselect.selectedIndex = 0

해야 목록 내의 선택된 옵션을 재설정 사용자 개입없이리스트를 다시 표시하는 브라우저 강제.

+0

selectedIndex 값을 설정하면 선택한 값이 변경되지만 여전히 디스플레이가 새로 고쳐지지 않습니다. 예를 들어, selectedIndex가 1로 설정되고 select 필드를 터치하면 항목 1이 이미 0 대신 선택되지만 필드를 건드리지 않고 이전 값 중 하나를 표시합니다. – SeattleStephens

관련 문제