rails habtm checkboxes with jquerymobile

Hi guys, I have a habtm association working properly. My application consists of both a desktop and a mobile version. My mobile version is made with jquerymobile and I would like my checkboxes in the edit form to look like the checkboxes shown in http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-checkboxes.html.

My desktop code is the following:

<%= check_box_tag “foo[bar_ids]”, bar.id, @foo.bars.include?(bar) %>

…and page source is the following:

Jquery


Web


My mobile code is:

<% for bar in Bar.all %> <%= check_box_tag “foo[bar_ids]”, bar.id, @foo.bars.include?(bar) %>

                    <label for="<%= [bar.id](http://bar.id) %>"><%= bar.Name %></label>
       
     <% end %>
 </fieldset>

 </div>

…and mobile page source is the following:

<input id="foo_bar_ids_" type="checkbox" value="19" name="link[bar_ids][]" checked="checked">
 <label for="19">Jquery</label>
<label for="25">Web</label>

My mobile checkboxes are rendered as simple checkboxes and not like mobile checkboxes (like in the link above). I think that’s because of the id attribute of my input elements but I’m not sure. Please note that my jquerymobile is referenced correctly, my mobile application is fine (except this part) and my desktop version works flawlessly. If I cut-and-paste the example present in jquerymobile’s website in my view, it’s been rendered as expected.

My questions are:

  1. Can you manage to render checkboxes just like in the jquerymobile link above with an habtm association?
  2. Is there a way to solve my problem (i.e. an alternative way to write my rails mobile code in order to have my checkboxes rendered as in the link above)?

Thanks in advance, best regards.

Federico

Hi guys, I have a habtm association working properly. My application consists of both a desktop and a mobile version. My mobile version is made with jquerymobile and I would like my checkboxes in the edit form to look like the checkboxes shown in http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-checkboxes.html.

My desktop code is the following:

<%= check_box_tag “foo[bar_ids]”, bar.id, @foo.bars.include?(bar) %>

…and page source is the following:

Jquery


Web


My mobile code is:

<% for bar in Bar.all %> <%= check_box_tag “foo[bar_ids]”, bar.id, @foo.bars.include?(bar) %>

                    <label for="<%= [bar.id](http://bar.id) %>"><%= bar.Name %></label>
       
     <% end %>
 </fieldset>


 </div>

…and mobile page source is the following:

<input id="foo_bar_ids_" type="checkbox" value="19" name="link[bar_ids][]" checked="checked">
 <label for="19">Jquery</label>
<label for="25">Web</label>

My mobile checkboxes are rendered as simple checkboxes and not like mobile checkboxes (like in the link above). I think that’s because of the id attribute of my input elements but I’m not sure. Please note that my jquerymobile is referenced correctly, my mobile application is fine (except this part) and my desktop version works flawlessly. If I cut-and-paste the example present in jquerymobile’s website in my view, it’s been rendered as expected.

My questions are:

  1. Can you manage to render checkboxes just like in the jquerymobile link above with an habtm association?
  2. Is there a way to solve my problem (i.e. an alternative way to write my rails mobile code in order to have my checkboxes rendered as in the link above)?

It seems to me this is more of a design/css/jquery issue than a rails issue. If rails is rendering correctly, then it is a matter of figuring out what is going wrong on the design side. What something looks like on the view has nothing to do with what kind of relationship you have. So the good news, is yes, you should be able to render the checkbox as you desire. The bad is you have to figure out why it is not. Maybe output the class on the mobile device UI and verify you are getting what expected. You may want to post this on a jquery forum.

David,

I think I see your problem. The for attribute of the label tag has to match the id attribute of the input checkbox. You have two input checkboxes with ids of “foo_bar_ids_” – that’s not really allowed by HTML, you should make that be “foo_bar_ids_19” and “foo_bar_ids_25”

The for of the label tag should match the id of the input tag – this is actually how HTML works and has nothing to do with rails (see http://www.w3schools.com/tags/tag_label.asp). I always thought that was counter intuitive myself but that’s how it works.

To do that, you specify :id => in the check_box_tag and also :for => label_tag (you happen to not be using label_tag, but if you were you could specify :id => )

Personally I never use HABTM, because I always find I’m going to eventually want to add a field to the join table which you can’t do with HABTM. Use has_many :through => instead of HABTM. (but that is actually irrelevant to the problme you have)

-Jason

<input id="foo_bar_ids_" type="checkbox" value="19" name="link[bar_ids][]" checked="checked">
 <label for="19">Jquery</label>
<label for="25">Web</label>

David,

I think I see your problem. The for attribute of the label tag has to match the id attribute of the input checkbox. You have two input checkboxes with ids of “foo_bar_ids_” – that’s not really allowed by HTML, you should make that be “foo_bar_ids_19” and “foo_bar_ids_25”

The for of the label tag should match the id of the input tag – this is actually how HTML works and has nothing to do with rails (see http://www.w3schools.com/tags/tag_label.asp). I always thought that was counter intuitive myself but that’s how it works.

To do that, you specify :id => in the check_box_tag and also :for => label_tag (you happen to not be using label_tag, but if you were you could specify :id => )

Personally I never use HABTM, because I always find I’m going to eventually want to add a field to the join table which you can’t do with HABTM. Use has_many :through => instead of HABTM. (but that is actually irrelevant to the problme you have)

Thats a good point… I just got killed by using HABTM and ended up creating a join model. Especially if you are dealing with nested forms and want to create the join record specifically based on data in the form.

Well, I’m a newbie in rails and habtm worked just fine for my simple application. Jason you pointed me in the right direction and after a quick search I did it. My working code is the following (in case somebody needs it):

                     <%= check_box_tag "foo[bar_ids][][#{[bar.id](http://bar.id)}]", [tag.id](http://tag.id), @foo.bars.include?(bar) %>
                    <label for="foo_bar_ids__<%= [bar.id](http://bar.id) %>"><%= bar.Name %></label>

David, thank you for your answer too.

EDIT: this code in order to have a successful update:

                     <%= check_box_tag "foo[foo_ids][]", [bar.id](http://bar.id), @foo.bars.include?(bar), :id => [bar.id](http://bar.id) %>
                    <label for="<%= [bar.id](http://bar.id) %>"><%= bar.Name %></label>