We Keep Coding

Ruby on Rails. Load dynamic partial layouts with share data

I'm novice to Ruby and Ruby on Rails
I'm trying to load templates dynamically with shared data
I have a quizz (named game in my code) and I will add some questions to the game and some answers to these questions dynamically.
In my games/index.html.erb I have
<div class="form-group game">
<%= form.label(':name', "Quizz title") %>
<%= form.text_field ':name', class: 'form-control form-control-sm' %>
</div>
<div class="questions"></div>
<div class="row form-actions">
<div class="col-sm">
<%= link_to 'Add a question', add_partial_question_games_path, remote: true, "data-turbolinks": false, class: "btn btn-secondary" %>
</div>
<div class="col-sm text-right">
<%= form.submit 'Save', :class => "btn btn-primary" %>
</div>
</div>
When I click on 'add a question' link I append the partial layout of question which contains a link to append the answer partial layout. So I have datas on this order:
QUIZZ
Question 1
Answer 1.1
Answer 1.2
Add answer link
Question 2
Answer 2.1
Answer 2.2
Answer 2.3
Answer 2.4
Add an answer link
Add a question link
SAVE THE QUIZZ
my controller remote actions are:
def add_partial_question
respond_to do |format|
format.js
end
end
def add_partial_answer
respond_to do |format|
format.js
end
end
and the corresponding *.js.erb files are:
// add_partial_question.js.erb
$(document).ready(function() {
$('.questions').append("<%= escape_javascript(render :partial => 'games/partials/question') %>");
});
// add_partial_answer.js.erb
$(document).ready(function() {
$('.answers').append("<%= escape_javascript(render :partial => 'games/partials/answer', :locals => { :question_key => question_key }) %>");
});
my 'partials/_question.html.erb' contains
<div class="row">
<div class="col-sm">
<%= link_to 'Add an answer', add_partial_answer_games_path, remote: true, "data-turbolinks": false, class: "btn btn-secondary" %>
</div>
</div>
and the partials/_answer.html.erb:
<div class="row">
<div class="col">
<%= text_field_tag "game[questions][#{question_key}][answers][#{answer_key}][text]", 'Your answer', class: "form-control" %>
</div>
</div>
I don't any idea how I shall init, passe and increment the question_key and answer_key from controller remote actions to these partial views. Which is the best way ?
When I try to pass any variables from remote actions to the *.js.erb and then to pass them to the views it doesn't work.
I've tried to do something like this:
respond_to do |format|
format.js { render :locals => { :question_key => params[:question_key].to_i + 1 } }
end
it doesn't work.
Any ideas ?
Thank you very mutch

There is a little bit of mess in your question, for example in your // add_partial_answer.js.erb you used variable question_key which isn't define, your controller isn't RESTful etc. So instead of checking your code step by step I am dropping here link for a great railscast where you will find answer. I am hoping it will help with your problem.

Javascript not executing after Rails redirect

My application contains a very simple login and two separate AJAX calls. I have a loading spinner that is hidden automatically whenever a page is ready it is contained in index.js
$(function() {
$("loading").hide();
$("#scan_button").on("ajax:success", function(e, data, status, xhr) {
$("#standard_results").hide();
$("#results").show();
$("#results").html(data);
});
$(document).ajaxStop(function() {
$("#loading").hide();
});
$(document).ajaxStart(function() {
$('#loading').show();
});
});
When a user logs in the following happens
class SessionController < ApplicationController
def create
user = User.find_by(username: params[:session][:username])
if(user.password == params[:session][:password])
log_in user
redirect_to root_path
end
end
def destroy
logout
redirect_to root_path
end
end
The route path takes me back to 'home#index' for which the index.js file exists. When the user logs in the redirect happens and the loading spinner is hidden and all JavaScript executes as expected.
When the user hits log out however the redirect occurs, but the loading spinner is shown and no JavaScript ever gets executed. Here is my index.html.erb file that contains the JavaScript.
<% content_for :title, "Network Monitor" %>
<div class="container-fluid">
<nav class="navbar narvbar-dark bg-inverse">
<span class="navbar-brand">Network Monitor</span>
<%= link_to "Scan", scan_path, remote: true, class: "btn btn-secondary", id: "scan_button" %>
<% if logged_in? %>
<span class="pull-xs-right"><%= link_to "Logout", logout_path, class: "btn btn-secondary" %></span>
<% else %>
<%= form_for(:session, url: login_path, :html => {:class => 'form-inline pull-xs-right'}) do |f| %>
<%= f.text_field :username, class: 'form-control', placeholder: "Username" %>
<%= f.password_field :password, class: 'form-control', placeholder: "Password" %>
<%= f.submit "Log in", class: 'btn btn-primary', id: 'login_button' %>
<% end %>
<% end %>
</nav>
<div id="loading">
<%= image_tag "loading.gif", class: "loading_gif" %>
</div>
<div class="row">
<div class="col-md-12">
<div id="scan_bar">
<h3>Welcome to your network monitor!</h3> <br />
<p>To get started hit the scan button in the top right corner, this will detect the computers that are alive on your network and show them below.</p>
</div>
</div>
</div>
<div class="row">
<div id="results">
</div>
<div id="standard_results">
</div>

