Rails dynamic form remote true controller not responding - javascript

I am trying to establish a dynamic form on a contact's page. I would like on this page to be a link that says "add an email address" and then when I click on it, a form appears to enter email address.
So I used a link_to with remote true :
= link_to "Add an email", add_email_path, id:'link-remote-link', remote: true
In my controller i specified :
def add_email
render layout: false
end
But when I receive my response with listening on ajax:sucess, layout is still their in the variable. But I just want the form add_email.html.haml
In order to try to know if the code in my controller was executed, I tryed to put a creation of an object in it. Fact is that it was never created.
Never the less, rails console writes "Processing by ContactsController#add_email as JS
"
So...why is it not executed ?
Thank you :)

Layout
We set the layout in the application_controller to manage the ajax responses:
#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
layout Proc.new { |controller| !controller.request.xhr? }
end
You may wish to try this - to see if it's the call in your controller which is rendering the layout.
Personally, I think your layout: false call is being overridden with some other element / part of your controller. I'd recommend checking to make sure this is the case
--
Controller
As you've stated, the case may be that your controller isn't being called, or processed correctly.
This could be caused by a number of issues, most notably from having incorrect routes, or some other dependency preventing the method from firing properly.
To clarify, I would make sure I have the following set up:
#config/routes.rb
resources :contacts do
get :add_email, on: :collection
end
#app/controllers/contacts_controller.rb
class ContactsController < ApplicationController
def add_email
...
end
end

Related

Rails 5.2. Rendering a js.erb partial from a helper method

