form.ajax snippet and onsubmit attribute

[Kajo Marton]

Hi all,

first big thanks for great work with Lift which I am working with every day.

I can't understand one thing even I study it and tried to read source code.

I have html syntax 

<form action="" class="lift:form.ajax" onsubmit="validateForm();"> 

...

</form>

but in generated html i can't see my call of js function in onsubmit attribute. In docs i can read:

https://github.com/lift/framework/blob/master/web/webkit/src/main/scala/net/liftweb/builtin/snippet/Form.scala

If the "onsubmit" attribute is set on this tag, then the contents there will be run prior to the actual AJAX call.

So what am I doing wrong? It is same with class attribute, which is not generated in result too.

In backend I am using classic designer friendly templates and SHtml.ajaxSubmit button.

I created new snippet MyForm.ajax, where I set my own js function to the onsubmit attibute for form, but I am not satisfied with this solution.

thanks for explanation.

[Diego Medina]

Can you paste the html that is generated after lift processes the
page? In other words, I'd like to see the html, but not from the
template, but using the browser "view source"

Regards,

Diego

> --
> You received this message because you are subscribed to the Google Groups
> "Lift" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/liftweb/-/xZLOPAlXXfkJ.
> 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.
>

--
Diego Medina
Web Developer
di...@fmpwizard.com
http://www.fmpwizard.com

[Kajo Marton]

yes, of course. I hope it helps. I found out that any attributes(class, onsubmit, postsubmit) are not 'copy' to final generated form element.

my html template:

<div class="lift:Users.signUp">

<form class="signupForm lift:form.ajax" postsubmit="myPostFuntion();" onsubmit="validateForm();" action=""> 

...

<input type="submit" id="signUpButton" value="Register" class="button" />

</form>

</div>

generated Lift html code:

<form id="F1237878923479A0ER3E" action="javascript://" onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+&quot;F1237878923479A0ER3E&quot;).serialize(), null, null, &quot;javascript&quot;);return false;">

...

<input id="signUpButton" class="button" onclick="liftAjax.lift_uriSuffix = 'zF12378789234784PJV2Y=_'; return true;" name="zF12378789234784PJV2Y" type="submit" value="Register">
</form>

and my backend class Users contains snippet signUp with designer friendly templates and 
...
"#signUpButton" #> ( SHtml.ajaxSubmit("Register", () => {...}) )

thanks a lot. 

[Diego Medina]

On Fri, Sep 9, 2011 at 6:51 AM, Kajo Marton <kajo....@gmail.com> wrote:
> yes, of course. I hope it helps. I found out that any attributes(class,
> onsubmit, postsubmit) are not 'copy' to final generated form element.
> my html template:

Hi,

Ok, so, is it calling validate now? ( because I see an onsubmit attr
on the resulting hyml. just not what you entered.

Diego

> <div class="lift:Users.signUp">
> <form class="signupForm lift:form.ajax" postsubmit="myPostFuntion();"
> onsubmit="validateForm();" action="">
> ...
> <input type="submit" id="signUpButton" value="Register" class="button" />
> </form>
> </div>
>
> generated Lift html code:
>
> <form id="F1237878923479A0ER3E" action="javascript://"
> onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+&quot;F1237878923479A0ER3E&quot;).serialize(),
> null, null, &quot;javascript&quot;);return false;">
>
> ...
>
> <input id="signUpButton" class="button" onclick="liftAjax.lift_uriSuffix =
> 'zF12378789234784PJV2Y=_'; return true;" name="zF12378789234784PJV2Y"
> type="submit" value="Register">
>
> </form>
>
> and my backend class Users contains snippet signUp with designer friendly
> templates and
>
> ...
>
> "#signUpButton" #> ( SHtml.ajaxSubmit("Register", () => {...}) )
>
>
> thanks a lot.
>

> --
> You received this message because you are subscribed to the Google Groups
> "Lift" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/liftweb/-/NKQQGKxpZfsJ.

[Peter Brant]

Yeah, I noticed that too (Lift not copying attributes from the <form>
element). We ended up just using jQuery to install the necessary JS
vs. letting Lift include an appropriate snippet. If you open a ticket
and assign it to me, I'll fix this, but...

what you're trying to do is a little trickier. As Diego noted, the
form.ajax snippet wires up onsubmit to do an Ajax submit of the form,
but you want to perform some custom validation using the same event
handler. I'm not sure of the cleanest way to handle this. Any ideas?

Pete

> --
> You received this message because you are subscribed to the Google Groups
> "Lift" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/liftweb/-/NKQQGKxpZfsJ.

[Kajo Marton]

@Diego - it is not calling validate function, because it is not added before lift submit function.

@Peter - yes. I writed my own class MyForm, where I created onsubmit function:

val pre = "if (validateForm($(this)) === false) return false;"

val ajax: String = pre + SHtml.makeAjaxCall(LiftRules.jsArtifacts.serialize(id), AjaxContext.js(post)).toJsCmd + ";" + "return false;"

new UnprefixedAttribute("onsubmit", Text(ajax), attr)

Simply add my own js function before Lift ajax js functions. If Form.ajax works, it would be great. Developer would just write his js function to onsubmit attribute and Lift would get it and paste before ajax submit function. But it doesn't work.

Btw, I think that problem is in S.attr.~("onsubmit") https://github.com/lift/framework/blob/master/web/webkit/src/main/scala/net/liftweb/builtin/snippet/Form.scala

because it results in empty string even onsubmit attribute is set.

so can I open a ticket? Is it bug?

thanks a lot.

[Peter Brant]

Hmm... yeah, good point. It looks like that code is trying to copy
the attributes with special handling for onsubmit and friends, but for
whatever reason it's not working. Could you open a ticket for this
and assign it to me?

Pete

> --
> You received this message because you are subscribed to the Google Groups
> "Lift" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/liftweb/-/jdkp8h1wwSUJ.

[Kajo Marton]

ok, thanks a lot for this.

http://www.assembla.com/spaces/liftweb/tickets/1112-form-ajax-doesn-t-copy-onsubmit-attribute-from-template-to-generated-html

If you would need any help, you see my e-mail.

thanks

[Tim Nelson]

Hi Kajo,

I came across this thread today searching for info on using onsubmit on a form. This actually works as you'd expect it to. The problem you were having is due not putting onsubmit and postsubmit in the right place. They belong as part of the string used to call the snippet:

Try this:

<form class="lift:form.ajax?onsubmit=validateForm();postsubmit=myPostFuntion()" > 

...

</form>

or

<form data-lift="form.ajax?onsubmit=validateForm();postsubmit=myPostFuntion()" > 

...

</form>

I will close the ticket.

Tim

[Kajo Marton]

thank you very much Tim for explanation.

From this time I've created my own Form class where I did it by myself.

But probably I come back :)

thanks again

Dňa piatok, 21. septembra 2012 20:17:00 UTC+2 Tim Nelson napísal(-a):