編集ページに 2 つのリストと保存ボタンがあります。
左のリストは、各行に add の ajaxbutton を含む合計領域リストであり、右のリストは、各行に削除の ajaxbutton を含む選択領域リストです。
操作は次のとおりです。
- 左リストの追加ボタンをクリックすると、選択範囲が右リストの末尾に追加されて表示されます。
- 右リストの削除ボタンをクリックすると確認メッセージが表示され、OKをクリックすると選択した領域が右リストから削除されます。
- 保存ボタンをクリックすると、選択したエリアリストがデータベースに保存されます。
私のソースは次のとおりです。
// Left list
def showTotalArea: CssBindFunc = {
".totalArea *" #> totalAreaList.map(values =>
".areaImage [src]" #> values(6) &
".areaName *" #> values(4) &
".areaComment *" #> values(5) &
".copy" #> ajaxButton(S.?("add"), () => doCopy(values(1), "new"))
)
}
// Right list
def liftForm(xhtml: NodeSeq): NodeSeq = {
var areaList = newOrderList.map(values =>{
<li id={values(1)} class="items currentOrder">
<table >
<thead></thead>
<tbody>
<tr>
<td class="listImage">
<img class="areaImage" src={values(6)}/>
</td>
<td >
<tr><p class="areaName">{values(4)}</p></tr>
<tr><p class="areaComment">{values(5)}</p></tr>
</td>
<td class="listCheck" >
{ajaxButton("delete", () => doConfirm(values(1)), "class" -> "button delete")}
</td>
</tr>
<tr class = "auto">
<td></td>
<td class="listSelect" >
{
val it = ajaxRadio[String](radioList, Box.legacyNullTest(values(2)), doRadioChange(values(1), _)).toForm.grouped(4)
for(i <- it)yield(<tr>{i.flatMap(y => <td> {y} </td>)}</tr>)
}
</td>
</tr>
</tbody>
</table>
</li>})
areaList1 = areaList.toString
SHtml.ajaxForm(
bind("list",xhtml,"areaList" -> <ul class="sortable">{areaList}</ul>)
)
}
// save button
def showFormButton = {
".post" #> submit("save", doCompose) &
".cancel" #> submit("cancel", doCancel) &
"#result" #> text("", result = _ )
}
// add button
def doCopy(areaId: String, areaType: String): JsCmd = {
println("+++++++addArea: " + areaId)
println("+++++++areaType: " + areaType)
// check
if (isExist(areaId)) {
Alert("The selected area is already in the list.")
} else {
val addList = selectedList(totalAreaList, areaId)
newOrderList = newOrderList:::List(addList)
println("+++++++newOrderList: " + newOrderList)
JsRaw("alert(’ButtonAdd clicked’);") &
JsRaw("""$("liftForm").submit();""")
}
}
def selectedList(areaList: List[List[String]], areaId: String): List[String] = {
var returnList: List[String] = Nil
areaList.map(values =>
if (values(1) == areaId) {
returnList = values
}
)
return returnList
}
// delete button
def doConfirm(areaId: String): JsCmd = {
Confirm("Are you sure to delete?", SHtml.ajaxInvoke(() => doDelete(areaId))._2.cmd)
}
def doDelete(areaId: String): JsCmd = {
println("+++++++deleteArea: " + areaId)
newOrderList.map(values =>
if (values(1) == areaId) {
newOrderList = newOrderList - values
}
)
println("+++++++newOrderList: " + newOrderList)
JsRaw("""$("liftForm").submit();""")
}
// save button
private def doCompose() {
println("++++++newOrderList: " + newOrderList.toString)
//save newOrderList to database
}
私の問題は次のとおりです。
- 追加ボタンをクリックすると選択範囲がnewOrderlistの末尾に追加されますが、保存ボタンをクリックするまで表示されません。
- 削除ボタンをクリックすると選択範囲がnewOrderListから削除されますが、保存ボタンをクリックするまで表示から消えません。
私の質問は：
How to display the operation result without clicking save button?
ajaxbutton と submit に関するいくつかのスレッドを読みましたが、よく理解できませんでした。この問題を解決する簡単な方法はありますか?
提案をありがとう
ジェームズ
JsCmds.SetHtml(theID, theContent) を使用しようとしました。しかし、2番目のパラメーターの「theContent」を編集する方法がわかりません。私のソースでは、「def liftForm(xhtml: NodeSeq): NodeSeq = {」と定義されているため、html にバインドされています。
scala から html にバインドされている関数 liftForm を呼び出すにはどうすればよいですか?
ありがとうございます