Rails - Render active partial on same page? - ruby-on-rails

So i just attach a screenshot to make it more obvious what im trying to do:
Is there a way to load a partial dynamically based on which button was pressed?
For example: If Customers is pressed, load the customer partial on the right side. If products, the products partial and so on.
I saw somewhere in some literature some examples where they did that, but can't find it anymore.
Thanks in advance everyone!
Greetings!

I think you can do this in very easier way...
Suppose your button is loaded on index page :-
#index.html.erb
.....
#Your index page code
.....
<%= link_to “customer path”, customer_path, class: "css-class", remote: true %> ## create button with remote true for ajax call
<%= link_to “product path”, product_path, class: "css-class", remote: true %> ## create button with remote true for ajax call
<div id = "customer-section"> </div> #div to load partials
<div id = "product-section"> </div> #div to load partials
In your controller:
#controller.rb
def customer
#customer code here
respond_to do |format|
format.js {}
end
end
def product
#product code here
respond_to do |format|
format.js {}
end
end
Create js file :-
# customer.js.erb
$("#customer-section").html("<%=j render "customer")%>");
# product.js.erb
$("#product-section").html("<%=j render "product")%>");
Create partial html file to render :-
# _customer.html.erb
<h1>This is customer partial</h1>
# _product.html.erb
<div>This is product partial</div>
This way you can achieve your above requirement. For more you can refer this article https://m.patrikonrails.com/how-to-make-ajax-calls-the-rails-way-20174715d176
Hope this will help you. :)

Related

Correct way to use Ajax with rails

I am trying to add ajax to a voting system but having difficulty targeting individual elements with jQuery. This is what i have so far:
Vote Link in index action
<%= link_to post_votes_path(post), :method => 'post', :remote => true do %>
<span class="score"><%= post.votes.size %></span>
<% end %>
Create action in Vote controller
def create
#post = Post.find(params[:post_id])
#vote = #post.votes.create
respond_to do |format|
format.html { redirect_to root_url }
format.js
end
end
jQuery in votes#create view (create.js.erb)
$('.score').html("I voted");
Trouble is when i click the link to vote it changes the html for all posts not just the post i tried voting on. Dont have much experience with jQuery so i cant help but think i am missing something obvious. Any ideas ?
all your spans have the .score class. that's the reason for all be changed.
This is a possible solution.
Change in your html:
<span class="score p_<%= post.id%>"><%= post.votes.size %></span>
And then change in your create.js.erb
$('.score.p_<%= #post.id %>').html("I voted");
I typically just use JQuery's $.post. I am using asp.net, but assume rails will work with that as well.
$.post("/someurltoyouraction", {myval:val},function(data){
// do stuff after post
});
This will produce an Ajax post request. You can define your post parameters in the {myval:val} object to match your requirements. It's essentially a key value definition based object {key:value}

Rails remote form, replace after create

I have a typical "create" form action, that's set to be a remote call.
What I want to do is after the form is submitted, replace the form with the "edit" view with an additional form field, so that once they submit that second form, it updates instead of creating a new record.
So basically, the form would change from "create" to "edit"...but all via ajax calls.
I'm running Rails 3.2.
You make an AJAX POST to /resources
Controller
def create
...
# you set #resource to be used in edit form
#resource = Resource.create params[:resource]
respond_to do |format|
# tell controller to respond to requests with JS format
format.js
end
...
end
Actually if you want just that behaviour you can remove anything in your controller.
def create
...
# you set #resource to be used in edit form
#resource = Resource.create params[:resource]
...
end
Be sure to make the POST with JS format:
<%= form_for #resource, format: :js %>
View
file create.js.erb is served by controller, and run by browser.
$(selector).html("<%= escape_javascript( render 'edit') %>")
You have to define selector according what you have in page with form for new items.
file _edit.html.erb is rendered inline in previous file
<%= form_for #resource, remote: true do %>
...

ruby on rails implement search with auto complete

