Develop Reference

Rails 5 ajax form: submit form on clicking one of the 2 radio buttons in Ajax

Note:
Similar questions exist but none of them resemble my case
I am making a small Ajax form in my rails views with yes or no radio buttons, I made this form with remote: true and it acts correctly as Ajax if I use a separate submit button (no page reload happens & form is passed to controller)
If I use Jquery to make the radio buttons themselves submit the form, then it submits but not in Ajax (but with a page reload)
So how to fix this to:
Submit form on clicking one of the 2 radio buttons in Ajax?
The two things I tried:
1) Make two different submit buttons & try to adjust the form value in the submit btn itself, if I make them as submit buttons, Ajax works well but the form doesn't get my required value
<div class="radio-button-btn-wrapper mr-2">
<%= f.submit t('yes'), recommended: true, class: "radio-button-btn-label-white background-green" %>
</div>
<div class="radio-button-btn-wrapper mr-2">
<%= f.submit t('no'), recommended: false, class: "radio-button-btn-label-white background-red" %>
</div>
2) Adjust the radio buttons to submit the form in Ajax manner (tried this but it didn't work)
<%= simple_form_for [...model names], remote: true do |f| %>
<div class="flex">
<div class="radio-button-btn-wrapper mr-2">
<%= label :recommended, t('yes'), class: "radio-button-btn-label white" %>
<%= f.radio_button :recommended, true, onclick: "$(this).closest('form').submit();", class: "radio-button-btn background-green" %>
</div>
<div class="radio-button-btn-wrapper">
<%= label :recommended, t('no'), class: "radio-button-btn-label white" %>
<%= f.radio_button :recommended, false, onclick: "$.ajax((this).closest('form').submit());", class: "radio-button-btn background-red" %>
</div>
</div>

What worked for me was adding a 'normal' submit button and set it to display none. Then add an eventListener that listen to a click on the radio button and if that happens, let it click on the hidden submit button.
<%= simple_form_for [...model names], remote: true do |f| %>
<div class="flex">
<div class="radio-button-btn-wrapper mr-2">
<%= label :recommended, t('yes'), class: "radio-button-btn-label white" %>
<%= f.radio_button :recommended, true, class: "radio-button-btn background-green" %>
</div>
<div class="radio-button-btn-wrapper">
<%= label :recommended, t('no'), class: "radio-button-btn-label white" %>
<%= f.radio_button :recommended, false, class: "radio-button-btn background-red" %>
</div>
<%= f.submit '', class: 'd-none', id: 'submitMyForm' %>
</div>
document.addEventListener('click', function(event){
if(event.target.classList.contains('radio-button-btn'){
document.querySelector('#submitMyForm').click();
}
});

Please look into the code below and try to adapt it for your case. This is working code I have tested in my Rails app.
The basic idea is instead of trying to make the radio buttons as submit buttons I employed the approach of a hidden form and then bind click events on radio buttons. In the button click handler I set the selected radio button's value as a hidden field value in hidden form and submit the hidden form. It gets submitted as an AJAX request and on controller-end handle the JS response.
Hope this helps.
routes.rb
root "welcome#index"
post "welcome_submit_form" => "welcome#submit_form", as: :welcome_submit_form
app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
def index
end
def submit_form
#received_radio_value = params[:selected_radio_value]
render file: "welcome/submit_form_response.js.haml"
end
end
app/views/welcome/index.html.haml
.my-container<
%div(style='display: none;')
= form_tag(welcome_submit_form_path, class: 'my-hidden-form', remote: true) do |f|
= hidden_field_tag "selected_radio_value", nil
= radio_button_tag 'favorite_color', 'red', false, class: 'my-radio-btn'
Red
= radio_button_tag 'favorite_color', 'blue', false, class: 'my-radio-btn'
Blue
.my-selected-radio-value(style='display: none')
app/views/welcome/submit_form_response.html.haml
%h2= "My Radio Value: #{#received_radio_value}"
app/views/welcome/submit_form_response.js.haml
- response_markup = escape_javascript(render( partial: "welcome/submit_form_response.html.haml" ))
:plain
var responseMarkup = "#{response_markup}";
var responseContainer = $('.my-selected-radio-value');
responseContainer.html(responseMarkup);
responseContainer.show();
app/assets/javascripts/welcome.js
(function ($) {
bindClickEventOnMyRadioBtn = function() {
$('.my-container .my-radio-btn').off('click').on('click', function(event) {
var selectedRadioVal = $(this).val();
var myHiddenForm = $('.my-container .my-hidden-form');
var radioValueField = myHiddenForm.find('input[name=selected_radio_value]');
radioValueField.val(selectedRadioVal);
myHiddenForm.submit();
})
}
}) (jQuery);
var ready;
ready = function() {
bindClickEventOnMyRadioBtn();
};
$(document).ready(ready);

After extensive searching for why this happens & how to fix it in the easiest way, I found this issue in Rails 5.2 & thanks to this solution from Padi we should use this code to make it work as expected:
// Get hold of the form object
form = document.querySelector('form');
// Use the Rails fire helper
Rails.fire(form, 'submit');

How to show a form on load

How to show form on load. Now I can see form fields on click of button (add keyskills). I want all function to be work together.On load i want to see the form and onclick 'add key skill' or 'remove key skill' it should add and remove(now on click of add or remove it is working, but not sees the form on load, only on click of 'add key skill' i can see the form)
$(function()
{
function check_to_hide_or_show_add_key_skill_link()
{
if ($('#key_skills .nested-fields:visible').length == 4) {
$('#key_skills .links a').hide();
} else {
$('#key_skills .links a').show();
}
}
$('#key_skills').on('cocoon:after-insert', function()
{
check_to_hide_or_show_add_key_skill_link();
});
$('#key_skills').on('cocoon:after-remove', function()
{
check_to_hide_or_show_add_key_skill_link();
});
check_to_hide_or_show_add_key_skill_link();
});
My form
Key Skills*
<div id="key_skills">
<%= f.simple_fields_for :key_skills do |key_skill| %>
<div class="nested-fields">
<div class="field">
<%= f.input :name , input_html: { class: 'form-control keySkill', required: true }%>
<%= f.input :relevant_experience, input_html: { class: 'form-control', required: true } %>
<%= link_to_remove_association "Remove Skill", f %>
</div>
</div>
<% end %>
<div class="links">
<%= link_to_add_association 'Add Key Skill', f, :key_skills, class: "links" %>
</div>
</div>
This is my current output now. On click of add key skill i will get form,but i want it on load)

Since you do not provide a lot of information, I have no idea what the name of the top-element is, but let us assume it is a Job and a job has many key_skills.
In your JobsController there is a create method, more or less as follows:
def create
#job = Job.new
end
if you want to immediately add a key-skill to fill in you can just write
def create
#job = Job.new
#job.key_skills.build
end
(which will add an empty key-skill to fill in).
Related issue on cocoon-repository: https://github.com/nathanvda/cocoon/issues/420

Is Rails Collection_Select onchange still supported?

I'm trying to create a text field that is visible only when the user selects "Other" from a dropdown menu.
I've done this before with some jQuery and rails "select" but I haven't been able to get it working for "collection_select".
People say that onChange should work but so far I have had no luck.
Collection Select:
<%= f.collection_select(:professor, Professor.order(:fullname), :id, :fullname,
include_blank: false, :prompt => "Other", :onchange => "review_professor();")%>
<%= f.text_field :professor, class: "class-reveal", style: "display: none;"%>
Javascript:
review_professor = function() {
if(this.value == "Other") {
$('.class-reveal').show();
$('.class-reveal').val('');
}else{
$('.class-reaveal').hide();
$('.class-reveal').val(this.value);
}
});
Any ideas of why this is not working or another way I can do this? Is collection_select still supported?

