How does Jx object work

[KevinX]

Hi, guys,
I am a beginner of lift, and I am reading "Exploring Lift". But I am
confused in the "Lift and JavaScript" chapter. According to the book,
code like 'Jx(<div>Hi there</div>)' would generate a JS fragment. But
there is no more instruction of how to do this. So I try it in some
way:
1. Binding it to a tag, but that only generate <jx><div>Hi there</
div></jx>
2. I reading the source code of Jx, the toJs method can generate the
JS fragment, but is that the right way to do it, binding the result of
toJs to a tag?
3. As what I have tried, I find that the JsCmds only works fine when
binding them to a html tag's onclick attribute. I have a function
()=>Any and it only has one statement, Alert("Hi!"), and I use it as
the callback function of a button, SHtml.submit('doit',callback,...) ,
but it doesn't work. I think perhaps I am on the wrong way about the
JS things.

Because a callback is a server side function, I think it cannot
operate the client code, right? Further more, the following example
in "Exploring lift" use some JsCmds to operate JSON data and show
some result in the page. So, should the data been placed in the
client, somewhere of the html?

Any comment is helpful, thanks in advance.

[Daniel Hobi]

Hi,

> 3. As what I have tried, I find that the JsCmds only works fine when
> binding them to a html tag's onclick attribute. I have a function
> ()=>Any and it only has one statement, Alert("Hi!"), and I use it as

> the callback function of a button, SHtml.submit('doit',callback,...) , ...

First: Please make sure you have surrounded your NodeSeq with
SHtml.ajaxForm() when using ajax form.

SHtml.submit(..., callback ,...) // () => Any
SHtml.ajaxSubmit(..., callback ,...) // () => JsCmd

The compiler does not complain because JsCmd could also be an Any.
(Scala Class Hierarchy)
As you mentioned it they differ in functionality:
1. SHtml.submit asks: What function do I have to execute after the
form has been submitted and before the next page renders? (fire and
forget behaviour :))
2. SHtml.ajaxSubmit asks: What function do I have to execute after the
form has been submitted and what JavaScript commands do I need to
return to the client?

Have a closer look to the generated html:
1. <input type="submit" name="zF1251473096088GZV" value="Submit"/>
2. <input type="submit" onclick="liftAjax.lift_uriSuffix =
'zF1251473096088GZV=_'; return true;" name="zF1251473096088GZV"
value="Submit"/>

> JsCmds only works fine when binding them to a html tag's onclick attribute

That's true but not only onclick. It could be every possible
JavaScript event (onblur, onmouseover, ...)

I try to summarize it with a little example:
def hello : JsCmd = Alert("hello")

1. SHtml.a(() => hello, Text("click me")) // () => JsCmd
2. SHtml.a(Text("click me"), hello) // JsCmd

The first line will make a callback to the server. The server sends
back an alert("hello") which is executed on the client side.
The second one is already embedded in the html <a href="javascript:;"
onclick="alert('hello')" ... /> so no callback is made.

Daniel

[KevinX]

Hi, Daniel,

I appreciate your reply and it really helps me a lot.

Kevin

Daniel Hobi wrote:
> Hi,
>
> > 3. As what I have tried, I find that the JsCmds only works fine when
> > binding them to a html tag's onclick attribute. I have a function
> > ()=>Any and it only has one statement, Alert("Hi!"), and I use it as
> > the callback function of a button, SHtml.submit('doit',callback,...) , ...
>
> First: Please make sure you have surrounded your NodeSeq with
> SHtml.ajaxForm() when using ajax form.
>
> SHtml.submit(..., callback ,...) // () => Any
> SHtml.ajaxSubmit(..., callback ,...) // () => JsCmd
>
> The compiler does not complain because JsCmd could also be an Any.
> (Scala Class Hierarchy)
> As you mentioned it they differ in functionality:
> 1. SHtml.submit asks: What function do I have to execute after the
> form has been submitted and before the next page renders? (fire and
> forget behaviour :))
> 2. SHtml.ajaxSubmit asks: What function do I have to execute after the
> form has been submitted and what JavaScript commands do I need to
> return to the client?
>
> Have a closer look to the generated html:

> 1. <input type="submit" name=%26quot%3BzF1251473096088GZV%26quot%3B value="Submit"/>
> 2. <input type="submit" =
> 'zF1251473096088GZV=_'; return true;" name=%26quot%3BzF1251473096088GZV%26quot%3B

> value="Submit"/>
>
> > JsCmds only works fine when binding them to a html tag's onclick attribute
> That's true but not only onclick. It could be every possible
> JavaScript event (onblur, onmouseover, ...)
>
> I try to summarize it with a little example:
> def hello : JsCmd = Alert("hello")
>
> 1. SHtml.a(() => hello, Text("click me")) // () => JsCmd
> 2. SHtml.a(Text("click me"), hello) // JsCmd
>
> The first line will make a callback to the server. The server sends
> back an alert("hello") which is executed on the client side.
> The second one is already embedded in the html <a href="javascript:;"

[David Pollak]

I'm one of the few actual users of Jx... I'm trying to carve aside an hour or two to put together some example code on it.

--
You received this message because you are subscribed to the Google Groups "Lift" group.
To post to this group, send email to lif...@googlegroups.com.
To unsubscribe from this group, send email to liftweb+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.

--
Lift, the simply functional web framework http://liftweb.net
Beginning Scala http://www.apress.com/book/view/1430219890
Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im
Surf the harmonics

[David Pollak]

I've created an example at https://github.com/dpp/starting_point/tree/jx_example

First, let's take a look at a Jx() that renders a line of HTML:

  def drawLine = Jx(<li id={JsRaw("it.id")}>{JsRaw("it.msg")}</li>)

To convert that into a callable JavaScript function:

    JsCrVar("drawLine", drawLine.yieldFunction)

This creates a JavaScript variable and assigns the function that draws a line.

We can also create more complex HTML structures:

  def listJx = Jx(<ul id="jx_out">{

    JxMap(JsRaw("it"), drawLine)

  }</ul>)

This maps the elements in the Array it (a tip of the hat to Groovy here... the first parameter to the auto generated function is "it").

On Comet element load, we render the data:

    OnLoad(JsRaw("drawMainArea()")) &

    JsCrVar("drawMainArea", 

            AnonFunc(JsRaw("jQuery('#mainArea').empty()."+

                           "append(renderAll(messages))")))

When we want to add a message to our display:

      partialUpdate(

        JsCrVar("lastMsg", JsObj("id" -> id,

                                "msg" -> msg)) &

        JsRaw("messages.push(lastMsg)")&

        JsRaw("jQuery('#jx_out').append(drawLine(lastMsg))"))

I hope this helps.

--
You received this message because you are subscribed to the Google Groups "Lift" group.
To post to this group, send email to lif...@googlegroups.com.
To unsubscribe from this group, send email to liftweb+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.