Why controllers need instance variables to use ajax - ruby-on-rails

In chapter 12.2.5 of the rails tutorial, Ajax is introduced in order to "send requests asynchronously to the server without leaving the page". The respond_to method is then used in the controller to allow browsers with enabled javascript to use Ajax or to respond with a redirect in case Ajax is disabled.
The form used to create a relationship between two users is:
<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
<div><%= hidden_field_tag :followed_id, #user.id %></div>
<%= f.submit "Follow", class: "btn btn-primary" %>
<% end %>
The corresponding action in the relationships controller is:
def create
#user = User.find(params[:followed_id])
current_user.follow(#user)
respond_to do |format|
format.html { redirect_to #user }
format.js
end
end
What gives Rails the opportunity to use Ajax is the addition of remote: true in the form_for helper method. According to the tutorial, it is necessary for the controller to use the instance variable #user instead of the local variable user for use in the form with remote: true.
Without Ajax, the resulting form would be identical except for the remote: true code absence, and in the controller the respond_to section of code would be replaced by a redirect_to; moreover, the instance variable #user can be replaced by the local variable user, so that the create action would be:
def create
user = User.find(params[:followed_id])
current_user.follow(user)
redirect_to user
end
I am wondering: why it is necessary for the controller to use the #user instance variable instead of the local variable user in order to use Ajax? I tried to use the local variable, and in effect a refresh is required to see any change. The #user variable in the form, which is used in #user.id, is defined in the show action for the users controller, because the partial for the form itself is inserted in the show.html.erb file. So, as far as I understand, there is no connection between #user in the users controller and #user in the relationships controller.

You need to declare it as instance variable (#) so it will be available in your view. Yes, using ajax you are not reloading the page, but you are sending back js instead of html. rails will respond with whatever is in create.js.erb. Notice that in this file you need access to the #user data; if you declare it as user instead of #user, it will not be accessible:
#app/views/relationships/create.js.erb
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= #user.followers.count %>');

Related

Rails: Stay on the same page after post action fails

I'm working on an order system, I passed some information about a new order from controller (orders#confirm) to a confirmation page using instance variable (such as #detail). On the confirmation page, users are supposed to confirm the information and submit a form to create the new order (orders#create). If the post action fails, I want it to stay on the same confirmation page and preserve all the information on the page for the user:
def create
#order = Order.new(order_params)
if verify_recaptcha(model: #order) && #order.save
redirect_to items_url
else
render :confirm
end
end
The code is not working because all the variables that I passed from orders#confirm to the confirmation page are lost. I know I can recreate them, but is there any better ways to preserve those information? Thank you very much!
Within your approach, you have to rebuild the #detail object in the current action create in order to make your confirm.html.erb view to be rendered properly.
It is possible. However, I think there is a better way that you can let the user confirms the order by AJAX ( which is dead simple with Rails ) so the user can stay on the page if the confirmation failed.
In your confirm.html.erb, suppose you have a form to let user confirm, just change it to remote: true
<%= form_for #order, remote: true, format: :js do |form| %>
<%# blah blah %>
<% end %>
Modify your controller
def create
#order = Order.new(order_params)
if verify_recaptcha(model: #order) && #order.save
# Redirect when success
render js: "window.location = '#{your_desired_path}'"
else
# Display error to user.
render "ajax_create_error", status: :bad_request
end
end
Now you can create a file name ajax_create_error.js.erb to display error to the user
# app/views/your_controller_name/ajax_create_error.js.erb
alert("Cannot create order");

Redirect to another controller after clicking on the button

Simple Problem:
I have a button and whenever the user will click on this button, I want to redirect him to another action in another controller. How could I do that?!
This code would be in the .html.erb file
<%= form.submit "Create Request"%>
Note: i don't want to use link_to! Additionally, I could not use redirect_to in the controller because i used render there.
In your create action within the controller, you can redirect wherever you want after save the values.
For example:
def create
#model = Model.new(permited_params)
respond_to do |format|
If #model.save
format.html { # todo block with redirect }
end
end
end
Using remote: true in the form , Ex:
<% form_tag create_path(params_you_needed), remote: true do |form| %>
add rails js for create method create.js.erb
$('#id').html('<%= j render(:partial => "file/location", :locals => {data}) %>');
and in that you can render the file you need!

Render simple_form from partial view on application.html.erb

I want to create a partial view for my registration form and add it to the application layout file because it will be shown in the navigation bar in a dropdown menu.
How can I create this form in a partial view using simple_form gem and render it on application.html.erb?
<%= simple_form_for(#user, url: account_register_path) do |f| %>
Considering that the code above is the way to create the form and I don't know where I should define #user to be used in the application layout nor if I really need it.
Can someone please clarify this?
Don't put it in a partial, just have the registration view on its own, called with render...
#app/views/layouts/application.html.erb
<%= render "accounts/new" %>
#app/views/accounts/new.html.erb
<%= simple_form_for :user, url: account_register_path do |f| %>
...
Whilst you can use a symbol to populate form_for, it won't include the attributes of the model, or the various hidden methods which give context (such as id etc).
If you wanted to populate the accounts#new view/action with a variable, you'll have to set it in your ApplicationController:
#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
before_action :set_user
private
def set_user
#user = User.new
end
end
This would allow you to use:
#app/views/accounts/new.html.erb
<%= simple_form_for #user, url: account_register_path do |f| %>
--
The best way to implement this would be with Ajax -- this way, the #user object is only created when you need it (resolves bloat).
We've done this before:
You'd just need the following:
#app/views/layouts/application.html.erb
<%= link_to "New User", account_register_path, remote: true %>
#app/controllers/accounts_controller.rb
class AccountsController < ApplicationController
respond_to :js, :html
def new
#user = User.new
respond_with #user
end
end
#app/views/accounts/new.js.erb
$("<%=j render 'accounts/new' %>").appendTo("body");
You have to define #user in the corresponding controller action (I would assume from your code, that controller is called account and action is register), it would be something like:
#user = User.new
In order to initialize instance being created/updated. Then, attributes used in all fields should match users database table.

Render partial in rails controller called using ajax

I have rails application where I have part of views as partials and I re-factored couple of views as SPA. I have problem with one functionality. In one place I was rendering partial without calling controller like following:
def create
school_service.update_preview
#user = get_user
#result = prepare_result
render 'school/result/show', locals: {
pupil: #user,
result: #result
}
end
I was calling this method using form. Now I call this from JS using AJAX. Is it possible to render that view in the same way? I wouldn't like to rewrite 'school/result/show' to SPA. Thanks for all answers.
Your question says I was calling this method using form. Now I call this using AJAX. Is it possible to render that view in the same way?
Since you are using AJAX i assume you'll have something remote: true in your form something like:
<%= form_for(#user, remote: true) do |f| %>
# your fields
<% end %>
This will take you to the create action in your controller and you can have a respond_to block in your controller to handle your js format
def create
#user = get_user
#result = prepare_result
respond_to do |format|
format.js {}
end
end
This will allow you to have create.js.erb file in your views where you can write your js to render your partial
$(".your_parent_element_class").html("<%=j render partial: "school/result/show",locals:{pupil: #user, result: #result} %>")
For more details checkout working with javascript in rails

In Rails when a resource create action fails and calls render :new, why must the URL change to the resource's index url?

I have a resource called Books. It's listed as a resource properly in my routes file.
I have a new action, which gives the new view the standard:
#book = Book.new
On the model, there are some attributes which are validated by presence, so if a save action fails, errors will be generated.
In my controller:
#book = Book.create
... # some logic
if #book.save
redirect_to(#book)
else
render :new
end
This is pretty standard; and the rationale for using render:new is so that the object is passed back to the view and errors can be reported, form entries re-filled, etc.
This works, except every time I'm sent back to the form (via render :new), my errors show up, but my URL is the INDEX URL, which is
/books
Rather than
/books/new
Which is where I started out in the first place. I have seen several others posts about this problem, but no answers. At a minimum, one would assume it would land you at /books/create, which I also have a view file for (identical to new in this case).
I can do this:
# if the book isn't saved then
flash[:error] = "Errors!"
redirect_to new_book_path
But then the #book data is lost, along with the error messages, which is the entire point of having the form and the actions, etc.
Why is render :new landing me at /books, my index action, when normally that URL calls the INDEX method, which lists all the books?
It actually is sending you to the create path. It's in the create action, the path for which is /books, using HTTP method POST. This looks the same as the index path /books, but the index path is using HTTP method GET. The rails routing code takes the method into account when determining which action to call. After validation fails, you're still in the create action, but you're rendering the new view. It's a bit confusing, but a line like render :new doesn't actually invoke the new action at all; it's still running the create action and it tells Rails to render the new view.
I just started with the Rails-Tutorial and had the same problem.
The solution is just simple: If you want the same URL after submitting a form (with errors), just combine the new and create action in one action.
Here is the part of my code, which makes this possible (hope it helps someone^^)
routes.rb (Adding the post-route for new-action):
...
resources :books
post "books/new"
...
Controller:
...
def create
#book = Book.new(book_params)
if #book.save
# save was successful
print "Book saved!"
else
# If we have errors render the form again
render 'new'
end
end
def new
if book_params
# If data submitted already by the form we call the create method
create
return
end
#book = Book.new
render 'new' # call it explicit
end
private
def book_params
if params[:book].nil? || params[:book].empty?
return false
else
return params.require(:book).permit(:title, :isbn, :price)
end
end
new.html.erb:
<%= form_for #book, :url => {:action => :new} do |f| %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.label :isbn %>
<%= f.text_field :isbn %>
<%= f.label :price %>
<%= f.password_field :price %>
<%= f.submit "Save book" %>
<% end %>
Just had the very same question, so maybe this might help somebody someday. You basically have to make 3 adjustments in order for this thing to work, although my solution is still not ideal.
1) In the create action:
if #book.save
redirect_to(#book)
else
flash[:book] = #book
redirect_to new_book_path
end
2) In the new action:
#book = flash[:book] ? Book.new(flash[:book]): Book.new
3) Wherever you parse the flash hash, be sure to filter out flash[:book].
--> correct URL is displayed, Form data is preserved. Still, I somehow don't like putting the user object into the flash hash, I don't think that's it's purpose. Does anyboy know a better place to put it in?
It doesn't land you at /books/new since you are creating resource by posting to /books/. When your create fails it is just rendering the new action, not redirecting you to the new action. As #MrYoshiji says above you can try redirecting it to the new action, but this is really inefficient as you would be creating another HTTP request and round trip to the server, only to change the url. At that point if it matters you could probably use javascript change it.
It can be fixed by using same url but different methods for new and create action.
In the routes file following code can be used.
resources :books do
get :common_path_string, on: :collection, action: :new
post :common_path_string, on: :collection, action: :create
end
Now you new page will render at url
books/common_path_string
In case any errors comes after validation, still the url will be same.
Also in the form instead using
books_path
use
url: common_path_string_books_path, method: :post
Choose common_path_string of your liking.
If client side validation fails you can still have all the field inputs when the new view is rendered. Along with server side errors output to the client. On re-submission it will still run create action.
In books_controller.rb
def new
#book = current_user.books.build
end
def create
# you will need to have book_params in private
#book = current_user.books.build(book_params)
if #book.save
redirect_to edit_book_path(#book), notice: "Book has been added successfully"
# render edit but you can redirect to dashboard path or root path
else
redirect_to request.referrer, flash: { error: #book.errors.full_messages.join(", ") }
end
end
In new.html.erb
<%= form_for #book, html: {class: 'some-class'} do |f| %>
...
# Book fields
# Can also customize client side validation by adding novalidate:true,
# and make your own JS validations with error outputs for each field.
# In the form or use browser default validation.
<% end %>

Resources