Reading in lift user modifications of editable div elements

[Juan Miguel Cejuela]

I have a page displayed by a LiftView where I put some div elements
editable by the user, that is, using the Rangy CSS Class Applier
library (http://code.google.com/p/rangy/wiki/CSSClassApplierModule),
the user can select subparts of the texts in the div elements, and the
library gives them a class by putting them into span tags.

What I want is to, through a submit button, read back in lift the
modified div elements to ultimately store those modifications.

How can I do this?


I guess I have to use a bind, but I'm not sure how to do it. Also, I
didn't saw any example using a bind or combining a StatefulSnippet
with a LiftView (if this is even possible)


Thanks a mil

[Stefan Bradl]

I am using onblur for this. If your span's are "contenteditable" and have a specific css class you can do this in your snippet:

".editable [onblur]" #> SHtml.ajaxCall(...)

2012/2/13 Juan Miguel Cejuela <jua...@jmcejuela.com>

--
Lift, the simply functional web framework: http://liftweb.net
Code: http://github.com/lift
Discussion: http://groups.google.com/group/liftweb
Stuck? Help us help you: https://www.assembla.com/wiki/show/liftweb/Posting_example_code

[Juan Miguel Cejuela]

Thanks Stefan,

yes onblur may provide a better interface than a button for confirmation, but what I don't how to do is to read back in lift the changes made by the user on the browser side.

I mean, I already put this (jQuery)

$(".editable").live("mouseup", function(a) {
        addStyle("selected")
    })

Which applies style to a selected text when the mouse is released.

What I need to do now is, either associate to the same mouseup event or to a submit button, I guess, a post form so that Lift can read the modified .editable div with the already included spans. I'm totally clueless about this.

I guess my question is, how can I pass from javascript to the server a variable, in this case not a simple String but a whole list of xml Nodes ?

2012/2/13 Stefan Bradl <madre...@gmx.de>

--
Juan Miguel Cejuela
  http://www.jmcejuela.com/

[Stefan Bradl]

Ok sorry for that. My editabled have an id attribute (I generate it dynamically).

val id = nextFuncName

".editable [id]" #> id &

".editable [onblur]" #> SHtml.ajaxCall(ElemById(id, "innerHTML"), save _) &

the function save can look like this

def save(x: Any): JsCmd = {

    println("New value: " + x.toString)

    S.notice(S ? "SAVED_CHANGES")

  }

ElemById is the important part here.

[Juan Miguel Cejuela]

Hey thanks,

how to put it with a button? I cannot make this succeed:

<form method="post">                   
       {SHtml.ajaxSubmit("Save", () => SHtml.ajaxCall(ElemById(id, "innerHTML"), save _)._2.cmd)}
</form>

//I guess I'm making something terribly complicated

2012/2/13 Stefan Bradl <madre...@gmx.de>

[Stefan Bradl]

Good question.

Is the save-method actually called?

You could also try something like 

"#button [onclick]" #> SHtml.ajaxCall(ElemById(id, "innerHTML"), save _)

[Juan Miguel Cejuela]

No, save doesn't get executed.

If I try something like:

SHtml.ajaxSubmit("Save", save _)

and in save is where I put the subsequent ajaxCall, save gets executed but not the ajax call so I never get to see the DOM element.


I cannot make it either with "#button [onclick]" #> SHtml.ajaxCall(ElemById(id, "innerHTML"), save _)

I'm trying:

<form method="post">
                 <lift:ChangeOnclick.apply>
                    <input value="Confirm Annotations" type="submit"/>
                 </lift:ChangeOnclick.apply>
</form>

and then
"#input [onclick]" #> SHtml.ajaxCall(ElemById(id, "innerHTML"), save _) &

          "#button [onclick]" #> SHtml.ajaxCall(ElemById(id, "innerHTML"), save _)

(thanks a lot for your help)

2012/2/13 Stefan Bradl <madre...@gmx.de>

[Stefan Bradl]

#button and #input require that such an element exists.

So your button shoud have an id eattribute 

<input id="input" value="Confirm Annotations" type="submit"/>

you could also change the css selector to

"type=submit [onclick]" #> SHtml.ajaxCall(ElemById(id, "innerHTML"), save _)

[Juan Miguel Cejuela]

Yes, that works, thank you!

2012/2/13 Stefan Bradl <madre...@gmx.de>