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

时间:2013-01-25 15:08:21

标签: jquery ajax grails

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

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

2 个答案:

答案 0 :(得分:0)

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

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

务必更改

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

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

答案 1 :(得分: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();
});