I would like to specify a jquery mobile theme for an element in a rails 3.0 form. The following doesn't work.
<div data-role="page" data-theme="a">
... #content formatted with data theme a
<div data-role="checkbox" data-theme="c">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
... #content formatted with data them a
</div>
Thanks!
UPDATE: shanabus solution in rails format -
<%= f.label :remember_me, { 'data-theme' => 'c' } %>
In order for you to specify the theme of a checkbox in jQuery Mobile, you would have to set it directly on the checkbox element. Could be something like this:
<%= f.check_box("label", "accepted", { 'data-theme' => 'c' }, "yes", "no") %>
Here is the docs for jQuery Mobile: http://jquerymobile.com/test/docs/forms/checkboxes/options.html
And for a Rails example of adding attributes to a check_box: http://apidock.com/rails/ActionView/Helpers/FormHelper/check_box
Hope this helps!
Related
Building a Rails 3.1 app Ruby 1.9 with Devise for user authentication.
Since i'm using Devise to authenticate users I used jquery UI tabs display in the users/edit view. I have one tab to display form for user profile settings and and another for user security settings.
Problem is when i click submit to update either profile or security information it attempts to submit the forms for both. I have the submit buttons set up for each tab separately. How can i set this up so that i can submit the forms on each tab individually?
My users/edit.html.erb file
div id="tabs">
<ul id="user-config-tabs">
<li>Profile Settings</li>
<li>Security Settings</li>
</ul>
<div id="profile-tab"> <!-- Start security settings tab info-->
<%= render 'profilesettings'%>
</div>
<div id="security-tab"> <!-- Start Profile settings tab info-->
<%= render 'securitysettings'%>
</div>
</div>
Profile settings PArtial
<h3 style = "text-align: left">Profile Settings</h3>
<div class="row">
<p id="privacy"><%=link_to "privacy policy", privacy_path%></p>
<div class="span6 offset3">
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
<fieldset>
<legend>General Information</legend>
<div><%= f.label "First Name" %>
<%= f.text_field :name, :autofocus => true %>
<%= f.label "Last Name" %>
<%= f.text_field :last_name, :autofocus => true %>
<%= f.label "Age" %>
<%= f.text_field :age, :autofocus => true%>
<%= f.label "Gender" %>
<%= f.select :gender, User::GENDER_TYPES, prompt: 'Select'%>
</div>
</fieldset>
<div><%= f.submit "Update", class: "btn btn-large btn-primary" %></div>
<% end %>
</div>
</div>
Can't you just let the whole form submit but then only use the information that you want to ?
If you dont want the page to submit then I would use ajax to submit the form and serialize only what you need. For example:
$.ajax({
url: "/post_path",
type: 'POST',
cache: false,
async: false,
data: $("#security_form").serialize(),
success: function(data){
if(data.valid == "true"){
$('#notice').html("Updated succesfully").slideDown();
}else{
$('#errors').html(data.errors).slideDown();
}
}
});
Then you can handle this in the controller.
I'm trying to set up Nivo Slider in a rails app with twitter-bootstrap, the problem I'm facing is tha images appear on top of the other not sliding, any idea how to solve this?
here is my code:
load the nivo slider:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<% #page.images.each_with_index do |img, index| %>
<%= image_tag img.url, :title => '#htmlcaption' %>
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<%=raw #page.caption_for_image_index(index) %>
</div>
<% end %>
_javascript.html.erb
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'jquery.nivo.slider.pack' %>
<%= javascript_include_tag 'jquery.nivo.slider' %>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade',
pauseTime: 5000,
directionNav:true,
controlNav:true
});
});
</script>
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
I believe the problem comes from the each loop. If you notice inside the loop you have two closing div tags - just bellow this line <%= image_tag img.url, :title => '#htmlcaption' %>. Therefore you open the divs once, but close then multiple times.
What you can do instead is change slightly the code like:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<% #page.images.each do |img| %>
<%= image_tag img.url, :title => img.caption_for_image %>
<% end %>
</div>
</div>
Have a look at Nivo Docs. There are further example for alternative caption options.
I found a very easy fix to this issue:
I'm using a legacy CMS and that's inserting image map tags next to some images in the slider (resulting in blank slides). Simply ignoring irrelevant elements seems to work well.
In your jquery.nivo.slider.js file replace line 36
//Find our slider children
Replace this
36 - var kids = slider.children();
with
36 - var kids = slider.children("img,a");
save the change, reload your browser and issue solved.
For more details visit github gilbitron / Nivo-Slider
What will be the erb code for below haml code?
content_for :head do
= stylesheet_link_tag "plupload.queue"
= javascript_include_tag "plupload/plupload.full.min", "plupload/jquery.plupload.queue.min"
= javascript_tag do
= render "plupload.js"
photos_container
= render :partial => "photo", :collection => #photos
uploader
%p You browser doesn't have HTML5, Flash or Silverlight support.
I advise to read HAML and ERB documentation as it basics for your development process. There is a lot of information around this, so try to use search before you ask.
http://guides.rubyonrails.org/layouts_and_rendering.html
http://haml.info/
Your ERB code:
<% content_for :head do %>
<%= stylesheet_link_tag "plupload.queue" %>
<%= javascript_include_tag "plupload/plupload.full.min", "plupload/jquery.plupload.queue.min" %>
<%= javascript_tag do %>
<%= render "plupload.js"%>
<% end %>
<% end %>
<div id="photos_container">
<%= render :partial => "photo", :collection => #photos %>
</div>
<div id="uploader">
<p>You browser doesn't have HTML5, Flash or Silverlight support.</p>
</div>
In Rails 3 you can optimize your code, if you use app/views/photos/_photo.html.erb partial. Rails determines the name of the partial to use by looking at the model name in the collection.
Like this:
<div id="photos_container">
<%= render #photos %>
</div>
Read about rendering in Rails 3:
http://guides.rubyonrails.org/layouts_and_rendering.html#using-render
<div class="field">
<%= f.label :category %><br />
<%= select_tag "category", options_from_collection_for_select(#categories, "id", "name"), :prompt => "Select something" %>
<% if not #category_id.nil? %>
<script>
$("#category option").each(function(){
if ( this.value == <%= #category_id %> )
this.selected = true;
});
</script>
<% end %>
</div>
I wanna make the category <select> tag have the right value (#category_id).
I try adding some script to category.js.coffee, but I found I can't pass the #category_id to the coffee file. So the script is inline.
I don't know any other ways to solve the problem. I just think my code is ugly.
Can anybody have any other solutions about my question.
If you were me, which method will you use. Thx.
Regards,
Rails newbie
You should be able to render one of the options as pre-selected without javascript. Try options_from_collection_for_select(#categories, "id", "name", #category_id).
i have form with one selectbox (collection_select) for references column. What is proper way to translate label for this widget? For all others a use default Model.human_attribute_name (my code, Translations for Active Record Models)
If you use in your [language].yml file:
attributes:
my_model:
property: 'translatet property label'
[...]
You can simply use the following in your view:
<%= form_for([...]) do |f| %>
<div class="field">
<%= f.label :property %><br />
<%= f.collection_select [...] %>
</div>
[...]