Submit ajax form from onclick on span

431 views
Skip to first unread message

vlad

unread,
Feb 4, 2012, 2:19:21 PM2/4/12
to Lift
Hello

I would like to ask how to submit ajax form via onclick Js on span
element (<span onclick="???" id="b_submit_span">SUBMIT FORM</span>).

I dont knoh how to transform this NodeSeq:

".b_submit_span [onclick]" #> ???

I use Ajax form like this:
"#b_name" #> SHtml.textarea(...) &
"#b_submit_span [onclick]" #> ???
andThen SHtml.makeFormsAjax

Thanks for your help.

Vlad

David Pollak

unread,
Feb 4, 2012, 10:13:16 PM2/4/12
to lif...@googlegroups.com
??? == SHtml.onSubmitUnit(() => {thing to do})


Vlad

--
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



--
Visi.Pro, Cloud Computing for the Rest of Us http://visi.pro
Lift, the simply functional web framework http://liftweb.net


vlad

unread,
Feb 6, 2012, 1:00:30 PM2/6/12
to Lift
Thanks David,

but it doesn't work.
I found in impl of SHtml.onSubmitUnit that is possible only for input,
button, textarea, select.

When I use submit button (input type=submit) with SHtml.ajaxSubmit It
works fine.

But what should I do when I want to submit ajax form via onlick js
with callback function on server side?

Solutions:
A.
http://groups.google.com/group/liftweb/browse_thread/thread/9d7043df12bf26b/5f990d681ec20436?lnk=gst&q=ajax+link+submit#5f990d681ec20436

B. My stuff
Snippet:

def comment = {
SHtml.idMemoize{ commentBox =>
var comment = ""
"#b_name" #> SHtml.textarea(comment, comment = _) &
"#b_submit" #> SHtml.ajaxSubmit("Send", () => {Alert(comment) &
commentBox.setHtml()})
} andThen SHtml.makeFormsAjax
}

Template:
<div>
<form class="b_form l:HelloWorld.comment">
<textarea id="b_name" rows="" cols=""></textarea>
<input id="b_submit" type="submit" />
</form>
</div>


Rendered HTML:

<form
onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+&quot;F82767478474KPYDYS&quot;).serialize(),
null, null, null); return false;" id="F82767478474KPYDYS"
class="b_form" action="javascript://">
<textarea id="b_name" rows="" cols="" name="F827674784751Y5GP1"></
textarea>
<input type="submit" id="b_submit"
onclick="liftAjax.lift_uriSuffix = 'zF82767478476WVQNO2=_'; return
true;" name="zF82767478476WVQNO2" value="Send"/>
</form>

1. What SHtml.ajaxSubmit really makes:
a) add function to server function map
b) render js variable "liftAjax.lift_uriSuffix" to input onclick param

2.) When I click button "Send"
a) onsubmit on form is called
b) js form serialize
c) ajax post
d) ...
e) my callback func (from func map) is called

3. So what can I do for example with span
a) I need fill onclick on span tag
b) I made my own func similar to SHtml.ajaxSubmit
c) It put callback func to function map
d) to onclick I render
- js variable "liftAjax.lift_uriSuffix"
- js formLookup func
- js submit form

Is something like this already in Lift, if not can it be?

Thanks a lot for replies.

Vlad.

On Feb 5, 4:13 am, David Pollak <feeder.of.the.be...@gmail.com> wrote:
> ??? == SHtml.onSubmitUnit(() => {thing to do})
>
>
>
>
>
>
>
>
>
> On Sat, Feb 4, 2012 at 11:19 AM, vlad <kubi...@gmail.com> wrote:
> > Hello
>
> > I would like to ask how to submit ajax form via onclick Js on span
> > element (<span onclick="???" id="b_submit_span">SUBMIT FORM</span>).
>
> > I dont knoh how to transform this NodeSeq:
>
> > ".b_submit_span [onclick]" #> ???
>
> > I use Ajax form like this:
> > "#b_name" #> SHtml.textarea(...) &
> > "#b_submit_span [onclick]" #> ???
> >  andThen SHtml.makeFormsAjax
>
> > Thanks for your help.
>
> > Vlad
>
> > --
> > 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
>
> --
> Visi.Pro, Cloud Computing for the Rest of Ushttp://visi.pro
> Lift, the simply functional web frameworkhttp://liftweb.net

David Pollak

unread,
Feb 6, 2012, 3:00:06 PM2/6/12
to lif...@googlegroups.com
Here's sample code: https://github.com/dpp/starting_point/commit/c85eb9ff8b6c610b1b1c7f0d3551ec4298a1a9a6
Visi.Pro, Cloud Computing for the Rest of Us http://visi.pro
Lift, the simply functional web framework http://liftweb.net
Reply all
Reply to author
Forward
0 new messages