Ruby on Rails Monday, May 30, 2011



On Mon, May 30, 2011 at 2:47 PM, Federico Rota <federico.rota01@gmail.com> wrote:
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:
<input id="foo_bar_ids_" type="checkbox" value="19" name="foo[bar_ids][]" checked="checked">
Jquery
<br>
<input id="foo_bar_ids_" type="checkbox" value="25" name="foo[bar_ids][]">
Web
<br>

My mobile code is:
     <div data-role="fieldcontain">
     <fieldset data-role="controlgroup">
         <% for bar in Bar.all %>
                         <%= check_box_tag "foo[bar_ids][]", bar.id, @foo.bars.include?(bar) %>
                        <label for="<%= bar.id %>"><%= bar.Name %></label>
           
         <% end %>
     </fieldset>
     </div>

...and mobile page source is the following:
<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain">
<fieldset class="ui-corner-all ui-controlgroup ui-controlgroup-vertical" data-role="controlgroup">
<div class="ui-checkbox">
    <input id="foo_bar_ids_" type="checkbox" value="19" name="link[bar_ids][]" checked="checked">
</div>
     <label for="19">Jquery</label>
<div class="ui-checkbox">
   <input id="foo_bar_ids_" type="checkbox" value="25" name="foo[bar_ids][]" checked="checked">
</div>
    <label for="25">Web</label>
</fieldset>
</div>

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.

 

Thanks in advance,
best regards.

Federico

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To post to this group, send email to rubyonrails-talk@googlegroups.com.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To post to this group, send email to rubyonrails-talk@googlegroups.com.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.

No comments:

Post a Comment