I have a view with a form_for and it has a submit button. I would like the submit button to be styled using twitter bootstrap rails gem (which I have successfully installed into the rails project.) However the the button isn't being styled for whatever reason, and the text in the button appears different from I specified in the argument.
The source for the view, new.html.erb
<div id="sign_up">
<h1>Sign Up</h1>
<%= form_for #user do |f| %>
<% if #user.errors.any? %>
<div class="error_messages">
<h2>Form is invalid</h2>
<ul>
<% #user.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<!-- <%= f.label :email %> --><br />
<%= f.text_field :email, :class => 'input-xlarge', placeholder: 'email' %>
</div>
<div class="field">
<!-- <%= f.label :password %>--><br />
<%= f.password_field :password, :class => 'input-xlarge', placeholder: 'Password' %>
</div>
<div class="field">
<!-- <%= f.label :password_confirmation %>--><br />
<%= f.password_field :password_confirmation, :class => 'input-xlarge', placeholder: 'Password confirm' %>
</div>
<div class="actions"><%= f.submit nil, class: 'btn btn-large' "Sign Up" %></div>
<% end %>
</div>
Right now the form looks like the following,
<%= f.submit nil, class: 'btn btn-large' "Sign Up" %>
Should be:
<%= f.submit "Sign Up", class: 'btn btn-large' %>
Related
After adding styling to the devise pages, the logins are not working.
Signup redirects to login and login says Invalid Email or password.
Here is the sessions/new
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="access_social">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), class: "button button--facebook button--full-width" %>
<% end -%>
<% end -%>
</div>
<div class="oauth__divider"><span>OR</span></div>
<div class="form-group">
<%= f.label :email %>
<br />
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<br />
<%= f.password_field :password, autocomplete: "off", class: "form-control" %>
</div>
<div class="clearfix mb-2">
<div class="form-check">
<%= f.check_box :remember_me,class: "form-check-input", as: :boolean if devise_mapping.rememberable? %>
<label class="form-check-label">Remember me</label>
</div>
</div>
<div class="actions">
<%= f.submit "Sign in", class: "button button--primary button--full-width" %>
</div>
<div class="text-center mt-2">
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Forgot your password?", new_password_path(resource_name) %>
<br />
<% end -%>
</div>
<% end %>
Controllers routes and config have not been touched since changing the UI either
Exercise 2 of Hartl's Rails Tutorial chapter 10.1.1 asks to DRY out the 'new' and 'edit' views by creating a partial for the user form. As described in the exercise, an earlier exercised resulted in a discrepancy that I need to address in the partial. I am hoping this will be an easy fix. Here's my code:
This is the form partial:
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages', object: #user %>
<%= f.label :name %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, class: 'form-control' %>
<%= f.submit yield(:button_text), class: "btn btn-primary" %>
<% end %>
Drying out this edit.html.erb as such, using the form partial works fine:
<% provide(:title, 'Edit user') %>
<% provide(:button_text, 'Save changes') %>
<h1>Update your profile</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= render 'form' %>
<div class="gravatar_edit">
<%= gravatar_for #user %>
Change
</div>
</div>
</div>
This is my new.html.erb view, which should render the form partial to replace the form. The discrepancy is in the beginning of the form, where the parameters for form_for include "#user" AND "url: signup_path" :
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#user, url: signup_path) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :name %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation, class: 'form-control' %>
<%= f.submit "Create my account", class: "btn btn-primary" %>
<% end %>
</div>
</div>
Then, the improved, DRYed out view should be something like this, with some tweaks to handle the discrepancy.
<% provide(:title, 'Sign up') %>
<% provide(:button_text, 'Create my account') %>
<h1>Sign up</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= render 'form' %>
</div>
</div>
Back to the question: How can I edit the form partial to handle this discrepancy? Many thanks for reading and helping out this rails newbie!
Another option is to use the new_record? method.
So your form_for would look like this:
<%= form_for( #user, url: #user.new_record? ? signup_path : user_update_path %>
Here are the docs for new_record?.
I like to use new record for simple things like changing button text in the view. Here's an example:
<%= submit_tag(object.new_record? ? 'Update' : 'Create' , class: 'nice') %>
One option is to pass in a local variable to the partial:
<%= render 'form', url: signup_path %>
Then in the form partial:
<%= form_for(#user, url: url) do |f| %>
You can now pass in different paths for the form on a per-render basis.
So I have an app, sort of like meetup.com, users can create events, comment on the events, search the events by GPS radius.. However, I'd like to allow users to click on an 'Attend' button and then on the events/show.html.erb page show which users are attending etc...
How might I do this?
current event show.html.erb
<%= render 'shared/header' %>
<div class="container">
<div class="row">
<div class="span3">
<%= render 'sidebar' %>
</div>
<div class="span5">
<div class="new_event_form">
<div class="line1"><h4>Create event</h4></div>
<%= form_for current_user.events.new, remote: true do |f| %>
<h5>Event title:</h5>
<div><%= f.text_field :title, placeholder: "Event title", required: true, autocomplete: :off %></div>
<h5>Event description:</h5>
<div><%= f.text_area :description, placeholder: "Event description", required: true, autocomplete: :off %></div>
<h5>Event date:</h5>
<div><%= f.text_field :date %></div>
<h5>Event location:</h5>
<div><%= f.text_field :location, placeholder: "Event location", required: true, autocomplete: :off %></div>
<div>
<%= f.submit "Create event", class: 'btn btn-primary' %>
<%= link_to "Cancel", '#', class: 'btn cancel_event' %>
</div><br />
<% end %>
</div>
<div class="events_list">
<!-- look in events/event.hmlt.erb -->
<h4><%= #event.title %> at <%= #event.location %></h4>
<p><%= #event.description %></p>
<h5><i class="fa fa-calendar-o"></i> <%= #event.date.strftime("%A, %B %d, %Y") %></h5>
<h5><i class="fa fa-clock-o"></i> <%= #event.time %></h5>
<h5><i class="fa fa-map-marker"></i> <%= #event.location %></h5>
</div>
<div class="name"></div>
<%= form_for [#commentable, #comment], remote: true do |f| %>
...........and so on...
Thanks in advanced!
You need to define 'attend' action in your routes.rb and your Event controller, and then create attend.html.erb form for it.
Edit: in routes.rb
resources :events do
post 'attend', on: :member
end
in events_controller
def attend
#event.attendees << current_user
#event.save
end
in show.html.erb somewhere
<%= button_to 'Attend', attend_event_path(#event), method: :post, confirm: 'really?' %>
and make a nice attend.html.erb to say "thanks for signing up"
I am rolling my own authentication, and the issue I am running into is the edit form for my users. I here is the form...
#app/views/users/edit.html.erb
<h1>Editing User</h1>
<%= render 'form' %>
<%= link_to 'Show', #user %> |
<%= link_to 'Back', root_path %>
#app/views/users/_form.html.erb
<%= form_for #user do |f| %>
<% if #user.errors.any? %>
<div class="error_messages">
<h2>Form is invalid</h2>
<ul>
<% #user.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :email %><br />
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :password %><br />
<%= f.password_field :password %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation %>
</div>
<div class="field">
<%= f.select :user_type, options_for_select(['Bar', 'Brewery', 'Restaurant', 'Hotel']) %><br/>
</div>
<div class="actions"><%= f.submit "Sign Up" %></div>
<% end %>
The issue I am having is that when I display the edit form the :user_type field is not correct. I want this field to reflect what is currently saved for the current user, instead I just get the drop down with the first option in the list displayed.
You want to either use:
<%= f.select :user_type, options_for_select(['Bar', 'Brewery', 'Restaurant', 'Hotel'], #user.user_type) %>
or:
<%= f.select :user_type, options_for_select(['Bar', 'Brewery', 'Restaurant', 'Hotel']), :selected => #user.user_type %>
options_for_select has second parameter to preselect it...
options_for_select(['Bar', 'Brewery', 'Restaurant', 'Hotel'], #user.user_type)
I can't figure out why my 'shared/error_messages' partial isn't being rendered when it should be (i.e. when an invalid 'treating' is submitted through this form):
_treating_form.html.erb:
<%= form_for(#treating) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<div><%= f.hidden_field :requestee_id %></div>
<div>
<%= f.text_field :proposed_location, placeholder: "Propose a location here..." %>
</div>
<div>
<%= f.text_field :proposed_date, placeholder: "Propose a date here..." %>
</div>
<div class="field">
<%= f.text_area :intro, placeholder: "Write your introduction here..." %>
</div>
<%= f.submit "Send", class: "btn btn-large btn-primary" %>
<% end %>
This _treating_form.html.erb partial is called in a users/show.html.erb view:
<% provide(:title, #user.name) %>
<div class="row">
<aside class="span4">
<section>
<h1>
<%= #user.name %>
</h1>
</section>
<% if signed_in? %>
<section>
<%= render 'shared/treating_form' unless current_user?(#user) %>
</section>
<% end %>
</aside>
</div>
Here is my error_messages partial:
<% if object.errors.any? %>
<div id="error_explanation">
<div class="alert alert-error">
The form contains <%= pluralize(object.errors.count, "error") %>.
</div>
<ul>
<% object.errors.full_messages.each do |msg| %>
<li>* <%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
The error_messages partial is correctly being rendered upon validation errors triggered in submitting to user 'edit settings' page:
<% provide(:title, "Edit user") %>
<h1>Update your profile</h1>
<div class="row">
<div class="span6 offset3">
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Confirm Password" %>
<%= f.password_field :password_confirmation %>
<%= f.submit "Save changes", class: "btn btn-large btn-primary" %>
<% end %>
</div>
</div>
Any ideas why the errors aren't being shown when an invalid 'treating' is being submitted? Thanks!
Whenever you add ANY options to a partial you need to explicitly specify :partial =>
= render partial: 'shared/error_messages', object: f.object