I've implemented a search box that searches the "Illnesses" table and the "symptoms" table in my DB.
Now I want to add auto-complete to the search box.
I've created a new controller called "auto_complete_controller" which returns the auto complete data.
I'm just not sure how to combine the search functionality and the auto complete functionality: I want the "index" action in my search controller to return the search results, and the "index" action in my auto_complete controller to return the auto_complete data.
Please guide me how to fix my html syntax and what to write in the js.coffee file.
I'm using rails 3.x with the jquery UI for auto-complete, I prefer a server side solution, and this is my current code:
main_page/index.html.erb:
<p>
<b>Syptoms / Illnesses</b>
<%= form_tag search_path, :method => 'get' do %>
<p>
<%= text_field_tag :search, params[:search] %> <br/>
<%= submit_tag "Search", :name => nil %>
</p>
<% end %>
</p>
auto_complete_controller.rb:
class AutoCompleteController < ApplicationController
def index
#results = Illness.order(:name).where("name like ?", "%#{params[:term]}%") + Symptom.order(:name).where("name like ?", "%#{params[:term]}%")
render json: #results.map(&:name)
end
end
search_controller.rb:
class SearchController < ApplicationController
def index
#results = Illness.search(params[:search]) + Symptom.search(params[:search])
respond_to do |format|
format.html # index.html.erb
format.json { render json: #results }
end
end
end
Thanks, Li
I have had the same problem and had to create this gem for it: https://github.com/rayasocialmedia/rails_autocomplete
Here's how to do dynamic typeahead in Twitter-Bootstrap; I'm sure it's something similar for jQuery:
https://gist.github.com/1848558
Essentially, by listening to to non-navigational keystrokes, it triggers an AJAX partial text search to your controller. This return data then populates the JS framework's typeahead/autocomplete data to be displayed. This means that you really only need the one SearchController.
Try rails3-jquery-autocomplete. I am using it and had the same requirements as you, and they work fine together. Let me know if you need further help.

form_tag action not working in rails

I have this form in my application.html.erb.
<%= form_tag(:action=>"index", :controller=>"posts") %>
<p>
// code here
</p>
I dont understand why is this getting directed to posts->create instead of posts->index?
Thanks.
Basically, Rails observes and obeys "RESTful" web service architecture. With REST and Rails, there are seven different ways to interact with a server regarding a resource. With your current code, specifying the form's action as index doesn't make sense: Rails' form helpers can either POST, PUT or DELETE.
If you wanted to create a post, then redirect to the index, you can do so in the applicable controller action:
class PostsController < ApplicationController
...
def create
#post = Post.new
respond_to do |format|
if #post.save
format.html { redirect_to(:action => 'index') }
end
end
While your form would look like:
<% form_for #post do |f| %>
# put whatever fields necessary to create the post here
<% end %>
You seem to be a little mixed up with respect to the uses for each action. Here's a quick summary of typical RESTful usage:
Index -> view a list of items
New/Edit -> form where items are added or edited
Create/update -> controller action where items are created/updated
The reason your routes file is not taking you to index is because index is not an action where posts are typically created or updated. The best way is to go RESTful. Unless you have a very unusual situation, the best way to set your system up is probably a little like this:
# routes.rb
resources :posts
# application.html.erb (or better: posts/_form.html.erb).
<% form_for #post do |f| %>
<% end %>
# posts controller, whichever action you want to use
def new
#post = Post.new
end
By putting the form in a partial called form you can access it in new, edit, or wherever else you need to manipulate a post in your system.

What to render on error in a Rails controller

In my rails application, I've got a partial view with an entry form on it. The form gets included on multiple pages across my app. The form in the partial posts to a RidesController to save with a create method like this:
RidesController.rb
def create
#ride = current_user.rides.build(params[:ride])
if #ride.save
flash[:success] = "Ride created!"
redirect_to root_path
else
#rides = current_user.rides.paginate(:page => params[:page])
render 'pages/home' # <---- WHAT GOES HERE?
end
end
I've commented the line where my question is. When we have an error, I need to present the same view that the user is presently on. But because this controller is being invoked from a partial instead of a full view, I don't know how to tell what context it's coming from.
Right now if there's an error on /rides/new, the user ends up redirected to the homepage which also has the form.
One way you could do this is pass the template path in with the form.
Add this to each main view that includes the form partial (e.g. pages/home, rides/new, etc):
<% #current_page_template = __FILE__ %>
In your form partial:
<%= form_for ... do |f| %>
<%= hidden_field_tag 'current_page_template',
#current_page_template.sub(File.join(Rails.root, 'app', 'views'), '') %>
In your controller:
def create
...
if #ride.save
...
else
...
render params[:current_page_template]
end
end

Resources