Solved. It was as simple as using
$(document).on('turbolinks:load', function() {});
Instead of what I had posted, this seems to be the way that Rails 5 and turbolinks want you to use, and it worked.

According to the
turbolinks document, I use the event page:change to solve the problem:
$(document).on("page:change", function(){...});
It works for me.

In case others run into this. If you are using an href or link_to try doing something like this:
<li><%= link_to "Home", jobs_path, method: :get %></li>
...where you specify the get method in the request.

Rails 4 x AJAX: partial not reloading on click with remote: true

In my Rails 4 app, I have a Post model with a custom approval attribute.
I am trying to update this custom approval attribute from the Posts#Show page when the user clicks on one of three particular links set with remote: true.
The goal is to reload only the partial displaying the content of this attribute, and not the entire page.
Here is my Post show.html.erb view:
<div id="post_show_approval">
<%= render 'approval' %>
</div>
And here is my _approval.html.erb partial, located in the app/views/posts folder:
<ul>
<li>
<% if #post.approval == "ok" %>
<span class="ok_green">
<span class="glyphicon glyphicon-ok"></span>
Post Approved
</span>
<% else %>
<span class="approval_blue" %>
<%= link_to post_path(:id => #post.id, "post[approval]" => "ok"), :class => "post_appoval_link", remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-ok"></span>
Approve this post
</span>
<% end %>
<% end %>
</li>
<li id="post_show_require_edits">
<% if #post.approval == "edit" %>
<span class="edit_yellow">
<span class="glyphicon glyphicon-repeat"></span>
This post requires edits
</span>
<% else %>
<span class="approval_blue" %>
<%= link_to post_path(:id => #post.id, "post[approval]" => "edit"), :class => "post_appoval_link", remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-repeat"></span>
Require edits for this post
</span>
<% end %>
<% end %>
</li>
<li id="post_show_to_be_deleted">
<% if #post.approval == "remove" %>
<span class="remove_red">
<span class="glyphicon glyphicon-remove"></span>
This post needs to be deleted
</span>
<% else %>
<span class="approval_blue" %>
<%= link_to post_path(:id => #post.id, "post[approval]" => "remove"), :class => "post_appoval_link", remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-remove"></span>
Mark this post as to be deleted
<% end %>
</span>
<% end %>
</li>
</ul>
As you can see, all the links with the post_approval_link class are set with remote: true.
Then, I have updated my PostsController as follows:
def update
respond_to do |format|
if #post.update(post_params)
format.html { redirect_to post_path(#post) }
format.json { render :show, status: :ok, location: #post }
format.js
else
format.html { render :edit }
format.json { render json: #post.errors, status: :unprocessable_entity }
end
end
end
And I have created an update.js.erb file in the app/views/posts folder:
$('#post_show_approval').reload(true);
—————
UPDATE: as alternatives to the above line, I also tried
$('#post_show_approval').hide().show();
and
$('#post_show_approval').toggle().toggle();
But none of these seem to work.
—————
UPDATE 2: here is another thing I tried:
$('#post_show_approval').load('<%= j render "approval" %>');
But it is not working either.
—————
UPDATE 3: when I try only
$('#post_show_approval').hide();
or
$('#post_show_approval').toggle();
The div does disappear.
But I still did not find a way to make it reappear with its content updated.
—————
UPDATE 4: also, when I use:
$('#post_show_approval').append('<%= j render(partial: "approval") %>');
The approval partial does load with its updated content... the initial content does not disappear, so every time we click on one of the links, a new line of content stacks up.
—————
However, when I click on one of the three links with the post_approval_link class, the appoval attribute of the post is actually updated to the correct value, but the #post_show_approval div is not reloaded and I need to refresh the page to see the actual changes.
What am I missing in the implementation of this AJAX feature?

The problem was that I was not using the right JavaScript method.
With:
$('#post_show_approval').html('<%= j render(partial: "approval") %>');
It is now working like a charm.

Rendering a partial to an edit form inside a popover in rails 4

Hi guys I really need help here.
I'm making a todo app and displaying each task through an iteration. Next to each task I have a pencil glyphicon.
When I click on it, I want there to be a popover containing an edit form and edit the task on the spot. I'm having a ton of troubling rendering that form.
***** UPDATE *****
Clark helped me get the popover to work. But The form inside the popover is acting like a link instead of a form so I can't type in the text area.
This is my index.html.erb
<div id='user_tasks'>
<% #tasks.each do |task| %>
<ul>
<li>
<%= task.description %>
<%= link_to edit_task_path(task), :rel => 'popover', method: 'get', remote: 'true' do %>
<span class = 'edit_task_<%=task.id%> glyphicon glyphicon-pencil'> </span>
<% end %>
</li>
</ul>
<% end %>
</div>
This is the edit.js.erb
$(function(){
$('.edit_task_<%=#task.id%>').popover({
html: true,
title: 'edit',
content: <%= escape_javascript render 'edit_form', task:#task %>
}).popover('show'); });
and my controllers look like this:
def index
#new_task= Task.new
#tasks= Task.all
end
def create
#new_task= Task.new(task_params)
#task.save
redirect_to :back
end
def edit
#task= Task.find(params[:id])
end
_edit_form.html.erb looks like this: This isn't the edit form that I plan to use. Its just a copy of the create task form. I plan to fix it once I get the popover working.
<%= form_for task, :html=>{:class=> 'form-inline'} do |f| %>
<div class='form-group'>
<%= f.text_field :description, placeholder: 'create a task' %>
<%= button_tag(type:'submit', class:"btn btn-default btn-xs") do %>
<span class='glyphicon glyphicon-plus'></span>
<% end %>
</div>
<% end %>

Rails Ajax partials passing form builder

I am loading part of my form with ajax depending on the value of a dropdown as follows:
..form_partial.js.erb
$('#custom_ajax').remove();
<% if #house == "Rent" %>
$('#rest_of_form').after('<div id="custom_ajax"><%= escape_javascript render('/houses/forms/rent') %></div>');
<% else %>
$('#rest_of_form').after('<div id="custom_ajax"><%= escape_javascript render('/houses/forms/buy') %></div>');
<% end %>
It is called here...
.._form.html.erb
<%= form_for #house, :validate => true, :html => { :class => 'form-horizontal',:multipart => true } do |f| %>
..........................................
..........................................
<div id = "rest_of_form"></div>
<div id="custom_ajax">
..........................................
..........................................
</div>
..........................................
..........................................
<script type="text/javascript">
$(document).ready(function() {
$('#house_listing_type').change(function() {
$.ajax({ url: '/houses/' + this.value + '/form_partial' });
});
});
</script>
I then can load in the files with that, and it works great the only problem being I need to pass the form builder to the partial as my _buy.html.erb looks like this
<div class="control-group">
<%= label :property_classification, "Property Classification", :class => "control-label" %>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-info-sign"></i></span>
<%= select :property_classification, ["Residential","Commercial"], {},{:class=>"input-medium"} %>
</div>
</div>
</div>
Which obviously needs the form builder, I have tried passing it through as a local etc. but to no avail. I have also attempted removing all the "f." this works, but the form is not displayed correctly, and none of the fancier form builder elements work..
How can I get the form builder to the partial?
Thanks

http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html
When not relying on form_for, the form builder elements to be used arelabel_tag and select_tag respectively.
You may find it easier to use both form_tag and fields_for in this case, rather than form_for.

I answered the same question with my proposed solution here:
pass form builder in remote_function in rails?