It still works for collection_select, it just needs to go in the html_options hash, like so:
{include_blank: false, prompt: "Other"}, {onchange: "review_professor();"}

show and hide blocks while changing in dropdown [Rails4, jquery]

I have a form which contains a dropdown of 3 values QUESTIONS_TYPES = {'single', 'multiple', A text}
<div class="field">
<%= f.label :question_type %><br>
<%= f.select :question_type, Question::QUESTIONS_TYPES, prompt: 'Select a question type' %>
</div>
Using Jquery, this dropdown shows other fields(in the block whose class is .answers_list) depending of the choosing value.
$(document).ready(function(){
$('#question_question_type').change(function(){
var qst_type = $('#question_question_type option:selected').text()
if (qst_type == 'Multiple' || qst_type == 'Single'){
$('.answers_list').show();
} else{
$('.answers_list').hide();
}
});
});
The thing is when I access to the form via a link:
<%= link_to 'New Question', new_question_path %>
My dropdown doesn't respond the jQuery action, once i refresh the page it does. Any suggestion?
Thanks!!

use
$( ".target" ).toggle();
see
Click here

jquery slider that wont show up after first call on a rails app

I have a rails app that gives you a list of people.
When you click on a name, it shows you a div brought by an ajax call with a jquery slider bar, that you can adjust.
You can then close that div.
Should you open it again (for the same user), the ajax call goes back to retrieve the div with the slider
everything is there except for the slider bar. why?
Code:
inside the index.html, a div is called
<div id='relationships'>
<%= render #relationships %>
</div>
the div has a partial. here is the partial _relationship.html.erb
<%= div_for relationship do %>
<%= link_to image_tag('images/orange_man.jpg'), show_path(:id => relationship.id), :remote => true %>
<% end %>
when you click on the image 'orange man', the js request goes, up to the show action:
def show
#relationship = Relationship.find(params[:id])
respond_to do |format|
format.html
format.js
end
end
and then since its a js call, the show.js.erb is called
$("#relationship_<%= #relationship.id %>").append("<%= escape_javascript(render 'knows_me')%>");
which has the knows_me partial called. the _knows_me.html.erb
<div id ="relationship_knows_me_#{#relationship.id}">
<a class="close">X</a>
*****this is where you click to hide the div*****
<% div_slider_id = "slider_knows_me_#{#relationship.id}" %>
<%= form_tag('/relationships/update/', :remote => true) do %>
<%= hidden_field_tag 'relationship_id', value = #relationship.id %>
<div id="<%= div_slider_id %>" class="sliders"></div>
<% end %>
</div>
<script type='text/javascript'>
$('a.close').on("click", function() {
$(this).parent().slideUp();
});
$(document).ready( function() {
$(function() {
$( "#<%= div_slider_id %>" ).slider({
orientation: "horizontal",
range: "min",
value: <%= #knows_me %>,
min: 0,
max: 100,
stop: function( event, ui ) {
$( "#<%= amount_id %>" ).val( ui.value );
$(this).submit();
}
});
});
});
</script>
why does the slide show up only the first time? why it wont show up after i slideUp the div and request it again?.
Thanks in advance

instead of using div id use div class. i was having same problem but it was solved after using div class

turns out super engineer was kind of right. The id of the div was already there so since I hid it it wont show up again. I just changed the id of the div when getting the call back and problem solved.