Submit simple form remotely on the basis of a click event - ruby-on-rails

I am trying to create a todo app in which the checkbox is created using the simple form and this needs to be submitted remotely when the checkbox is clicked. I am using the onchange() function but the form isnt getting submitted remotely. It is submitting via a full page refresh.
When a submit button is included, it submits the form remotely and everything works fine. But i am not able to get it to work without the submit button but only using the check box.
_goal.html.erb
<li id='<%= "Goal_li_#{goal.id}" %>'>
<div class="collapsible-header" tabindex="0">
<label>
<%= simple_form_for(goal, url:goal_path(goal),remote: true,authenticity_token: true) do |f| %>
<%= f.check_box :is_complete,onchange: 'this.form.submit();', disabled:goal_disabled_class(goal), class: "check_box_check" %>
<span class=<%= "line-through-goal" if goal.is_complete==1 %>>
<%= goal.title %>-<%= goal.id %>-<%= goal.status %>
</span>
<%= "<span class='new badge blue right'> #{goal.sub_goals.where(is_complete: 0).count} </span>".html_safe if goal.sub_goals.where(is_complete: 0).count > 0 %>
<% end %>
</label>
</div>
</li>
This is leading to a page refresh instead of submitting the form remotely. All the examples i have found to be working are using the submit button. How can i trigger the remote execution on the basis of checkbox click?

Because of rails-ujs it is submitted via normal HTML request. Related issue and answer.
Try this way:
onchange: 'Rails.fire(this.form, "submit")'

Related

Ruby on Rails app glitching when Chrome auto complete is being used

