我正在使用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不会立即生效。当我再次在下拉列表中更改电台时,一切正常。
我需要补充的是,下拉列表不仅适用于更改,还适用于最初加载电台的情况?
答案 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();
});