In the form_tags I can easily add methods and get params from the text_field_tag, for example to query a database or to perform a search.
FORM_TAG
</form>
<%= form_tag usernotes_path, method: 'get' do %>
<%= text_field_tag :query, params[:query], size: 150, placeholder: "Search", class: "searchInput"%>
<%= submit_tag 'Search', class: 'btn btn-success' %>
<% end %>
</div>
Now I am trying to use bootstrap "search" form, but not sure how to achieve the same result as the form_tag (where to put the method, how to add actions, how to perform a query?)
BootStrap Search
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<div class="col-sm-3 col-md-3">
<%= form_tag usernotes_path, method: 'get', class: 'navbar-form', role: 'search' do %>
<div class="input-group">
<%= text_field_tag :query, params[:query], size: 150, placeholder: "Search", class: "form-control"%>
</div>
<%= submit_tag 'Search', class: 'btn btn-success' %>
<div class="input-group-btn">
<%= button_tag(type: "submit", class: "btn btn-default") do %>
<i class="glyphicon glyphicon-search"></i>
<% end %>
</div>
<% end %>
</div>
This should be it, didn't tested it in an app but I think it will work, let me know in a comment if it's not.
Related
In my rails4 I would like to submit a form via AJAX that has a file uploaded via carrierwave. As far as I know it can be done via remotipart, but can't figure it out how I can do that. (Remotipart installed properly since it's working with refile gem that I also use in the app.)
With the current code below the form gets submitted according to the logs and it says the create.js.erb is rendered, but the code in the create.js.erb file never runs.
Rendered posts/create.js.erb (387.0ms)
What should I do?
form
<%= form_for #post, remote: true, method: :post, :html => { :multipart => true, class: "post-create-form" } do |f| %>
<img id="img_prev" style="margin-bottom:10px;" width=300 height=200 src="#" class="img-thumbnail hidden"/>
<%= f.text_area :body, placeholder: "Share something useful..", class: "form-control post-create-body" %>
<%= f.button "SHARE", class: "btn btn-primary btn-sm btn-create-post", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Saving..."} %>
<span class="btn btn-success btn-sm btn-message-file">Upload Image
<%= f.file_field :post_image, class: "choose-message-file", id: "avatar-upload" %>
</span>
<%= f.hidden_field :post_image_cache %>
<% end %>
create.js.erb
$('ul.errors').hide();
$('.alert-danger').hide();
$('.post-index').prepend('<%= j render #post %>');
$('.post-create-body').val('');
$('.btn-create-post').prop('disabled',true);
_post.html.erb
<div class="col-md-2">
<%= link_to user_path(post.user) do %>
<%= image_tag post.user.avatar.url(:base_thumb), class: 'post-avatar' %>
<% end %>
</div>
<div class="col-md-8">
<div class="post-info">
<%= link_to user_path(post.user) do %>
<span class="post-user-name"><%= post.user.full_name %></span>
<% end %>
<span class="post-updated"><%= local_time_ago(post.updated_at) %></span>
</div>
<div class="post-body">
<%= simple_format(find_links(h post.body)) %>
</div>
<div class="post-image" data-postlink="<%= post_path(post) %>">
<% if post.post_image? %>
<button data-toggle="modal" data-target="#post-image-modal">
<%= image_tag post.post_image.url(:base_thumb) %>
</button>
<% end %>
</div>
</div>
UPDATE:
The problem is connected to updating the post object. The update form code can be found in the _post.html.erb, so that's why <%= j render #post %> didn't work. Still don't know what the problem is.
So what works:
1. creating post that has no image
2. updating post that has no image
3. updating post that has image BUT image is not edited
Not working:
1. creating post that has image
2. updating post that has image which is edited
<%= form_for post, method: :patch, remote: true, :html => { :multipart => true } do |f| %>
<div class="modal fade updatepost" id="updatepost_<%= post.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="text-align:left">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="edittaskmodalohhhhh">Edit Task</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger" style="display:none">
<ul class="errors" style="display:none">
<%= render 'layouts/error_messages', object: f.object %>
</ul>
</div>
<div class="field form-group">
<%= f.file_field :post_image, id: "avatar-upload-update" %>
<%= f.hidden_field :post_image_cache %>
</div>
<div class="field form-group">
<%= f.text_area :body, class: "form-control edit-post-body" %>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="updatepostclose">Close</button>
<%= f.button "Update post", class: 'btn btn-primary edit-post-submit', data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Saving..."} %>
</div>
</div>
</div>
</div>
<% end %>
update.js.erb
$("ul.errors").html("");
<% if #post.errors.any? %>
$('.alert-danger').show();
$('ul.errors').show();
<% #post.errors.full_messages.each do |message| %>
$("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
<% end %>
<% else %>
$('ul.errors').hide();
$('.alert-danger').hide();
$('#updatepost_<%= #post.id %>').modal('hide');
$post = $('<%= j render #post %>');
editPostHideDanger($post);
$('#post_<%= #post.id %>').remove();
$(".new-post-insert").prepend($post);
$("html, body").animate({ scrollTop: 0 }, "slow");
<% end %>
There was some issue (still don't know what) with the bootstrap modals. I changed the structure of the modals and now it's working fine.
This is the HTML I am trying to produce:
<div class="col-lg-3">
<div class="input-group custom-search-form">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
This is my vanilla Rails form helper:
<div class="col-lg-3">
<div class="input-group custom-search-form">
<%= form_tag(dashboard_index_path, :method => "get", id: "search-form", :class => "navbar-form navbar-left") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search videos", :class => "form-control" %>
<span class="input-group-btn">
<%= submit_tag "", name: nil, class: "btn btn-default" %>
<span class="glyphicon glyphicon-search"></span>
</span>
<% end %>
</div><!-- /input-group -->
</div> <!-- //col-lg-3 -->
This is what this looks like:
Whereas what I am trying to achieve is this:
Generated from this:
http://bootsnipp.com/snippets/featured/search-box
I would like to generate the above HTML, using simple_form_for, rather than the form_tag helper.
So I have simple_form installed. How do I convert this form_tag into a simple_form_for call?
<%= form_tag(dashboard_index_path, :method => "get", id: "search-form", :class => "navbar-form navbar-left") do %>
You can do this with form_tag also. Try below code :
<%= form_tag(dashboard_index_path, :method => "get", id: "search-form", :class => "navbar-form navbar-left") do %>
<div class="col-lg-3">
<div class="input-group custom-search-form">
<%= text_field_tag :search, params[:search], placeholder: "Search videos", :class => "form-control" %>
<span class="input-group-btn">
<%= button_tag "", name: nil, class: "btn btn-default", type: "button" do %>
<span class="glyphicon glyphicon-search"></span>
<% end %>
</span>
</div><!-- /input-group -->
</div> <!-- //col-lg-3 -->
<% end %>
Form_tag do not generate an input html class and submit_tag neither a button html class, and maybe css code expect this class, try with button_tag
I can't figure out the proper formatting to modify my form partial in my view to look like the bootstrap form below with a appended button like this;
<div class="col-lg-9">
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
I would like the form to post to :home and the appended button to replace the default f.submit button in a Scaffold. Here's a Scaffold form partial that I'd like to modify.
<%= form_for #anesu, :html => { :class => 'form-horizontal' } do |f| %>
<div class="control-group">
<%= f.label :home, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :home, :class => 'text_field' %>
</div>
</div>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
anesus_path, :class => 'btn' %>
</div>
<% end %>
Please guide me on how to format my code and the right methods to use
<%= form_for #anesu do |f| %>
<div class="col-lg-9">
<div class="input-group input-group-lg">
<%= f.text_field :home, :class => 'form-control' %>
<span class="input-group-btn">
<%= f.submit "Go!", :class => 'btn btn-primary' %>
</span>
</div>
</div>
<% end %>
I have the following code in my view file
<%= form_tag search_path, class: "form-inline", method: :get do %>
<div class="input-group input-group-lg">
<% if params[:query].present? %>
<div class="input-group-btn">
<%= link_to "clear", search_path, class: "btn btn-default" %></div>
<%= text_field_tag :query, params[:query], id: "univ_search", autocomplete: "on"%>
<div class="input-group-btn">
<%= submit_tag "Search", class: "btn btn-primary"%>
</div>
</div>
<%end%>
<%end%>
However, it doesn't show any text field or buttons in the browser. Can someone suggest a way to resolve this?
Looks like the condition
<% if params[:query].present? %>
is preventing the view.
Here is my view file
<%= form_tag results_path, class: "form-inline", :method => :get do %>
<div class="input-group input-group-lg" >
<div class="input-group-btn">
<%= link_to "clear", results_path, class: "btn btn-default" %>
</div>
<%= text_field_tag :query, params[:query], class: "form-control", id: "result_search", autocomplete: "on" %>
<div class=input-group-btn">
<%= submit_tag "Search", class: "btn btn-primary" %>
</div>
</div>
<%end%>
But I can see only clear button. Both text field and submit button are not displayed and when I hover around I see a disable symbol. Can anyone tell me where I am doing this wrong?