1

私はこの select:elements の古典的な機能を実装しようとしていますが、Lift を使用してこの他の select:selection に依存します。たとえば、国を選択し、選択した国の可能な状態を取得します。

私が直面している問題は、select 要素の onchange 内にある「this.myForm.submit()」が ajax リクエストを起動していないことです。入力タイプ「送信」を使用すると、完全に機能します。

この動作は Lift フレームワークに関連していますか? Lift ライブラリを使用してこの種の機能を実装するより良い方法はありますか?

関連する切り取られたコード:

"name=distributionPoints" #> SHtml.select(distributionPoints, Empty, selectedDistributionPoint = _, "id" -> "the_distributionPoints") &
        "name=devices" #> (SHtml.select(devices, Empty, selectedDevice = _, "id" -> "the_devices")  ++ SHtml.hidden(process))

ビューのhtml:

<form class="lift:form.ajax">
<select name="distributionPoints" id="the_distributionPoints" onchange="submit()">
                    <option></option>
                </select>
                <br/>
                Device:
                <select name="devices" id="the_devices">
                    <option></option>
                </select>
</form>

レンダリングされた HTML:

    <form id="F391649920812YBACEZ" action="javascript://" onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+&quot;F391649920812YBACEZ&quot;).serialize(), null, null, &quot;javascript&quot;);return false;">
                <div>  
Punto de distribución:
                <select onchange="submit()" id="the_distributionPoints" name="F630704816482OLP514"></select>
                <br />              
                    Equipo:
                    <select name="F391649920817BLRJW5" id="the_devices"></select><input type="hidden" name="F391649920818HPS35E" value="true" />
                    <br />

                </div>
            </form>

[編集]

私はついに解決策を得ました。Chris が述べたように、selects の代わりに ajaxSelect を使用し、setHtml を使用する代わりに、まさに探していたものを実行する JsCmds.ReplaceOptions というメソッドがあります。

4

1 に答える 1

2

Ajax 送信を使用する場合、ページはリロードされないことを理解する必要があります。したがってJsCmds.setHtml、サーバー側で使用して2番目の選択要素を「リセット」することをお勧めします。

したがって、実際には、最初の選択は ajaxSelect であり、2 番目の選択を変更するためのものです (したがって、私の意見では、非表示の送信には関係ありません)。'selectPoint(s)' を使用して、最初の選択が変更されると、2 番目の選択が更新されます。

Scala コードの一部

def selectPoint(s):JsCmd = {
  selectedDistributionPoint = s; 
  newDevices:List[String] = findCorrespondingDevices(s);
  JsCmds.setHtml("name=devices", SHtml.select(newDevices, Empty, selectedDevice = _, "id" -> "the_devices")) ++ SHtml.hidden(process)) 
}

"name=distributionPoints" #> SHtml.AjaxSelect(distributionPoints, Empty, s=> selectPoint(s), "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(Nil, Empty, selectedDevice = _, "id" -> "the_devices")  ++ SHtml.hidden(process))

テンプレートコードの一部

<input name="distributionPoints" id="the_distributionPoints" onchange="submit()"/>
<input name="devices" id="the_devices"/>
于 2012-05-29T21:30:47.217 に答える