0

トラフィック プロジェクトに grails を使用しています。グレイルズは初めてです！

hasroadとhasrailの 2 つのブール値を持つドメインStationがあります。ステーションコントローラーでは、次の方法を使用します。

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

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

次に、ステーションにリンクされているドメイントラフィックがあります

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にもあるステーションのドロップダウンです。

    <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 関数を別の関数に入れます。

次に、onchange ハンドラーとして使用するだけでなく、document.ready() からその関数を呼び出します。

必ず変更してください

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

に

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

これは、ステーションのコンテンツが変更されたときにのみ ajax 呼び出しを行っているためです。このイベントは、ページの読み込み時には発生しません。これを行うには、関数でロジックをラップし、変更内で、ページの読み込み時に 1 回呼び出します。

$(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 に答える