I have a weird bug that hangs up or makes my app unusable or freezes for a minute.
So I have a 2 forms side by side one for billing and one for shipping and it has a drop down that uses the select2 library. When a user selects this drop down the Chrome autocomplete shows up too. It's overlapping the select2 dropdown. Here's an image:
So the problem here is when the user uses that drop down to select a country and uses the Chrome autofill instead of the select2 drop down and hits the enter key the form on the right fills the country and hangs up or freezes the app. Also when they choose a country or a state it will do a get request to the server.
What I tried are:
turn off the Chrome autocomplete on the settings; it works with no issues. The form on the right won't be updated (so I concluded it was Chrome)
I added an html: {autocomplete: 'off'} but this doesn't work, and I don't know why.
Here's the form:
<%= form_for [:admin, #corporate_account], html: { autocomplete: "off" } do |f| %>
<fieldset data-hook="new_property">
<div class="row">
<div class="col-md-12">
<%= render partial: 'form', locals: { f: f } %>
</div>
</div>
</div>
<div class="col-md-12">
<%= render partial: 'address_form', locals: { f: f } %>
</div>
</div>
<div class="form-actions">
<%= render partial: 'spree/admin/shared/new_resource_links' %>
</div>
</fieldset>
<% end %>
Update
I found that when I hit the enter with the Chrome autocomplete it sends a GET request, but with the regular drop down from the app it doesn't. I think Chrome's autocomplete after hitting the enter key it sends the form.
We are using select2 for our searches. It uses jQuery and ids are dynamically added. I found the script attaches the ID dynamically. It wasn't in the .js file, it was inside the .erb file. I've added this .js script inside the .erb file.
<% content_for :head do %>
<%= javascript_tag do %>
$(document).ready(function(){
$('span#<%= s_or_b %>country .select2').on('change', function() { update_state('<%= s_or_b %>'); });
<%# bellow this comment the code that I added %>
<%# this IDs are gnerated dynamically by select2 %>
const countryID = $('span#<%= s_or_b %>country .select2 .select2-search input').attr('id')
const stateID = $('span#<%= s_or_b %>state .select2 .select2-search input').attr('id')
<%# add the type attribute search so autocomplete can be toggled on and off %>
$(`#${countryID},#${stateID}`).attr('type', 'search')
<%# on focus set the autocomplete attribute off %>
$(`#${countryID},#${stateID}`).on('focus', function(){
$(`#${countryID},#${stateID}`).attr('autocomplete', 'off')
})
});
<% end %>
<% end %>
So when I focus on the search input, Chrome's autocomplete is not working any more.

How to display music in a category when a category is clicked (without a page refresh) in Ruby on Rails?

I am building a website for a music database.
I would like to display categories like classical and hip hop first; when the user clicks on a category, I would like to display all the tracks names in that category (I would like to do this without a page refresh). I would also need to support pagination of this list displaying 10 items in one page (and I need to display buttons for display, edit, delete alongside each track in this list)
How can I accomplish this? Does bootstrap provide components that support this kind of implementation?
(If I could do this with a page refresh, I have done this before and I would know how to do it. But I am not sure how to do this without a page refresh)
On views/categories/index.html.erb:
<% #categories.each do |category| %>
<%= link_to category_path(category), :remote => true do %>
<%= category.name %>
<% end %>
<div class="category_<%= category.id %>">
</div>
<% end %>
Then create a partial views/categories/_show.html.erb (here you can insert a table or a structure with bootstrap row and columns):
<% #category.tracks.each do |track| %>
<%= track.name %>
... and you can add here delete and edit actions
<% end %>
Then create views/categories/show.js.erb:
$(".category_<%= #category.id %>").html("<%= escape_javascript(render("show")) %>");
Fyi what you are trying to do has nothing to do with bootstrap, unless you wanted for instance display tracks on a bootstrap modal.
Here is a poor man's bootstrap example I whipped up: when you click on the Track Category example, the table should expand. (You must have bootstrap v4 set up for this to work) and you must have a track_table partial as well - you can use the same partial for the two different tables that you want:
<div class="track-group">
<div class="track track-default">
<div class="track-heading">
<h4 class="track-title">
<p data-toggle="collapse" href="#collapse1"> Track Category (Click to Expand)</p>
</h4>
</div>
<div id="collapse1" class="track-collapse collapse">
<div class="track-body">
<%= render 'track-table' %>
</div>
<div class="track-footer">
</div>
</div>
</div>
</div>
Here's how it looks with an existing app on my computer:

Why does my link break (stop navigating to its location) when I use data-toggle attribute?

I am having a play around with Bootstrap 4 in Rails 5 and I am trying to get a data-toggle to work on nav-pills.
With my code below, the pill toggle works and it breaks the link_to part of the code and the link doesn't work.
<div class="card">
<div class="card-block">
<ul class="nav nav-pills nav-justified" role="tablist">
<%= link_to 'All Things', all_things_path, class: 'nav-link nav-item active' %>
<%= link_to 'Some Things', some_things_path(#things[0]), class: 'nav-link nav-item', "data-toggle" => "pill" %>
</ul>
</div>
</div>
If I remove the "data-toggle" => "pill" the link works fine and routes to the collection as required.
I have also tried using data: { toggle: "pills" } but this also breaks the link.
Anyone got any ideas?
If by "breaking the link", you mean that browser no longer navigates to a new page, then it's because bootstrap's javascript intercepts the click on the link to do the toggling.
Clicking on a link takes you to its location, a new page. Clicking a toggle element shows/hides some other element on the current page. You can't have both.

Using Paginate Directly after Submission

I am creating an evaluation form where a user will submit form after form by using kaminari pagination. The way I have it set up right now though is that the user will answer the questions, submit the form with an f.submit button, then once the profile updates, the user will have to manually select 'Next User' using the paginate button below the f.submit button. I would love for it to both submit the form and send the user to the next evaluation in line under one button action, not two. I have been playing around with trying to incorporate the paginate code into my f.submit button, but it keeps throwing errors. I was wondering if there was an easy way to go about this, thanks in advance!
<h2>Team Member Evaluation</h2>
<br> </br>
<% #users.each do |user| %>
<h4> <%= user.name %> </h4>
<%= form_for(user) do |f| %>
<% begin %>
<h8> Hunger for Wisdom </h8>
<div class="form-inline">
<div class="form-group">
<%= f.radio_button :current_one, 1 %>
<h7> 1 </h7>
</div>
<div class="form-group">
<%= f.radio_button :current_one, 2 %>
<h7> 2 </h7>
</div>
<% end %>
<div class="col-md-3 col-md-offset-4">
<%= f.submit "Submit Score", class: "btn btn-default" %>
<% rescue ActionController::RedirectBackError %>
</div>
</div>
<% end %>
<%= paginate #users %>
<% end %>
<% end %>
Right now it is set up to whenever the user submits the form, the rescue action will direct the user back to a refreshed page of the evaulation form they just submitted, and then they must click next where the <% paginate #users %> is to go to the next form. I would like once the f.submit button is pressed to update and then immediately take the user to the next form.
In the controller action for the submit you could just increment the page count like this:
#users = User.page params[:page].to_i + 1
This is assuming you aren't using any other scopes to get the #users collection. The kaminari github repo has more information on available methods here.
If it is on the first page then the page query var is probably nil so you would have to account for this and send it to page 2 in this special case.

Rails/ Recaptcha - How do I get the Recaptcha to appear only AFTER the submit button has been clicked?

I want my recaptcha to appear only after user clicks submit button on the form.
How can I implement this? I am attaching my current implementation below..
_FORM FILE
<div class="actions">
<%= recaptcha_tags %>
<%= f.submit %>
</div>
<% end %>
Well, I'd say you have to use javascript (jquery, etc.) for that. Your erb tags are already wrapped in a div with the class actions. You could simply hide that in the beginning and place a button above/underneath the div and when the user clicks that you hide the button clicked on and show the ยด.actions` div...

Resources