I have a model called Question, and it has action create;
My goal is to display a flash message instantly, using a helper method (show_alert for example) when the instance is not valid.
question_controller.rb
def create
question = Question.new(question_params)
if question.save then
redirect_to show_question_path(question.id)
else
show_alert(:warning, question.errors)
end
end
application_controller.rb
helper_method :show_alert
def show_alert(type, message)
#type = type; #msg = message
respond_to do |format|
format.js { render :template => 'alert.js.erb'}
end
end
alert.js.erb
var div = $('<div></div>').addClass(`alert alert-${#type}`)
$('<ul></ul>').append( $('<li></li>').html(#msg)
div.append(ul)
$('#alerts').html(div)
But instead of displaying the flash, I get only the partial's code on the white screen.
see the screenshot
Since I've used respond_to I got another error: ActionController::UnknownFormat
I need the snippet of code in alert.js.erb to be executed, in order to render the flash, I think the trick is somewhere in the render function, but two hours of googling were just a waste of time.
Please help! Thank you in advance
ActionController::UnknownFormat error is showing up because the browser is sending HTML request to Rails server, but the respond_to block has only specified what to do in case of a javascript request from web server.
You will need to add a little bit of Ajax to achieve what you want. See this tutorial on Ajax. https://www.tutorialspoint.com/ruby-on-rails/rails-and-ajax.htm
Ajax will send a js request to browser in the background (i.e the browser will not refresh or show any signs of loading). This js request will be sent to Rails server and it will return the .js.erb file containing the script back to the browser. Now since this script was returned as a response to Ajax request by browser, the browser will already know that it is javascript that needs to be executed.
If you do not wish to implement Ajax, you have the alternate of doing something like this in your create controller:-
def create
question = Question.new(question_params)
if question.save then
redirect_to show_question_path(question.id)
else
redirect_to new_question_path(error: question.errors) #new_question_path is the action that displays the question form to the user
end
end
and then you can initialize an error variable in the action that displays the question form. e.g.
def new
#error=params[:error]
#rest of the code...
end
And then in somewhere in your new.html.erb (or whatever the html.erb file name is)
<script>
<% if #error %>
var div = $('<div></div>').addClass(`alert alert-<%= #type %>`)
$('<ul></ul>').append( $('<li></li>').html(<%= #msg %>)
div.append(ul)
$('#alerts').html(div)
<% end %>
// you might need to tweak the variable names in controller or the above code
</script>
(This code above may not be perfect. its just to give u an idea)
However this approach will not be as quick and beautiful as ajax because when the user will submit their question, the entire page will load again to display the error warning.
By default, all output from helpers is escaped. To show the HTMl as-is, you need to use the html_safe method (https://apidock.com/rails/v4.2.1/String/html_safe). See Using helpers in a view escapes the html?
I cannot be sure this without seeing your alert.js.erb but it could be that you need to use escape_javascript in your alert.js.erb
Something like (and I haven't tested this out) in your alert.js.erb
$('<%= escape_javascript("#{type} - #{msg}") %>').appendTo("#alert")
You can read more about it on Rails Guides - Working With Javascript in Rails
Hope this helps!

Including ActionController::Live breaks existing AJAX calls

I have a controller with multiple actions/views, only one of which will take advantage of the ActionController::Live module. However, once included, AJAX actions (on unrelated pages) no longer render on the client at all.
The following code works without a problem:
my_controller.rb:
class MyController < ApplicationController
def index
// renders vanilla HTML/JS from index.html.erb
end
def update_index
// renders JavaScript from index.js.erb
end
end
index.html.erb:
<%= button_to({ controller: :my_controller, action: :update_index},
remote: true,
method: 'post') do %>
Update the text
<% end %>
<div id='content'>Some content</div>
update_index.js.erb:
$('#content').html('You clicked the button.');
The Problem:
As soon as I add include ActionController::Live to the controller, before even creating any JavaScript or Rails handles for Server Side Events (which work great), my existing code stops working. The following occurs:
Server sees the incoming AJAX request
All appropriate Controller functions are called
The JavaScript is not executed on the client side.
If you've included ActionController::Live in your controller, it seems to change the default header situation on returns to the client. Adding the following line to my non-SSE actions seemed to solve the problem:
response.headers["Content-Type"] = 'text/javascript'
But would love to hear if there's a better solution, or if I should just do this on all appropriate actions.

rails form submission with remote => true -- js file renders but does not execute

There is a similar question here and here but neither has the answer I'm looking for. I've also done a lot of searching for "rails format.js render" without being able to solve this.
In Rails 4, I have a validated form as follows:
<%= form_for(#message, :remote => true) do |form| %>
// don't want to call the js on submit here because
// I don't want it to execute if the form did not validate
I'm calling the js in the controller:
def create
#message = Message.new(params[:message])
if #message.valid?
NotificationsMailer.new_message(#message).deliver
respond_to do |format|
format.js { render "submit" }
end
else
render :new
end
end
I have "submit.js.erb" in the "messages" folder:
alert('js was called!');
When I submit the form, Terminal verifies the file DOES render:
Rendered messages/submit.js.erb (0.5ms)
...but on the screen, nothing happens. No alert, and no executed javascript. I've also tried creating "submit.html.erb" and wrapping my javscript in a script tag, and the same thing happens - the file loads, but the script does not execute.
Why? What do I need to do to tell Rails to execute the js?
Edit: After visiting Kelvo's resources and trying many things, the answer seemed to be adding this to the application.js...
$.ajaxSetup({
'beforeSend': function (xhr) {xhr.setRequestHeader('Content-Type', 'application/javascript');}
});
It also turned out that a manual line break and indentation (since it was not wrapping in my IDE) in my actual "submit.js.erb" was causing it to fail to execute, so there were really two problems.
This may be due to the fact that the returned content is not being evaluated. The browser does receive the file but does not know what to do with it, you have to include some JavaScript to handle the response as explained here :
You probably don't want to just sit there with a filled out <form>, though. You probably want to do something upon a successful submission. To do that, bind to the ajax:success event. On failure, use ajax:error. Check it out:
in your case you might try out
$(document).ready(function(){
$("#new_message").on("ajax:success", function (e, data, status, xhr){
eval(xhr.responseText);
});
});
in order to evaluate the js code.
you can read more on events fired during "data-remote" requests here
EDIT : forgot to mention, this script has to be included on the HTML file containing the form. Maybe just add it under your form.
This may be due to, returned content also including your default layout.
Try this:
format.js {render layout: 'no_layout', action: 'submit'}
Hope this helps...

Redirect_to another page in rails

In my application I have a set of entities. Now I want to build a search form on my start page that calls the action of controller a. If it finds more than one entitiy it shall show all the products if it finds exactly one product it should redirecto to another controller that loads the detailed information about the entity and shows it. In my first controller I do this by calling
if #entities.length==1
redirect_to show_path(:id=>#entities[0].id)
end
I would expect that now a new site is opened like /show?id=1234 but that does not happen. Instead the controller behind the entity path loads the detailed information of the entity but nothing is shown.
I get the following error:
ActionView::MissingTemplate (Missing template entities/show with {:formats=>[:js, :"*/*"], :handlers=>[:rjs, :rhtml, :rxml, :erb, :builder], :locale=>[:en, :en]} in view paths ..."):
How do I get the right page loaded, simply adding the show.js.erb to the entities folder makes the error disappear but the problem still remains that the show page is not shown.
EDIT:
render :update do |page|
page.redirect_to show_product_path(:id=>#entities[0].id)
end
this works but why? what is the difference?
I would suggest to rederect straight to object. Rails is smart enough to create route for your object.
if #entities.length==1
redirect_to #entities.first
end
I thnink
render :update do |page|
page.redirect_to show_product_path(:id=>#entities[0].id)
end
code is looking for a show action in the same controller, where as
render :update do |page|
page.redirect_to show_product_path(:id=>#entities[0].id)
end
is redirecting to products/show in products controller. I think you dont have a 'show' action in 'entities' controller thats why you are getting
ActionView::MissingTemplate (Missing template entities/show with {:formats=>[:js, :"*/*"], :handlers=>[:rjs, :rhtml, :rxml, :erb, :builder], :locale=>[:en, :en]} in view paths ..."):
With the default rails configuration it works as follows
in your controller
class EntitiesController < ApplicationController
def index
#will display all the products
**#you need to have a index.erb.html file as well**
#products = <Your product getting logic here>
end
def show
#display only one product
#you need to have a show.erb.html
#product = Product.find(params[:id])
end
end
So in you case you should redirect as
show_product_path with an id
and make sure you have show action defined in the controller
HTH
sameera

How does js.erb work

Lately i have run into a few applications that are using js.erb and i am not really sure how to use it ...here is the code below. Can someone help me understand how this works?
in the routes.rb file
map.resources :player_emails
my controller player_emails_controller.rb in the create action
def create
#player_email = PlayerEmail.create(params[:player_email])
if #player_email.save
#response_txt = "The player has been emailed."
PlayerEmailsMailer.deliver_pattern_email(#something, #player_email, request.host_with_port)
#error = false
else
#error = true
#response_txt = "Please make sure you entered your name and a valid email address."
end
end
then i have the file player_emails/create.js.erb
$('#player_email_ind').hide();
$('#player_email_submit').show();
$('#player_response_msg').html("<%= escape_javascript #response_txt %>").fadeIn();
<% unless #error %>
$('#player_email_form')[0].reset();
<% end %>
i know what the jquery is going but i dont know how this is doing the ajax call. Does it just automatically do an ajax call when there is a js.erb...can someone explain the way this works and why i dont need a respond_to in the controller action telling it this is format.js
If a js (ajax) request is made it will respond by rendering the js.erb file and viceversa.
This is the default behaviour that is being performed:
respond_to do |format|
format.js{
render :template => 'create.js.erb'
}
format.html{
render :template => 'create.html.erb'
}
end
When the form is submitted, it does a POST to /player_emails. The resource declaration in routes.rb ensures the request is handled by PlayerEmailsController#create.
The controller is responsible for handling each format it receives. In the case of an AJAX call, the format is 'js', and is set by explicitly adding the format string to the end of the URL (/player_emails.js) or (more likely) by deducing the format from the request header.
In your case, the create action does not expect anything other than AJAX, so it takes a shortcut and omits the respond_to and format blocks. The controller has already figured out that the format is 'js', so when create is complete it takes the default action of rendering the appropriate template for the format (create.js.erb).
Does your form submit button have a :remote => true on it? If so, there might be some JavaScript in rails.js or application.js that automatically submits via AJAX. Bottom line is, there has to be some JavaScript somewhere that is making an AJAX call and asking for a js or JSON response, otherwise it would be an html request.
As for why you don't need a respond_to block, I'm not entirely sure. Maybe since the call is always being made by AJAX and there is a js.erb template available, it just does its thing without complaining. Is there an html.erb template at all? If not, try doing a regular form submit and see if it complains.

Categories