Skip to content
Browse files

creating ajax editable

  • Loading branch information...
1 parent 8fd22d3 commit dff2435b064f1b3e51a5b32fb2d776ef9daf16e3 timur.br@gmail.com committed Feb 25, 2013
View
2 src/main/scala/bootstrap/liftweb/Boot.scala
@@ -119,6 +119,7 @@ object Paths {
// knockout testing
val knockout = Menu("Knockout experiments") / "knockout"
+ val aeditable = Menu("Aeditable") / "ajax_editable"
//menu dividers
val divider1 = Menu("divider1") / "divider1"
@@ -173,6 +174,7 @@ object Paths {
def sitemap = SiteMap(
knockout >> LocGroup("topLeft"),
+ aeditable >> LocGroup("topLeft"),
navHeader1 >> LocGroup("nl1") >> FoBo.TBLocInfo.NavHeader,
index >> LocGroup("topLeft","nl1"),
ddLabel1 >> LocGroup("topLeft") >> PlaceHolder submenus (
View
111 src/main/scala/code/snippet/AEditable.scala
@@ -0,0 +1,111 @@
+package code.snippet
+
+import net.liftweb._
+import util._
+import Helpers._
+import http._
+import js._
+import js.JE._
+import js.jquery.JqJE
+import js.jquery.JqJsCmds.{FadeOut, FadeIn}
+import js.JsCmds._
+import xml._
+import js._
+
+/**
+ * Created with IntelliJ IDEA.
+ * User: bobrus
+ * Date: 25.02.13
+ * Time: 12:00
+ * To change this template use File | Settings | File Templates.
+ */
+
+//class Human(var name:String, var age:Int)
+
+object AEditable {
+
+ case class Field(viewFunc: CssSel, editFunc: CssSel)
+
+ val population =
+ new Human("Adam", 930) ::
+ new Human("Eva", 450) ::
+ Nil
+
+ object dataVar extends SessionVar(population)
+
+ def table(ns:NodeSeq) =
+ <form class="lift:form.ajax">{ns}</form>
+
+ def editableList = {
+// "*" #> population.map(h =>
+// "@name *" #> h.name &
+// "@age *" #> h.age
+// )
+ "*" #> dataVar.get.map(h =>
+ editable(
+ "@controls *",
+ () => S.notice(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))
+ ) _
+ )
+ }
+
+ def editable(controlsBind: 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("lift_show_edit_links") &
+ Replace(nodeId, rowTransform(ns))
+
+ 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
+
+ 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"
+ }
+
+
+ <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)
+ }
+
+ def viewRow(fields: Seq[Field]) =
+ fields.map(_.viewFunc) reduceLeft {(fs, f) => fs & f}
+
+ def editRow(fields: Seq[Field])=
+ fields.map(_.editFunc) reduceLeft {(fs, f) => fs & f}
+}
+
+// fieldFunc = displayFunc,
View
6 src/main/scala/code/snippet/LKO.scala
@@ -19,16 +19,16 @@ import util.Helpers._
* To change this template use File | Settings | File Templates.
*/
-case class Human(val name:String, age:Int)
+class Human(var name:String, var age:Int)
class LKO {
implicit val formats = DefaultFormats
val injectDataFuncName = "kl.setData"
val population =
- Human("Adam", 450) ::
- Human("Eva", 350) ::
+ new Human("Adam", 930) ::
+ new Human("Eva", 450) ::
Nil
def injectData(in:NodeSeq) = {
View
24 src/main/webapp/ajax_editable.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
+ <title>Home</title>
+</head>
+<body class="lift:content_id=main">
+<div id="main" class="lift:surround?with=default;at=content">
+
+ <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>
+
+</div>
+</body>
+</html>
View
3 src/main/webapp/js/knocklift.js
@@ -18,7 +18,8 @@ var kl = new function (){
/*
* LiftDataHolder object is based on DataHolder class by Antonio Salazar Cardozo
- * which he kindly provided for public at https://gist.github.com/Shadowfiend/2639589
+ * which he kindly provided for public at https://gist.github.com/Shadowfiend/2639589.
+ * This is simple analog of ko.mapping plugin.
**/
LiftDataHolder = (function() {
View
4 src/main/webapp/knockout.html
@@ -16,7 +16,9 @@
<tbody data-bind="foreach: kl.data.list()">
<tr>
<td data-bind="text: name"></td>
- <td><input data-bind="value: name" /></td>
+ <!--<td><input data-bind="value: name" /></td>-->
+ <td data-bind="text: age"></td>
+ <!--<td><input data-bind="value: age" /></td>-->
</tr>
</tbody>
</table>

0 comments on commit dff2435

Please sign in to comment.
Something went wrong with that request. Please try again.