how to submit LiftScreen form when user types enter

[Todd O'Bryan]

What's the best way to have a LiftScreen form submitted when the user
presses the enter key in a field?

A previous thread suggested overriding finishButton to be <button
type="submit">..., but that doesn't seem to work, probably because the
Cancel and Finish buttons are in a different form than the fields.

I'd generally like this to be the default behavior for all my forms,
so I'd like an easy way to set it once and then use it easily.

Todd

[Peter Brant]

I've had the same problem (although oddly enough sometimes it does work).

I don't know if it qualifies as the best way, but we ended up using
jQuery for this. Specifically,
http://plugins.jquery.com/project/SafeEnter along with something like

$('input[type="text"]', $('#myForm')).clickOnEnter($('#myFinishBtn'))

Pete

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

[David Pollak]

On Thu, May 19, 2011 at 5:50 AM, Todd O'Bryan <toddo...@gmail.com> wrote:

What's the best way to have a LiftScreen form submitted when the user
presses the enter key in a field?

A previous thread suggested overriding finishButton to be <button
type="submit">..., but that doesn't seem to work, probably because the
Cancel and Finish buttons are in a different form than the fields.

Please open a ticket for this feature (http://ticket.liftweb.net you must be a watcher of the LiftWeb space on Assembla to open tickets) and please reference this thread in the ticket.

If there are additional comments, features, etc., please discuss them in this thread.

Thanks,

David
 

I'd generally like this to be the default behavior for all my forms,
so I'd like an easy way to set it once and then use it easily.

Todd

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

Simply Lift http://simply.liftweb.net
Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im

[Peter Brant]

Ticket added here
http://www.assembla.com/spaces/liftweb/tickets/1015-enter-in-a-field-does-not-always-submit-a-liftscreen-form

IIRC, in my experience, enter worked only on the last form on the
page, but nowhere else. My assumption was that it was just browser
weirdness vs. anything specific Lift is doing.

Pete

[Todd O'Bryan]

I'm having a problem with only a single form. LiftScreen moves the
Cancel and Finish buttons into their own form and uses JavaScript to
submit either the form I created or a hidden form that it creates. It
looks like it's really cool and probably in there for flexibility; it
just has this annoying side effect.

Thanks for picking this up so quickly David!

[Sergey Trofimov]

Hello Peter.

Is any progress is expected with this ticket in the nearest future (I see it's assigned to you at the moment)?

[Peter Brant]

Probably not for 2.4-M4, but I will commit to getting it done for 2.4.
I did look into it a bit, and I'm afraid it will require a bit of
surgery on how we're going about this. The problem is that we're
pretty much at the mercy of the browser as far as what it considers
the default form button. The only way I can see to fix this is to use
a single <form> instead of the several we're currently using.

We're currently using jQuery to work around this fairly painlessly.
Let me know if you want details on that.

Pete

> To view this discussion on the web visit
> https://groups.google.com/d/msg/liftweb/-/vmbJ7whvWqwJ.

[Sergey Trofimov]

We're currently using jQuery to work around this fairly painlessly.
Let me know if you want details on that.

yes, it would be interesting.

[Peter Brant]

Sorry, I just realized I never responded here... see my first answer here

http://groups.google.com/group/liftweb/browse_thread/thread/74412a2fca848787/6e8df081348e55a1

(which is actually this thread!)

Pete

On Fri, Aug 26, 2011 at 4:14 PM, Sergey Trofimov

[Sergey Trofimov]

Ah, clear.
Thank you.

[Sergey Trofimov]

Hello Peter.

But why several <form> tags are used currently?
(It's a little annoying to think about workaround when using LiftScreen)

Can we expect a fix in the nearest future?

--
Sergey

On Fri, Aug 26, 2011 at 16:59, Peter Brant <peter...@gmail.com> wrote:

[Peter Brant]

HI Sergey,

The short answer is implementation convenience. It will be fixed, but
I'm sorry I don't have an ETA.

Pete

On Thu, Oct 20, 2011 at 11:22 AM, Sergey Trofimov

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

[Todd O'Bryan]

Peter,

Can you expand on how you do this with jQuery? Specifically, how do
you figure out the names/ids of the forms and buttons in your
LiftScreen so that you can access them with the JavaScript? The
totality of my HTML and snippet for my login page are:

<div class="lift:UserLogin"></div>

object UserLogin extends LiftScreen {
object user extends ScreenVar[Box[User]](Empty)
val username = field("Username", "")
val passwd = password("Password", "")

def authenticateUser(): List[FieldError] = {
user(User.authenticate(username.get, passwd.get))
if (user.get.isDefined) Nil else Text("Incorrect username or password.")
}

override def validations = authenticateUser _ +: super.validations

def finish() {
// user must be Full if we get here
User.login(user.get.open_!)
}
}

so I'm not at all sure where I'd put the JavaScript code you listed
and how I'd get it to know about the submit button or the form.

Thanks!
Todd

P.S. Sorry to drudge up an old subject, but other things are starting
to work, so this issue has climbed up on the annoyance list.

[Todd O'Bryan]

Peter,

Here's the jQuery code you suggested to submit a LiftScreen when the user hits enter in a form.

$('input[type="text"]', $('#myForm')).clickOnEnter($('#myFinishBtn'))

I finally realized that I could override finishButton to give it the correct id, but how do you set the id of the form's HTML, especially given that there are actually multiple forms being output?

Thanks!

Todd

[Todd O'Bryan]

Just to save other people annoyance, Peter answered in another thread
that they just put a <div id="myForm"> around the LiftScreen snippet.

[Kevin]

For anyone getting here by search engine, here's one way to put this suggestion into code:

import scala.xml._
import net.liftweb.http._
import net.liftweb.common._
import net.liftweb.http.js._
import net.liftweb.http.js.JsCmds._
import net.liftweb.http.js.JE._
...
object ... extends LiftScreen { ...

override def screenBottom = Full(Script(JsRaw("$('input[type=\"text\"]', $('#editform')).clickOnEnter($('#save'))")).asInstanceOf[Elem])