Ajax-управляемый выбор в Grails не обновляет выбор - PullRequest
Новая
       15

Ajax-управляемый выбор в Grails не обновляет выбор

1 голос
/ 12 сентября 2011

Я реализовал ajax select, используя пример сайта Grails , где пользователь выбирает страну и поле города обновляется.Я использую jQuery вместо Prototype.

После выбора новой страны поле города не меняется, но когда пользователь нажимает на выбранный город, он показывает только новые города, и пользователь может выбрать одиниз них.

Список выбора города обновляется, но текущее отображаемое значение не обновляется автоматически.

Это представление: 

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

Вот код JavaScript: 

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

1 Ответ

0 голосов
/ 13 сентября 2011

Добавьте следующую строку после добавления новых параметров в список выбора города.

rselect.selectedIndex = 0

Этот должен сбросить выбранную опцию в списке и заставить браузер повторно отображать список без вмешательства пользователя.

...