Rails 3.0.3 does not seems to accept <%= f.text_area :message, :class => "share_ta" %> as a valid statement, and says ActionView::Template::Error (undefined method 'message' for []:Array):
Does anyone know why?
--Edit--
This is the form_for
<%= form_for :activity, :url => post_activity_path do |f| %>
<div class="share_tb">
<div class=share_t><span style="margin-left: 10px;">Tell us what's new <span style="color: #1fc2d1;"><%= #user.name %></span></span></div>
<%= f.text_area :message, :class => "share_ta" %>
</div>
<div id=sm_share class=sm_share_rc>
<ul>
<li style="color: #6b6b6b; font-size: 10pt; display: inline; list-style-type: none; float: right; margin-right: 10px; margin-top: 5px;"><%= f.check_box :everyone, "0", :class => "styled" %>Everyone</li>
<li style="color: #6b6b6b; font-size: 9pt; display: inline; list-style-type: none; height: 3px; float: left; margin-top: 5px;"><input type="checkbox" name="friends_only" value="3" class="styled">My Friends<br></li>
</ul>
<%= f.submit "Share", :class => "sm_share_b" %>
</div>
</div>
<% end %>
#Amit,
How have you specified form_for?
EDIT: 2nd time with more information from original poster.
It should be
<%= form_for :activity, :url => acti_path do |f| %>
<%= f.text_area :message, :class => "share_ta" %>
<% end %>
Related
I am making a simple search in rails on the index page. My problem is that on debug I get the correct results but they don't show on the frontend.
def index
if !params[:category].present? and !params[:title].present?
#services = Service.take(4)
else
if params[:category] != "Find Service" and params[:title].present?
#services = Service.where(category: params[:category], title: params[:title]).take(4)
elsif params[:category] == "Find Service" and params[:title].present?
#services = Service.where(title: params[:title]).take(4)
elsif params[:category] != "Find Service" and !params[:title].present?
#services = Service.where(category: params[:category]).take(4)
else
#services = Service.take(4)
end
end
end
My view index.html.erb
<%= form_with(url: "services", method: "get") do |form| %>
<div class="banner-input" style="margin-top">
<div class="listing-sort listing-sort--main-listing" style="width: 50%;float: left; border-radius: 6px; border: 2px solid white; background: transparent; padding: 0px;">
<input type="submit" value="" class="main-listing__form-field agent-submit" style="width: 10% ;float:right">
<%= form.text_field "title", id: "search_agent", class: "main-listing__form-field ", placeholder: "Search by Name or Location...", style: "width: 75% ;float:right; background: transparent; color: white!;" %>
<div class="listing-sort__inner" style="float:left;margin: 0px; width: 25%; padding: 0px;">
<p class="listing-sort__sort">
<%= form.select("category",options_for_select(["Find Service", "Assembly", "Carpet Cleaning", "Electrical", "House Cleaning", "HVAC", "Handyman", "IT", "Junk Removal", "Lawn Care","Moving", "Painting", "Plumbing", "Staging", "Photography", "Videography", "Inspectors"], :selected => "Find Service"), {include_blank: false}, { :class => 'ht-field listing-sort__field' }) %>
</p><!-- .listing-sort__sort -->
</div><!-- .listing-sort__inner -->
</div><!-- .listing-sort -->
</div>
<% end %>
<section style="margin-top: 50px">
<h2 style="margin-left: 15px; padding-bottom: 30px; font-size: 24px;">Recently viewed & more</h2>
<% #services.each do |service| %>
<%= render 'services/service_card', :f => service %>
<% end %>
</section>
<section class="jumbotron"style="margin-top: 50px">
<h2 style="margin-left: 15px; padding-bottom: 30px; font-size: 24px;">Pro SEM services
</h2>
<% #services.each do |service| %>
<%= render 'services/service_card', :f => service %>
<% end %>
</section>
This is _service_card
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="padding-bottom: 10px">
<div class="boxes">
<div class="box-img">
<img src="assets/MobileApps.png">
</div>
<div class="user-detail-main">
<div class="user-detail-img">
<img src="assets/MobileApps.png">
</div>
<div class="user-detail">
<a><h3><%= f.user.profile.first.first_name %></h3></a>
<p>Level 1 Seller</p>
</div>
<div class="user-detail-para">
<% byebug %>
<p><%= f.description %></p>
</div>
<div style="padding-top: 50px;">
<i class="fas fa-star" style="color: #ffbf00"></i> (5)
</div>
</div>
<div class="user-detail-footer">
<div class="heart-icon">
<i class="fas fa-heart" style="color: #c6c6c6"></i>
<i class="fas fa-bars" style="color: #c6c6c6"></i>
</div>
<div class="user-value">
<p>Starting At $ <%= f.packages.first.price%></p>
</div>
</div>
</div>
Please help me regarding this. Looking forward. It is working fine without search, but with search it doesn't update the results and show same results.
I have the following code:
<div class="skinny_wrapper wrapper_padding">
<%= form_for #contact do |f| %>
<%= f.label :name %> <br>
<%= f.text_field :name, required: true %>
<br>
<%= f.label :email %> <br>
<%= f.email_field :email, required: true %>
<br>
<%= f.label :message %> <br>
<%= f.text_area :message, as: :text %>
<div class="hidden">
<%= f.label :nickname %> <br>
<%= f.text_field :nickname, hint: "leave this field blank" %>
</div>
<%= f.submit "Send Message", class: "button" %>
<% end %>
</div>
The email input field is not taking the same formatting as the other fields, and is displaying as follows:
Email form issue
I'm not sure why this is happening.
The "skinny_wrapper" and "wrapper_padding" classes contain the following CSS:
.skinny_wrapper {
width: 80%;
max-width: 760px;
margin: 0 auto;
}
.wrapper_padding {
padding: 1.8rem 0;
}
.skinny_wrapper{
position:relative;
}
.skinny_wrapper input[type="text"],input[type="email"],.skinny_wrapper textarea{
width: 80%;
max-width: 760px;
margin: 0 auto;
display:block;
}
.wrapper_padding input[type="text"],input[type="email"],.wrapper_padding textarea{
padding: 1.8rem 0;
}
Try this and let me know what you got!
When I use this, it works
<%= form_for(#patient, url: patient_add_comment_path(#patient)) do |f| %>
<%= f.text_area :doctor_comment, cols: 65, rows: 3, style: "resize: none; border: 2px solid #888; background-color:#FFF; font-size: 16px; margin-top:0px; margin-left:5px;", placeholder: "doktor comment.." %>
<%= f.text_area :hidden_comment, cols: 65, rows: 3, style: "resize: none; border: 2px solid #888; background-color:#FFF; font-size: 16px; margin-top:0px; margin-left:5px;", placeholder: "doktor hidden comment.." %>
<%= f.submit "Kaydet", class: "btn btn-circle green-haze btn-sm", style: "margin-top: 5px;"%>
<% end %>
But I wanted to use text editor for this for using the class of 'summernote_1'
<div class="col-md-12">
<%= form_for(#patient, url: patient_add_comment_path(#patient)) do |f| %>
<div class="col-md-6">
Doktor Comment <%= f.text_area :doctor_comment, class: "summernote_1"%>
</div>
<div class="col-md-6">
Hidden Comment <%= f.text_area :hidden_comment, class: "summernote_1"%>
</div>
<%= f.submit "Save", class: "btn btn-circle green-haze btn-sm", style: "margin-top: 5px;"%>
<% end %>
</div>
Bu when I click Save button, the link try to send and it does not update, how can I solve this problem?
http://localhost:3000/doctors/2?utf8=✓&_method=patch&authenticity_token=OPPiCvNbcONDyHzzEQ%3D%3D&patient[doctor_comment]=asdfadsfasdfasdfasdfa&patient[hidden_comment]=asdfadsfasd&commit=Save
I am using bootstrap 3 and rails 4. I want to remove the white input field line under Avatar and only display my file upload button!
This is what it looks like:
This is my edit.html.erb:
<div class="col-lg-5">
<div class="well bs-component">
<h2>Edit <%= resource_name.to_s.humanize %></h2>
<%= bootstrap_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, :multipart => true }) do |f| %>
<%= devise_error_messages! %>
<%= image_tag #user.avatar.url %>
<div>
<%= f.email_field :email, :autofocus => true %></div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div> <i>(leave blank if you don't want to change it)</i><br />
<%= f.password_field :password, :autocomplete => "off" %></div>
<div><br />
<%= f.password_field :password_confirmation %></div>
<div><i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password %></div>
<%= f.label 'Add an image' %>
<%= f.file_field :avatar %>
<div><%= f.submit "Update" %></div>
<% end %>
<h3>Cancel my account</h3>
<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), :data => { :confirm => "Are you sure?" }, :method => :delete %></p>
<%= link_to "Back", :back %>
</div>
</div>
This is my html output:
<h2>Edit User</h2>
<form accept-charset="UTF-8" action="/users" class="edit_user" enctype="multipart/form-data" id="edit_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="_method" value="put" type="hidden"><input name="authenticity_token" value="vpVmH4k1YDXgJxAiZtVoI872hR67COFNoo1irki8sAY=" type="hidden"></div>
<img alt="Justdoit" src="/system/users/avatars/000/000/001/original/justdoit.png?1393323443">
<div>
<div class="form-group"><label for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" value="ggeorgiev#live.co.uk" type="email"></div></div>
<div> <i>(leave blank if you don't want to change it)</i><br>
<div class="form-group"><label for="user_password">Password</label><input autocomplete="off" class="form-control" id="user_password" name="user[password]" type="password"></div></div>
<div><br>
<div class="form-group"><label for="user_password_confirmation">Password confirmation</label><input class="form-control" id="user_password_confirmation" name="user[password_confirmation]" type="password"></div></div>
<div><i>(we need your current password to confirm your changes)</i><br>
<div class="form-group"><label for="user_current_password">Current password</label><input class="form-control" id="user_current_password" name="user[current_password]" type="password"></div></div>
<label for="user_Add an image">Add an image</label>
<div class="form-group"><label for="user_avatar">Avatar</label><input class="form-control" id="user_avatar" name="user[avatar]" type="file"></div>
<div><input class="btn btn-default" name="commit" value="Update" type="submit"></div>
</form>
<h3>Cancel my account</h3>
<p>Unhappy? </p><form action="/users" class="button_to" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" value="Cancel my account" type="submit"><input name="authenticity_token" value="vpVmH4k1YDXgJxAiZtVoI872hR67COFNoo1irki8sAY=" type="hidden"></div></form><p></p>
Back
Styling the HTML input elements is not something browsers support currently input type=file show only button
We recently used jquery-file-upload to style this type of button (site):
This basically works by replacing the default button with a simple CSS-based one. The code we used is here:
.items .avatar {
display: inline-block;
position: relative;
background: #000;
width: 260px;
}
.items .avatar .avatar img { display: block; }
.items .avatar .avatar { position: relative; }
.items .avatar .avatar:after {
transition: opacity 0.25s ease;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 160px 0 0 107px;
content: url('profile/new_avatar.png');
background: url('profile/photo_delete_bg.png');
opacity: 0;
z-index: 2;
}
.items .avatar .avatar input { z-index: 999; height: 100%;}
.items .avatar .avatar:hover:after { opacity: 0.8; }
.items .avatar .avatar:active:after { opacity: 0.6; }
<div class="items">
<div class="avatar">
<!-- New Avatar Upload Form -->
<%= form_for :upload, :html => {:multipart => true, :id => "avatar"}, :method => :put, url: profile_path(current_user.id), "data_id" => current_user.id do |f| %>
<div class="btn btn-success fileinput-button avatar" id="avatar_container">
<%= f.file_field :avatar, :title => "Upload New" %>
<%= image_tag(#user.profile.avatar.url, :width=> '100%', :id => "avatar_img", :alt => name?(#user)) %>
</div>
<% end %>
<div class="name"><%= link_to name?(#user), root_path %></div>
</div>
There is a much better setup on this question (I copied directly from it for you):
You can try a working example here: http://jsfiddle.net/VQJ9V/307/
(Tested in FF 7, IE 9, Safari 5, Opera 11 and Chrome 14)
It works by creating a big file input (with font-size:50px), then
wrapping it in a div that has a fixed size and overflow:hidden. The
input is then only visible through this "window" div. The div can be
given a background image or color, text can be added, and the input
can be made transparent to reveal the div background:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/> </div> CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF; } .fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0) }
I want to create search by clicking on a category. I have this code which works
<%= search_form_for #q , id: 'myform' , :html => {:class => "form-inline"} do |f| %>
<%= f.text_field :category_id_eq, value: 1, type: 'hidden' %>
<%= content_tag(:button, "Foo", :type=>:submit) do %>
<div class="col-sm-3 ">
Image goes here
</div>
<% end %> <% end %>
but the button is not the image I want. It is just a big ugly button. Therefore I want to do something like this. Bt it does not work.
<%= search_form_for #q , id: 'myform' , :html => {:class => "form-inline"} do |f| %>
<%= f.text_field :category_id_eq, value: 1, type: 'hidden' %>
<div class="col-sm-3 " onclick="document.myform.submit()">
Image goes here
</div>
<% end %><% end %>
My question exactly is, how do I turn a div into a submit button? or how can I search by clicking on an image.
Thanks.
This is the way I solved the problem. The Use the first example which was correct and I simply style it with css.
<%= search_form_for #q , id: 'myform' , :html => {:class => "form-inline"} do |f| %>
<%= f.text_field :category_id_eq, value: 1, type: 'hidden' %>
<%= content_tag(:button, "Foo", :type=>:submit, class: 'category_button' ) do %>
<div class="col-sm-3 ">
Image goes here
</div>
<% end %>
<% end %>
CSS I reset Code:
.category_button{
background: none repeat scroll 0 0 transparent;
margin: 0;
padding: 0;
border: none;
display: inline-block;
height: 0px;
width: 0px;
}