0

我正在使用 grails 进行交通项目。这是我第一次使用grails！

我有一个带有两个布尔值h​​asroad和hasrail的域站。在站控制器中，我使用这种方法：

def hasroadhasrail() {
    def station = Station.get(params.stationid)

    def response = ['hasroad': station?.hasroad, 'hasrail': station?.hasrail]
    render response as JSON
}

然后我有一个域流量，它与 Station 相关联

Station station

有很多数据。如果没有道路/铁路数据，输入字段将被禁用并显示为灰色。

我正在使用jquery 1.8.0

流量的_form.gsp中的ajax 调用如下所示：

    <script>
        $(document).ready(function(){
            // correct for create
            $("input.data1").prop('disabled', ${trafficInstance?.station?.hasroad ?: true});
            $("input.data2").prop('disabled', ${trafficInstance?.station?.hasrail ?: true});

            $("#station").change(function() {
                $.ajax({
                      type: "POST",
                      url: "${createLink(controller: 'station', action: 'hasroadhasrail')}",
                      data: { stationid: $(this).val()}
                    }).done(function( response ) {
                        if (response.hasroad) {
                            $("input.data1").prop('disabled', false);
                            $('input.data1').css('background-color', 'white');
                        } 
                        else {
                            $("input.data1").prop('disabled', true);
                            $('input.data1').css('background-color', 'grey');
                        }

                        if (response.hasrail) {
                            $("input.data2").prop('disabled', false);
                            $('input.data2').css('background-color', 'white');
                        } 
                        else {
                            $("input.data2").prop('disabled', true);
                            $('input.data2').css('background-color', 'grey');
                        } 
                    });
            });
        })
    </script>

这里是Stations的下拉菜单，格式为_ form.gsp of traffic

    <li class="fieldcontain ${hasErrors(bean: trafficInstance, field: 'station', 'error')} required"> <span class="lbl">Station</span>
        <g:select id="station" name="station.id" from="${trafproj.Station.list()}" optionKey="id" required="" value="${trafficInstance?.station?.id}" class="many-to-one" noSelection="['':'-Choose station-']"/>
    </li>

当我创建新的交通数据时，一切都很完美。我从下拉列表中选择了一个站点，例如，如果该站点的hasroad为 false，则输入字段将被禁用并显示为灰色。以上所有代码都很好用！

现在我的问题：如果我编辑以前创建的流量，一个站点已经加载到站点下拉列表中。没有变化，因此 ajax 不能立即工作。当我再次更改下拉菜单中的电台时，一切正常。

我要补充的是，下拉菜单不仅适用于更改，而且还适用于最初加载站点时？

4

2 回答 2

0

将 ajax 函数放入单独的函数中，而不是匿名的内联函数。

然后从 document.ready() 调用该函数，并将其用作 onchange 处理程序。

一定要改变

data: { stationid: $(this).val()}

到

data: { stationid: $("#station").val()}
于 2013-01-25T15:20:33.923 回答
0

那是因为您只有在您的电台内容发生变化时才进行 ajax 调用。页面加载时不会触发此事件。为此，请将逻辑包装在一个函数中，并在更改内部调用，并在页面加载时调用一次。

$(document).ready(function(){
  ...
  function getStationData() {
    $.ajax({
                  type: "POST",
                  url: "${createLink(controller: 'station', action: 'hasroadhasrail')}",
                  data: { stationid: $(this).val()}
                }).done(function( response ) {
                    if (response.hasroad) {
                        $("input.data1").prop('disabled', false);
                        $('input.data1').css('background-color', 'white');
                    } 
                    else {
                        $("input.data1").prop('disabled', true);
                        $('input.data1').css('background-color', 'grey');
                    }

                    if (response.hasrail) {
                        $("input.data2").prop('disabled', false);
                        $('input.data2').css('background-color', 'white');
                    } 
                    else {
                        $("input.data2").prop('disabled', true);
                        $('input.data2').css('background-color', 'grey');
                    } 
                });
  }

  $('#station').change(function(){
    getStationData();
  });

  //call this first time when page loads.
  getStationData();
});
于 2013-01-25T15:21:57.087 回答