Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

creating ajax editable

  • Loading branch information...
commit f9f0b38108ab1ae5da54bb669ff5d6fd62bbf682 1 parent dff2435
timur.br@gmail.com authored
View
8 src/main/scala/bootstrap/liftweb/Boot.scala
@@ -6,6 +6,8 @@ import Helpers._
import common._
import http._
+import js._
+import js.jquery._
import sitemap._
import Loc._
import mapper._
@@ -37,7 +39,11 @@ class Boot extends Loggable {
FoBo.InitParam.ToolKit = FoBo.Knockout210
FoBo.init()
-
+// LiftRules.noticesEffects.default.set((notice: Box[NoticeType.Value], id: String) => {
+// JqJE.JqId(id) ~>
+// notice.map(n => JqJsCmds.FadeIn(id))
+// })
+
/*un-comment and switch to db of your liking */
MySchemaHelper.initSquerylRecordWithInMemoryDB
//MySchemaHelper.initSquerylRecordWithMySqlDB
View
158 src/main/scala/code/snippet/AEditable.scala
@@ -11,6 +11,7 @@ import js.jquery.JqJsCmds.{FadeOut, FadeIn}
import js.JsCmds._
import xml._
import js._
+import common._
/**
* Created with IntelliJ IDEA.
@@ -22,8 +23,58 @@ import js._
//class Human(var name:String, var age:Int)
+object BootstrapMsgs {
+
+ def wrapMsgsJsCmd(notice: Box[NoticeType.Value], id: String): Box[JsCmd] =
+ notice.map(n => {
+ val noticeNodeClass = n match {
+ case NoticeType.Notice => "alert alert-info"
+ case NoticeType.Warning => "alert alert-block"
+ case NoticeType.Error => "alert alert-error"
+ }
+ val wrapHtml = encJs(<div class={noticeNodeClass}></div>.toString())
+ val closeButton = encJs(<button type="button" class="close" data-dismiss="alert">&times;</button>.toString())
+ JsRaw("jQuery('#%s').wrap(%s).parent().prepend(%s)".format(id, wrapHtml, closeButton))
+
+ }
+
+
+// AnonFunc(
+// JqJE.JqId(id) ~> JqJE.JqHtml(
+// JsCrVar("h", encJs(<div class="alert alert-block">{{0}}</div>.text)) &
+// JsVar("h") ~> JsFunc("format", JqJE.JqId(id) ~> JqJE.JqHtml())
+// )
+// )
+ )
+
+
+ def render(in:NodeSeq) = {
+ val msgs = S.eval(<lift:msgs></lift:msgs>).openOr(NodeSeq.Empty)
+ if (S.getAllNotices.length > 0) {
+ <div class="alert alert-block">
+ <button type="button" class="close" data-dismiss="alert">&times;</button>
+ {msgs}
+ </div>
+ } else msgs
+ }
+}
+
object AEditable {
+ val editLinkCSSClass = "liftedit_link_class_"
+ val hideLinksFnName = "lift_hide_edit_links_"
+ val showLinksFnName = "lift_show_edit_links_"
+
+
+ val ajaxEditLinkNodes = Text("Edit")
+ val ajaxEditLinkAttributes:List[net.liftweb.http.SHtml.ElemAttr] = List(("class" -> "btn"))
+ val ajaxSubmitInputText = "Ok"
+ val ajaxSubmitInputAttributes = List(("class" -> "btn btn-danger"))
+ val ajaxCancelLinkNodes = Text("Cancel")
+ val ajaxCancelLinkAttributes = List(("class" -> "btn"))
+
+ val editModeClass = "info"
+
case class Field(viewFunc: CssSel, editFunc: CssSel)
val population =
@@ -34,70 +85,89 @@ object AEditable {
object dataVar extends SessionVar(population)
def table(ns:NodeSeq) =
- <form class="lift:form.ajax">{ns}</form>
+ // <head_merge>
+ // <script type="text/javascript">
+ // function lift_hide_edit_links() {{jQuery("liftedit_link_class_").hide()}}
+ // function lift_show_edit_links() {{jQuery(".liftedit_link_class_").show()}}
+ // </script>
+ // </head_merge> ++
+ <head_merge>
+ {Script(
+ Function(hideLinksFnName, Nil, JqJE.Jq("."+editLinkCSSClass) ~> JsFunc("fadeOut", 100)) &
+ Function(showLinksFnName, Nil, JqJE.Jq("."+editLinkCSSClass) ~> JsFunc("fadeIn", 100))
+ )}
+ </head_merge> ++
+ SHtml.ajaxForm(ns)
def editableList = {
-// "*" #> population.map(h =>
-// "@name *" #> h.name &
-// "@age *" #> h.age
-// )
+ LiftRules.noticesEffects.request.set(Vendor(BootstrapMsgs.wrapMsgsJsCmd _))
"*" #> dataVar.get.map(h =>
editable(
- "@controls *",
- () => S.notice(Text("Value is updated")),
+ "@edit", "@ok", "@cancel",
+ () => {
+ S.notice(Text("Value is updated"))
+ S.notice(Text("Value is updated 2"))
+ S.warning(Text("Value is updated"))
+ S.error(Text("Value is updated"))
+ },
Field("@name *" #> h.name, "@name *" #> SHtml.text(h.name, h.name = _)),
- Field("@age *" #> h.age, "@age *" #> SHtml.number(h.age, h.age = _, 0, 1000))
+ Field("@age *" #> h.age, "@age *" #> SHtml.number(h.age, h.age = _, 0, 1000)),
+ Field("@was-expelled *" #> (if (h.wasExpelled) "Yes" else "No"),
+ "@was-expelled *" #> SHtml.checkbox(h.wasExpelled, h.wasExpelled = _)),
+ Field("@in-paradise *" #> (if (h.inParadise) "Yes" else "No"),
+ "@in-paradise *" #> (if (h.inParadise) "Yes" else "No"))
) _
)
}
- def editable(controlsBind: String, onSubmit:() => JsCmd, fields:Field*)(ns:NodeSeq): NodeSeq = {
+ def smoothReplace(nodeId:String, ns:NodeSeq) =
+ JqJE.JqId(nodeId) ~> JsFunc("fadeOut", 100,
+ AnonFunc(
+ JsHideId(nodeId) &
+ Replace(nodeId, ns) &
+ JqJE.JqId(nodeId) ~> JsFunc("fadeIn", 100)))
+
+
+ def editable(editLinkSelector:String, okButtonSelecor: String, cancelButtonSelecor: String,
+ onSubmit:() => JsCmd, fields:Field*)(ns:NodeSeq): NodeSeq = {
val nodeId = nextFuncName
var makeForm: CssSel = null // dumb forward declaration
var rowTransform: CssSel = null // dumb forward declaration
- def onCancel() = {
- renderRow
- }
+ def renderRow() =
+ Call(showLinksFnName) &
+ smoothReplace(nodeId, rowTransform(ns))
- def renderRow =
- Call("lift_show_edit_links") &
- Replace(nodeId, rowTransform(ns))
+ val addEditClassName = "a [class+]" #> editLinkCSSClass
rowTransform = viewRow(fields) &
- controlsBind #> SHtml.a(() => {
- Call("lift_hide_edit_links") &
- (JqJE.JqId(nodeId) ~> JsFunc("fadeOut", 500, AnonFunc(
- JsHideId(nodeId) &
- Replace(nodeId, makeForm(ns)) &
- JqJE.JqId(nodeId) ~> JsFunc("fadeIn", 500)
- )))
- //FadeOut(nodeId, 0, 500 millis) &
-
-
- }, Text("Edit"), ("class" -> "liftedit_link_class_")) &
- "tr [id]" #> nodeId
+ editLinkSelector #>
+ {
+ addEditClassName(
+ SHtml.a(
+ () => Call(hideLinksFnName) & smoothReplace(nodeId, makeForm(ns)),
+ ajaxEditLinkNodes,
+ ajaxEditLinkAttributes: _*)
+ )
+ } &
+ "tr [id]" #> nodeId &
+ okButtonSelecor #> NodeSeq.Empty &
+ cancelButtonSelecor #> NodeSeq.Empty
makeForm = {
editRow(fields) &
- controlsBind #>
- Group(Seq(SHtml.ajaxSubmit("Submit", () => {
- Call("lift_show_edit_links") &
- Replace(nodeId, rowTransform(ns)) &
- onSubmit()
- }), SHtml.a(onCancel _, Text("Cancel")))) &
- "tr [id]" #> nodeId & "tr [style]" #> "display:none"
+ okButtonSelecor #>
+ ajaxSubmitInputAttributes.foldLeft(
+ SHtml.ajaxSubmit(ajaxSubmitInputText, () => {
+ renderRow & onSubmit()
+ }))(_ % _) &
+ cancelButtonSelecor #> ajaxCancelLinkAttributes.foldLeft(SHtml.a(renderRow _, ajaxCancelLinkNodes))(_ % _) &
+ "tr [id]" #> nodeId &
+ "tr [style]" #> "display:none" &
+ editLinkSelector #> NodeSeq.Empty
}
-
-
- <head_merge>
- <script type="text/javascript">
- function lift_hide_edit_links() {{jQuery(".liftedit_link_class_").hide()}}
- function lift_show_edit_links() {{jQuery(".liftedit_link_class_").show()}}
- </script>
- </head_merge> ++
rowTransform(ns)
}
@@ -106,6 +176,4 @@ object AEditable {
def editRow(fields: Seq[Field])=
fields.map(_.editFunc) reduceLeft {(fs, f) => fs & f}
-}
-
-// fieldFunc = displayFunc,
+}
View
4 src/main/scala/code/snippet/LKO.scala
@@ -19,7 +19,9 @@ import util.Helpers._
* To change this template use File | Settings | File Templates.
*/
-class Human(var name:String, var age:Int)
+class Human(var name:String, var age:Int, var wasExpelled: Boolean = true) {
+ def inParadise = !wasExpelled
+}
class LKO {
implicit val formats = DefaultFormats
View
45 src/main/webapp/ajax_editable.html
@@ -7,16 +7,43 @@
<body class="lift:content_id=main">
<div id="main" class="lift:surround?with=default;at=content">
+ <!--<div class="alert alert-block">-->
+ <!--<button type="button" class="close" data-dismiss="alert">&times;</button>-->
+ <!--<lift:msgs></lift:msgs>-->
+ <!--</div>-->
+
<div class="container-fluid">
- <table class="table" data-lift="AEditable.table">
- <tbody>
- <tr data-lift="AEditable.editableList">
- <td name="name"></td>
- <td name="age"></td>
- <td name="controls"></td>
- </tr>
- </tbody>
- </table>
+ <div data-lift="BootstrapMsgs"></div>
+ <div class="row">
+ <div class="span12">
+ <table class="table" data-lift="AEditable.table">
+ <thead>
+ <tr>
+ <th></th>
+ <th>Name</th>
+ <th>Age</th>
+ <th>Was expelled</th>
+ <th>In paradise</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr data-lift="AEditable.editableList">
+ <td height="45px" width="20%">
+ <div name="edit"></div>
+ <div>
+ <span name="ok"></span>
+ <span name="cancel"></span>
+ </div>
+ </td>
+ <td height="40px" width="30%" name="name"></td>
+ <td height="40px" width="30%" name="age"></td>
+ <td height="40px" width="10%" name="was-expelled"></td>
+ <td height="40px" width="10%" name="in-paradise"></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
</div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.