scala lift：如何提交ajaxbutton添加和删除

Question

我的编辑页面中有两个列表和保存按钮。

左边的列表是一个总面积列表，每行都有add的ajaxbutton， 右边的列表是一个选定区域列表，每行带有删除的ajaxbutton。

操作如下：

1. 单击左侧列表的添加按钮时，所选区域将添加到右侧列表的末尾并显示。
2. 当点击右侧列表的删除按钮时，会显示确认信息，如果点击确定，则会从右侧列表中删除所选区域。
3. 当点击保存按钮时，选择的区域列表将被保存到数据库中。

我的源码如下：

// 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
}

我的问题是：

1. 当点击添加按钮时，选择的区域被添加到newOrderlist的末尾， 但在单击保存按钮之前它不会显示。
2. 当点击删除按钮时，选中的区域会从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

Answer 1

我认为最好的解决方案可能是将JsCmds.SetHtml (doc) 与doCopy 方法中的新元素一起显示在其ID 处。蛮力方法只是用更新的表格替换完整的表格，但他们可能是这样做的更好方法。

所以你主要必须在方法的末尾添加：

& JsCmds.SetHtml(theID, theContent)

希望对你有帮助