How to create a new object with Ajax request? - ruby-on-rails

Question

For example I have my index view with all objects in database. And instead of clicking on Create button I want to get it done without refreshing the page using Ajax. How to do it? How can I change my controller for this purpose? Thanks in advance.
My controller
class ArticlesController < ApplicationController
before_filter :authorize, only: [:edit, :new, :destroy]
def index
#articles = current_user.articles
end
def show
#article = Article.find(params[:id])
redirect_to users_path
end
def edit
#article = Article.find(params[:id])
end
def new
#article = Article.new
end
def create
#article = current_user.articles.build(article_params)
if #article.save
redirect_to user_articles_path(current_user)
else
render 'new'
end
end
def update
#article = Article.find(params[:id])
respond_to do |format|
if #article.update(article_params)
format.html {redirect_to user_articles_path(current_user), notice: 'Post was successfully updated'}
format.json { head :no_content }
else
format.html {render action: 'edit' }
end
end
end
def destroy
#article = Article.find(params[:id])
#article.destroy
respond_to {|format| format.js }
end
private
def article_params
params.require(:article).permit(:title)
end
end

Answer 1

For the Ajax, you need a form/link/button with remote:true option, a controller action to handle the JS request and a corresponding view page.
#new.html.erb
<%= form_for #article, remote: true do |f| %>
<div class="field">
<%= f.label :title %><br>
<%= f.text_field :title %>
</div>
<% end %>
<b>List of Articles</b>
<ul id="articles">
<%= render #articles %>
</ul>
As you want it for creating the articles, change your new and create methods like below
#articles_acontroller
def mew
#article = Article.new
#articles = current_user.articles
end
def create
#article = current_user.articles.build(article_params)
if #article.save
respond_to do |format|
format.html { redirect_to user_articles_path(current_user) }
format.js
else
render 'new'
end
end
end
Add a create.js.erb file
#create.js.erb
$("<%= escape_javascript(render #article) %>").appendTo("#articles");
And a _article.html.erb to display the created articles.
<li><%= article.title %></li>