CODEWITHSUNDEEP
ruby-on-railsajaxcrud
Denys Medynskyi
Denys Medynskyi

Reputation: 2353

Can't make AJAX CRUD working

I want to make fully AJAX CRUD actions, but when I click on some actions it tells me, that 

  Template missing

Here is my controller:

before_filter :load

def load
 @posts = Post.all
 @post = Post.new

end

def index
end

def create
 @post = Post.new(params[:post])
 if @post.save
   flash[:notice] = "Successfully created post."
  @posts = Post.all
end

end

def edit
 @post = Post.find(params[:id])
end

 def update
  @post = Post.find(params[:id])
  if @post.update_attributes(params[:post])
    flash[:notice] = "Successfully updated post."
    @posts = Post.all
   end
 end

def destroy
 @post = Post.find(params[:id])
 @post.destroy
 flash[:notice] = "Successfully destroyed post."
 @posts = Post.all
end

Here is my application.erb.html:

  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'%>
  <%= javascript_include_tag 'rails' %>
 </head>
<body>
 <div id="container">
  <div id="flash_notice" style="display:none"></div>
  <%= yield %>
 </div>
</body>

My index.html:

 <h1>Listing posts</h1>
 <div id="post_form"><%= render :partial => 'form' %></div>
<div id="posts_list"><%= render :partial => "posts" %></div>

Form partial:

<table>
 <tbody><tr>
<th>Title</th>
<th>Content</th>
 </tr>
  <% @posts.each do |post| %>
 <tr>
  <td><%= post.title %></td>
  <td><%= post.content %></td>
  <td><%= link_to "Edit", edit_post_path(post), :remote => true %></td>
  <td><%= link_to "Destroy", post, :remote => true, :confirm => 'Are you sure?', :method =>:delete %></td>
</tr>
<% end %>
 </tbody>
</table>

And I created js.erb files for all action; create.js.erb:

 <% if @post.errors.any? -%>
  /*Hide the flash notice div*/
  $("#flash_notice").hide(300);

 /*Update the html of the div post_errors with the new one*/
 $("#post_errors").html("<%= escape_javascript(error_messages_for(@post))%>");

 /*Show the div post_errors*/
 $("#post_errors").show(300);
 <% else -%>
/*Hide the div post_errors*/
$("#post_errors").hide(300);

/*Update the html of the div flash_notice with the new one*/
$("#flash_notice").html("<%= escape_javascript(flash[:notice])%>");

 /*Show the flash_notice div*/
 $("#flash_notice").show(300);

 /*Clear the entire form*/
 $(":input:not(input[type=submit])").val("");

 /*Replace the html of the div post_lists with the updated new one*/
 $("#posts_list").html("<%= escape_javascript( render(:partial => "posts") ) %>");
<% end -%>
/*Hide the div post_errors*/
$("#post_errors").hide(300);

 /*Update the html of the div flash_notice with the new one*/
 $("#flash_notice").html("<%= escape_javascript(flash[:notice])%>");

 /*Show the flash_notice div*/
 $("#flash_notice").show(300);

 /*Clear the entire form*/
 $(":input:not(input[type=submit])").val("");

 /*Replace the html of the div post_lists with the updated new one*/
 $("#posts_list").html("<%= escape_javascript( render(:partial => "posts") ) %>");
<% end -%>

Upvotes: 0

Views: 906

Answers (1)

Cam Song
Cam Song

Reputation: 2954

It seems that you only have create.js.erb. since you have

<td><%= link_to "Edit", edit_post_path(post), :remote => true %></td>
<td><%= link_to "Destroy", post, :remote => true, :confirm => 'Are you sure?', :method =>:delete %></td>

so destroy.js.erb, edit.js.erb is needed.

I have a very clean project focus on doing AJAX in a single page. Maybe you can checkout and have a look. https://github.com/camsong/AjaxCRUD

Upvotes: 2

Related Questions