[Bootstrap] Hidden input messing with checkbox

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

[Bootstrap] Hidden input messing with checkbox

CyrilFerlicot
Hi!

I am using bootstrap for a university project and someone of my team is
making mockups and I reproduce them with Seaside. But I have a problem
with checkboxes.

He gave me this code:

<div class="checkbox">
  <input type="checkbox" id="question1Answer1">
  <label for="question1Answer1">
    Aenean semper rutrum nisi.
  </label>
</div>


But seaside generate this:

<div class="checkbox">
  <input type="checkbox" name="10" id="question1Answer1">
  <input type="hidden" name="11">
  <label for="question1Answer1">
    Aenean semper rutrum nisi.
  </label>
</div>


Because of the hidden input I cannot check the checkbox. If I remove it
in the DOM, I can.

I think I must not be the first to have this problem. Does someone have
a workaroud?

Thanks!

--
Cyril Ferlicot

http://www.synectique.eu

2 rue Jacques Prévert 01,
59650 Villeneuve d'ascq France


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

signature.asc (817 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: [Bootstrap] Hidden input messing with checkbox

Mariano Martinez Peck
Hi Cyril,

It would be nice if you can paste your seaside render code besides the resulting html.

Cheers,

On Thu, Nov 3, 2016 at 7:05 PM, Cyril Ferlicot D. <[hidden email]> wrote:
Hi!

I am using bootstrap for a university project and someone of my team is
making mockups and I reproduce them with Seaside. But I have a problem
with checkboxes.

He gave me this code:

<div class="checkbox">
  <input type="checkbox" id="question1Answer1">
  <label for="question1Answer1">
    Aenean semper rutrum nisi.
  </label>
</div>


But seaside generate this:

<div class="checkbox">
  <input type="checkbox" name="10" id="question1Answer1">
  <input type="hidden" name="11">
  <label for="question1Answer1">
    Aenean semper rutrum nisi.
  </label>
</div>


Because of the hidden input I cannot check the checkbox. If I remove it
in the DOM, I can.

I think I must not be the first to have this problem. Does someone have
a workaroud?

Thanks!

--
Cyril Ferlicot

http://www.synectique.eu

2 rue Jacques Prévert 01,
59650 Villeneuve d'ascq France


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside




--

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: [Bootstrap] Hidden input messing with checkbox

CyrilFerlicot
On 04/11/2016 04:47, Mariano Martinez Peck wrote:
> Hi Cyril,
>
> It would be nice if you can paste your seaside render code besides the
> resulting html.
>
> Cheers,
>


Hi!

This is the code I used:

self orderedAnswers
  do: [ :answer |
    html div
    class: #checkbox;
    with: [ html checkbox
      id: html nextId;
      value: (aComponent resultFor: answer);
      callback: [ :isChecked | aComponent at: answer put: isChecked ].
      html label
      for: html lastId;
      with: answer text ] ]

And this is the result:

<div class="checkbox">
  <input id="id35" name="36" type="checkbox">
  <input name="37" type="hidden">
  <label for="id35"> rutrum feugiat</label>
</div>


Yesterday I found a hack to make it work but I would like something cleaner:

html document addLoadScript: (JSStream on:
'$(".checkbox").each(function(i,e){$(e).children("input[type=hidden]").prependTo(e)})')

One problem with that is that I need to think to call it when I use Ajax.

--
Cyril Ferlicot

http://www.synectique.eu

2 rue Jacques Prévert 01,
59650 Villeneuve d'ascq France


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

signature.asc (817 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: [Bootstrap] Hidden input messing with checkbox

jtuchel
In reply to this post by CyrilFerlicot
Hi Cyril,

I'd be interested in what exactly you mean by this:
> Because of the hidden input I cannot check the checkbox. If I remove it
> in the DOM, I can.
Looking at your js based solution, it seems the ordering of th
echeckbox, the hidden input and the label causes problems. What kinf of
problems?

You say sou cannot check the checkbox. Do you mean on the server side,
via javascript or using the mouse or the keyboard in the Browser?

We're also using bootstrap and seaside and I am not aware of any
problems....


Joachim



--
-----------------------------------------------------------------------
Objektfabrik Joachim Tuchel          mailto:[hidden email]
Fliederweg 1                         http://www.objektfabrik.de
D-71640 Ludwigsburg                  http://joachimtuchel.wordpress.com
Telefon: +49 7141 56 10 86 0         Fax: +49 7141 56 10 86 1

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: [Bootstrap] Hidden input messing with checkbox

Mariano Martinez Peck
In reply to this post by CyrilFerlicot


On Fri, Nov 4, 2016 at 6:07 AM, Cyril Ferlicot D. <[hidden email]> wrote:
On 04/11/2016 04:47, Mariano Martinez Peck wrote:
> Hi Cyril,
>
> It would be nice if you can paste your seaside render code besides the
> resulting html.
>
> Cheers,
>


Hi!

This is the code I used:

self orderedAnswers
  do: [ :answer |
    html div
    class: #checkbox;
    with: [ html checkbox
      id: html nextId;
      value: (aComponent resultFor: answer);
      callback: [ :isChecked | aComponent at: answer put: isChecked ].
      html label
      for: html lastId;
      with: answer text ] ]


The above code looks correct to me. I don't see anything strange. 
And I never saw the issue you describe that you cannot click a checkbox (and yes, I use bootstrap too).

When you click on the checkbox, nothing happens at JS side or at server side? Is the callback executed? 

The surrounding div with class 'checkbox' seems a bit strange, but I don't see anything else :(
 
Cheers,


And this is the result:

<div class="checkbox">
  <input id="id35" name="36" type="checkbox">
  <input name="37" type="hidden">
  <label for="id35"> rutrum feugiat</label>
</div>


Yesterday I found a hack to make it work but I would like something cleaner:

html document addLoadScript: (JSStream on:
'$(".checkbox").each(function(i,e){$(e).children("input[type=hidden]").prependTo(e)})')

One problem with that is that I need to think to call it when I use Ajax.

--
Cyril Ferlicot

http://www.synectique.eu

2 rue Jacques Prévert 01,
59650 Villeneuve d'ascq France


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside




--

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: [Bootstrap] Hidden input messing with checkbox

CyrilFerlicot
On 04/11/2016 14:53, Mariano Martinez Peck wrote:

>
>
>
> The above code looks correct to me. I don't see anything strange.
> And I never saw the issue you describe that you cannot click a checkbox
> (and yes, I use bootstrap too).
>
> When you click on the checkbox, nothing happens at JS side or at server
> side? Is the callback executed?
>
> The surrounding div with class 'checkbox' seems a bit strange, but I
> don't see anything else :(
>  
> Cheers,
>
I dug a little in the issue and I see that my college included awesome
bootstrap checkbox in his css.

https://github.com/flatlogic/awesome-bootstrap-checkbox

In the dome page
(http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/), if you
edit the html of a checkbox to add a <input type="hidden">  after an
input checkbox, we cannot see if the checkbox is checked anymore.

Sorry for the misunderstanding. I though my college used only bootstrap.

>
> --
> Mariano
> http://marianopeck.wordpress.com
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

--
Cyril Ferlicot

http://www.synectique.eu

2 rue Jacques Prévert 01,
59650 Villeneuve d'ascq France


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

signature.asc (817 bytes) Download Attachment