Question

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

我有一个域 Station ，其中包含两个布尔值 hasroad 和 hasrail 。在车站控制器中我使用这种方法：

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

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

然后我有一个域流量，它链接到Station with

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>

以下是流量的 form.gsp 中 Stations 的下拉列表

    <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不会立即生效。当我再次在下拉列表中更改电台时，一切正常。

我需要补充的是，下拉列表不仅适用于更改，还适用于最初加载电台的情况？

Answer 1

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

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

务必更改

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

到

data: { stationid: $("#station").val()}

Answer 2

那是因为只有当电台内容发生变化时才进行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();
});

grails ajax使用表单并创建但不使用编辑

2 个答案: