Forms which save state during editing (like ajax forms) and also allow "normal" submit

52 views
Skip to first unread message

Dan Gravell

unread,
Aug 1, 2016, 5:18:19 AM8/1/16
to Lift
I've disappeared down a bit of a rabbit hole here and I'm a bit confused by how Lift's functionality has developed in this regard.

Originally I had a form with good ol' SHtml.text et al bindings. It worked.

My page was redesigned and I had the requirement to save the state of the form as the user was editing it. So I started using SHtml.ajaxText et al. This worked to save the state as I was editing it. But then I noticed no other fields were being set when I submitted the form (with the SHtml.hidden() trick).

I looked at the HTML and noticed that while the onblur etc events are generated, the name attribute is the same as before CssSel binding. When I look at the form submission I can see the form elements are not submitted with "F****" names, rather those original CssSel binding names, and so I guess that's why the values aren't bound at submission time.

I expected the Ajax form to just work the same way as a normal submit (albeit with the SHtml.hidden() trick because of the JQ JSON serialisation issue).

So what should I be doing:

- Should the Ajax form work on normal submission, as I expected, and all my SHtml.ajaxText et al elements have their functions called? Therefore there's a bug in my code

or

- Should I be using plain old SHtml.text et al and using onEvent to code my own [onblur] etc handlers?

Ta,
Dan

Dan Gravell

unread,
Aug 1, 2016, 9:11:35 AM8/1/16
to Lift
I had a look at a few more solutions.

I had a look at the oddly-named "textAjaxTest" which sounds like an internal method, but is mentioned a bit. Problem with this is that there aren't methods for select, checkbox etc.

What seems to work is using SHtml.onEvents. E.g.

onEvents("onchange", "onblur")(update)(text(defVal, update _))

There's duplication of "update" there but this seems to work atm... and can be used for other controls.

I noticed ajaxText also traps [enter] keypresses - is there a way of binding to that JS method nicely (rather than hardcoding)? "liftUtils.lift_blurIfReturn(event)"

Dan

Antonio Salazar Cardozo

unread,
Aug 1, 2016, 3:22:11 PM8/1/16
to Lift
Looks like you're going down the right path; I haven't really tried
to do this before, so I don't have any specific ideas :/
Thanks,
Antonio

Dan Gravell

unread,
Dec 6, 2016, 8:18:11 AM12/6/16
to Lift
Slight aside on this. I only just realised these don't work too well with standard SHtml.checkbox, which always reports its state as "true" whether checked or not onChange or onClick.

I fixed it by using ajaxCheckbox.

Antonio Salazar Cardozo

unread,
Dec 7, 2016, 10:02:18 AM12/7/16
to Lift
Ah yes. That's due to how the value is looked up (for `checkbox`, the value is `.value`, while
for `ajaxCheckbox`, it is `.checked`, I believe).
Thanks,
Antonio

Dan Gravell

unread,
Dec 9, 2016, 9:15:03 AM12/9/16
to Lift
Thanks. That enabled me to go back to plain checkbox for normal form processing - I just added a utility method to use "checked" rather than "value", copying the onEvents method from SHtml.

Antonio Salazar Cardozo

unread,
Dec 10, 2016, 8:25:50 AM12/10/16
to Lift
Sweet!
Reply all
Reply to author
Forward
0 new messages