I've got a simple list with filter, and I want to clear the filter upon clicking clear (which also refreshes the list with all items).
I've got a form in index.html.erb:
</br >
<%= form_tag '', method: :get, remote: true do %>
<%= label_tag 'content:' %>
<%= text_field_tag :content %>
<%= label_tag 'submitter:' %>
<%= text_field_tag :submitter %>
<%= label_tag 'feeback type:' %>
<%= text_field_tag :feedback_type %>
<%= submit_tag 'Filter', class: 'btn btn-primary' %>
<%= link_to 'clear fields', feedback_messages_path, remote: true, type: 'button', class: 'btn btn-danger', id: 'clear-button' %>
<% end %>
In app/assets/feedback_messages, I've got:
$("#clear-button").click(function() {
console.log('foo');
$("#content").val(' ');
$("#submitter").val(' ');
$("#feedback_type").val(' ');
});
In application.js, I've tried every combination of require statements, but none work. Here's what I've got now, trying to explicitly load the js file:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require feedback_messages
When I load the webpage, the js file is available in sources, but will not execute. If I move the js to index.html.erb in a script tag, it works, so I don't think there's a problem with the js.
The code works appropriately with clearing lists, so I'm excluding the controller and js.erb code.
Pull remote: true from:
<%= link_to 'clear fields', feedback_messages_path, remote: true, type: 'button', class: 'btn btn-danger', id: 'clear-button' %>
try it and let me know what happens.
Related
My rails app uses UJS to submit forms all over the place, but for some reason I can't get it to work here.
I'm fairly sure I have UJS set up properly (as it works in other places):
#application.html.erb
<%= javascript_include_tag 'application' %>
#assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
In my view, I have both a form_tag and a link_to, both set to remote: true:
<%= form_tag apply_tag_applications_path, remote: true, method: :post do %>
<%= submit_tag "FORM TAG SUBMIT" %>
<% end %>
<%= link_to apply_tag_applications_path, remote: true, method: :post do %>
<h1>LINK TO SUBMIT</h1>
<% end %>
Clicking the link_to works as expected (the request format is JS):
Started POST "/tag_applications/apply" for ::1 at 2017-05-30 11:10:51 -0400
Processing by TagApplicationsController#apply as JS
But clicking the form_tag submits via HTML:
Started POST "/tag_applications/apply" for ::1 at 2017-05-30 11:11:02 -0400
Processing by TagApplicationsController#apply as HTML
Can anyone suggest what might be causing the second one not to work as expected?
Verify that you're referencing the jquery_ujs file in the layout or in assets.
#application.html.erb
<%= javascript_include_tag :jquery, :jquery_ujs %>
#assets/javascripts/application.js
require jquery.js
require jquery_ujs
Also, remote options will only work when you pass an object instead of path to form_for.
This will work
<%= form_for #apply_tag, remote: true, method: :post do |f| %>
<%= f.submit "FORM TAG SUBMIT" %>
<% end %>
I have a search bar available on every page of the webapp by adding
<body>
<%= form_tag(class_data_index_path, :method => "get", id: "search-form") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search your major" %>
<%= submit_tag "Search", :name => nil %>
<% end %>
<%= yield %>
in application.html.erb.
When I search, it shows the results, but it also navigates to /class_data?search=SearchKeyword. I want the results to show up on the current page, whether it'd be /home, /anothermodel.
How can I achieve this?
You want to use a remote form with <%= form_tag remote: true %> - see Rails form_tag remote example as an example and a starting point.
I'm trying to use bootstrap-switch-rails on my Rails project, but I can't make it work. I've been mostly following this tutorial.
This is what I tried so far.
Added this in my Gemfile
gem 'bootstrap-switch-rails', '~> 3.0.0'
Added this in the top of my app/assets/stylesheets/custom.scss
#import "bootstrap";
#import "bootstrap3-switch";
#import "bootstrap-sprockets";
/* Rest of the file omitted */
This is my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-switch
//= require_tree .
My application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
*= require bootstrap-switch3
And finally, the form where I want to use the switch:
<% content_for :head do %>
<script type="text/javascript">
$(function() {
$("input:checkbox").bootstrapSwitch();
});
</script>
<% end %>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#consultant) do |f| %>
<%= render 'consultants/consultant_error_messages' %>
<%= f.label :identifier %>
<%= f.text_field :identifier, class: 'form-control' %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :first_name %>
<%= f.text_field :first_name, class: 'form-control' %>
<%= f.label :last_name %>
<%= f.text_field :last_name, class: 'form-control' %>
<%= f.label :disabled, "Habilitar/Deshabilitar" %>
<%= f.check_box :disabled, :data => {
:size=>'small', 'on-color'=>'success', 'on-text'=>'Habilitar', 'off-text'=>'Deshabilitar'
} %>
<%= f.submit "Guardar", class: "btn btn-primary" %>
<% end %>
</div>
</div>
The checkbox is being shown as a regular checkbox, instead of a switch.
Any ideas on what should I be missing?
Thanks in advance.
Try to replace require bootstrap-switch3 with require bootstrap3-switch in your application.css
Also try executing $("input:checkbox").bootstrapSwitch(); in the console to see the output.
Another user solved the issue writing the HTML instead of using the one generated by Rails: rails 4 : change state issue with Bootstrap Switch
I have this code and I want to include glyphicon, but the code below is not working. If I remove the class subcomment_link, it will work, but I really need to include it for jquery. What is the correct syntax for link_to with remote with class specified?
<%= link_to new_subcomment_path(:response_id => response.id), class: "subcomment_link", id: "reply_new_subcomment#{response.id}", remote: true do %>
<i class="glyphicon glyphicon-pencil"></i>  Edit your profile
<% end %>
Try changing it to:
<%= link_to new_subcomment_path(:response_id => response.id), {remote: true}, {class: "subcomment_link", id: "reply_new_subcomment#{response.id}"} do %>
Usually the tag options come before the html options.
I'm creating a simple sign_up form for new users on my site. I have ran the install for simple_form bootstrap...
rails g simple_form:install --bootstrap
However, it's still not showing up and rendering as a normal simple_form.
Here is my form code:
<h2>Sign up</h2>
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name ), :html => {:class => 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<%= f.input :username, :required => true, class: "form-control"%>
<%= f.input :first_name, :required => true, class: "form-control" %>
<%= f.input :last_name, :required => true, class: "form-control" %>
<%= f.input :twitter, class: "form-control", type: "text", placeholder: "Username" %>
<%= f.input :bio, class: "form-control" %>
<%= f.input :email, :required => true, :autofocus => true, class: "form-control" %>
<div class="form-actions">
<%= f.button :submit, "Sign up", class: "btn btn-primary btn-sm" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
Not sure what I'm doing wrong here. Thanks in advance.
The sample application here mentions how you need to download Bootstrap separately (they use curl) and place it in vendor/assets/stylesheets/bootstrap.css.
Please try that.
It sounds like Bootstrap is not installed in your application or maybe you are trying to use Bootstrap 3. At the time I typed this on 2013-10-13, Simple Form did not support Bootstrap 3. See here for more details.
So that means you need to add Bootstrap 2.x to your application and Vidya has provided some good direction already.
If you are interested in using a gem to add Bootstrap 2.x, then I've provided instructions for twitter-bootstrap-rails below. Be sure to review their readme as well in case I omitted something.
In your gemfile add:
gem "twitter-bootstrap-rails", :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
Then at the rails console for your project run (I've assumed you want less support):
bundle install
rails generate bootstrap:install less
Depending on whether you want a fixed or static layout use one of the two lines below:
rails g bootstrap:layout application fixed
rails g bootstrap:layout application fluid
Finally, edit your application.css file (found in app/assets/stylesheets) so it has 'require bootstrap_and_overrides similar to the example below:
*= require_self
*= require bootstrap_and_overrides
*= require_tree .
I'm pretty sure this happens by default now but you might also want to confirm that you have 'require twitter/bootstrap in your application.js as well (found in app/assets/javascripts). An example from a project of mine is below:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
If it still doesn't work and you added this gem. Kindly let me know what version of ruby, rails, simple_form and twitter-bootstrap-rails you are using.