0

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

左边的列表是每行带有add的ajaxbutton的总区域列表，右边的列表是每行带有delete的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

4

1 回答 1

0

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

因此，您主要必须在方法末尾添加：

& JsCmds.SetHtml(theID, theContent)

我希望它有帮助

于 2012-07-01T15:58:57.597 回答