Lift forms and CSS3 switches

[Dan Gravell]

I'm trying to get a switch like this working: http://www.bootply.com/i25Ak4Ydqb

As you can see, there's one <input> there used for the checkbox.

When I generate a checkbox in Lift I get the hidden checkbox as well. The result is that this doesn't work: http://www.bootply.com/rrd73zK7LW

TBH I can't see why this doesn't work - the CSS selectors to me don't appear to preclude having a sibling input with a different name. Anyway...

If I reverse the order of the hidden and checkbox then it does work, at least I can toggle the switch: http://www.bootply.com/bLmgLQWifx

However, upon submission both the fields are sent in the POST:

F1157930280991AE3MCP:false

F1157930280991AE3MCP:on

And the result is that my form submission functions don't appear to be executed.

So I guess my question is... has anyone got one of these types of switches working before?

Thanks,

Dan

[Matt Farmer]

I am mobile right now so I can't be sure, but we had a very similar problem at Elemica that I had to solve by manually generating the function identifiers for radio buttons and binding them manually without using the checkbox helper. 

If nobody beats me to it I may be able to recreate it tonight or tomorrow. :)

—
Matt Farmer | Blog | Twitter

GPG: CD57 2E26 F60C 0A61 E6D8  FC72 4493 8917 D667 4D07

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

---
You received this message because you are subscribed to the Google Groups "Lift" group.
To unsubscribe from this group and stop receiving emails from it, send an email to liftweb+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Antonio Salazar Cardozo]

I did a quick skim with zero sanity checking, but I'm pretty sure this

is what you posted about in this ML thread, and therefore is in Lift

3.0 as SHtml.radioCssSel (with pretty stellar documentation :) ).

To unsubscribe from this group and stop receiving emails from it, send an email to liftweb+unsubscribe@googlegroups.com.

[Antonio Salazar Cardozo]

Jplay that's radio and we're talking about checkboxes. I think something

not too far off from that should be doable with checkboxes, though.

Thanks,

Antonio

[Matt Farmer]

Okay, I didn’t read this closely enough! Haha.

@Dan - First thing is first, you correctly observed that both fields get submitted to the server. That is correct. And that’s exactly the reason we need the hidden field. I’m pretty sure that many (if not all) browsers don’t send anything if the check box isn’t checked. The hidden field tells Lift “Hey this checkbox was on the page” and if it doesn’t see its companion field then it knows the box wasn’t checked.

Now, to your CSS, it actually is restrictive. Your selectors look like this:

.onoffswitch-checkbox:checked + .onoffswitch-label

I changed all instances of the + operator to a ~ and the checkbox begins to work as intended. :)

—
Matt Farmer | Blog | Twitter
GPG: CD57 2E26 F60C 0A61 E6D8  FC72 4493 8917 D667 4D07

To unsubscribe from this group and stop receiving emails from it, send an email to liftweb+u...@googlegroups.com.

[Dan Gravell]

Thanks Matt. Looks like I need to go back to CSS school... Replaced with a tilde and it works perfectly.

Dan

To unsubscribe from this group and stop receiving emails from it, send an email to liftweb+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.