我的编辑页面中有两个列表和保存按钮。
左边的列表是每行带有add的ajaxbutton的总区域列表，右边的列表是每行带有delete的ajaxbutton的选定区域列表。
操作如下：
- 单击左侧列表的添加按钮时，所选区域将添加到右侧列表的末尾并显示。
- 单击右侧列表的删除按钮时，将显示确认消息，如果单击确定，将从右侧列表中删除所选区域。
- 单击保存按钮时，所选区域列表将保存到数据库中。
我的来源如下：
// 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 并提交的线程，但我不太理解。有没有什么简单的方法可以解决这个问题？
感谢您的任何建议
詹姆士
我曾尝试使用 JsCmds.SetHtml(theID, theContent)。但我不知道如何编辑第二个参数的“theContent”。因为在我的源代码中，它被定义为“def liftForm（xhtml：NodeSeq）：NodeSeq = {”并绑定到html。
如何调用绑定到 scala 的 html 的函数 liftForm？
谢谢詹姆斯W