For my application, I have projects where users can make comment (class Newcomments) postings. Right now it posts great but on page refresh. I am trying to use AJAX/JQUERY so that it will post with no page refresh. I am following this railscasts tutorial.
So right now, the posts are made to my database and the page does not refresh. But when I refresh, the posts shows up. The page that I render my comments for a specific project is on the projects/_comments.html.erb.
Question: How would I adjust it so that it the new comment made renders?
newcomments_controller.rb
def create
#newcomment = #commentable.newcomments.new(params[:newcomment])
if #newcomment.save
respond_to do |format|
format.html { redirect_to comments_project_path(#commentable) }
format.js
end
else
render :new
end
end
view/newcomments/_form.html.erb
<span class="comment">
<%= form_for [#commentable, #newcomment], remote: true do |f| %>
<%= f.text_area :content, rows: 3, :class => "span8" %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<%= f.submit "Add Comment", :class => "btn btn-header" %>
<% end %>
</span>
view/newcomments/create.js.erb
$('#newcomment').append('<%= j render(#newcomments) %>');
projects_controller.rb
def comments
#commentable = #project
#newcomments = #commentable.newcomments.newest.page(params[:comments_page]).per_page(10)
#newcomment = Newcomment.new
respond_to do |format|
format.html # show.html.erb
format.json { render json: #project.comments }
end
end
projects/comments.html.erb
<%= render 'comments' %>
projects/_comments.html.erb
<%= render #newcomments %>
view/newcomments/_newcomment.html.erb
<div class="comments">
<%= link_to newcomment.user.name %></strong>
Posted <%= time_ago_in_words(newcomment.created_at) %> ago
<%= newcomment.content %>
</div>
<span class="comment">
<%= form_for [#commentable, #newcomment] do |f| %>
<div class="field">
<%= f.text_area :content, rows: 3, :class => "span8" %>
</div>
<%= f.hidden_field :user_id, :value => current_user.id %>
<div class="actions">
<%= f.submit "Add Comment", :class => "btn btn-header" %>
</div>
<% end %>
<% unless newcomment.newcomments.empty? %>
<%= render #newcomments %>
<% end %>
</span>
Try binding AJAX actions as described here:
http://www.alfajango.com/blog/rails-3-remote-links-and-forms/
Also, consider returning a render comments partial html instead of json comment object, to do so you need to tell in form after :remote directive that :'data-type'=>'html', so that returned html will hit function binded on AJAX success, and then swap html of container div with, for example, jQuery
Related
I am trying to create a comment area in rails 4 using ajax. My target is to create comment and its output in same page without page loading. I have added some code. When i click on "add comment" button the data entered to DB, but does not reflect in same page.Please share with me if any one have any idea, thank u.
My codes are below:
In comment controller:
def create
#article = Article.find(params[:article_id])
#comment = #article.comments.create
#comment.body = params[:comment]["body"]
respond_to do |format|
#comment.save
format.html { redirect_to #article }
format.js
end
end
In show.html.erb under views/articles
<div class="col-xs-12 col-sm-12">
<h2 class="text-center"><%= #article.title.html_safe %></h2>
<p><%= #article.body.html_safe %></p>
<h2>Comments</h2>
<div id="comments">
<!-- <p><%= render :partial => #article.comments %></p> -->
<%= render :partial => 'comments/comment', :collection => #article.comments %>
</div>
<%= form_for([#article, Comment.new], :remote => true) do |f| %>
<p>
<%= f.label :body, "New comment" %><br/>
<%= f.text_area :body, type:"text", tabindex: "6", class: "form-control", placeholder: 'your comment', rows: "4", required: true %>
</p>
<p><%= f.submit "Add comment" %></p>
<% end %>
</div>
_comment.html.erb under view/comments
<%= div_for comment do %>
<p>
<b>
Posted <%= time_ago_in_words(comment.created_at) %> ago
</b>
<br/>
<%= comment.body %>
<%= link_to 'Delete', article_comment_path(comment.article_id, comment.id), method: :Delete, :class => 'btn btn-sm btn-warning', tabindex: "3" %>
<%= link_to 'Edit', article_path(comment.article_id, comment.id), :class => 'btn btn-sm btn-warning', tabindex: "3" %>
</p>
<% end %>
create.js.erb under views/comments
page.insert_html :bottom, :comments, :partial => 'comment', :object => #comment
page[:new_comment].reset
config/application.rb
config.action_view.JavaScript_expansions[:defaults] = %w(jquery rails application)
the proper way to handle this case in rails is using a remote form, this way you can interactively insert and remove objects from db.
Here are two explained blog posts about remote forms in rails detailed guide about remote forms and how to partials ajax rails. This way you can submit the form without refresh an then have an handler to generate the created element after the callback from the controller.
Hope this fits your question.
Added something like:
create.js.erb under views/comments
$("#comments").append("<%= escape_javascript(render(:partial => #comment)) %>");
$("#new_comment")[0].reset();
And It works for me.
This is the erb template:
<div id='recipe-form'>
<% if #recipe.errors %>
<div id='errors'>
<% #recipe.errors.messages.each do |field, messages| %>
<div class='error'>
<div class=field'><%= field %></div>
<div class='messages'>
<ul>
<% messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
</div>
<% end %>
</div>
<% end %>
<%= form_for #recipe, :html => {:multipart => true}, :url => '/recipes' do |f| %>
<%= f.label :title, 'title' %>
<%= f.text_field :title %>
<div id="photo-upload">
<%= file_field :photo0, :image, :id => 0 %>
</div>
<div id='existing-photos'>
<% recipe.photos.each do |photo| %>
<div id='<%= photo.id %>'>
<img src='<%= photo.image.url(:thumb) %>' />
<ul>
<li>
<%= link_to 'delete',
recipe_photo_url(
:recipe_id => #recipe.slug,
:id => photo.id
),
:method => :delete,
:remote => true
%>
</li>
</ul>
</div>
<% end %>
</div>
<%= f.label :body, 'body' %>
<%= f.cktext_area :body, :ckeditor => {:width => "500"} %>
<%= f.label :tags, 'tags (comma separated)' %>
<%= text_field_tag :tags %>
<%= submit_tag 'submit' %>
<% end %>
</div>
This is the create action:
def create
#recipe = Recipe.new(params[:recipe])
photo_keys = params.keys.select{|k|k.match(/^photo/)}
#photos = []
photo_keys.each do |photo_key|
#photos << Photo.new(params[photo_key])
end
#recipe.tags = Tag.parse(params[:tags])
#recipe.author = current_user
if #recipe.save &&
#photos.all?{|photo|photo.save}
#photos.each do |photo|
photo.recipe_id = #recipe.id
photo.save
end
flash[:notice] = 'Recipe was successfully created.'
redirect_to recipe_url(#recipe.slug)
else
flash[:error] = 'Could not create recipe. '
flash[:error] += 'Please correct any mistakes below.'
render :action => :new
end
end
And this is the new action:
def new
#recipe = Recipe.new
end
I read that if I use form_for as I am using above, the fields will be re-populated automatically.
When I inspect #recipe.errors from within the erb template, I can see that the errors generated by create are also available when the new action is rendered, but the fields do not re-populate.
I'm actually not sure about what render action: does but what I do and works is: Instead of rendering the action just render the template using render :new.
You need to set the same instance variables (those with #), which you already in your create action.
This is really simple, but i'm going slightly mad and probably missing something that's staring me in the face. Can anyone help?
Basically, I have a simple each loop that's returning an extra rogue line. Even when there's nothing in the db, I get one line returned!
My show view including the loop is:
<p id="notice"><%= notice %></p>
<p>
<b>Header:</b>
<%= #mailer.header %>
</p>
<p>
<b>Subtext:</b>
<%= #mailer.subtext %>
</p>
<div id="" class="" padding-left: 30px;>
<h3>Mailer Products </h3>
<ol id="mailer-Product-list">
<% #mailer.mailer_products.sort_by { |mailer_products| mailer_products.position }.each do |mailer_product| %>
<%= content_tag_for :li, mailer_product do %>
<%= mailer_product.product.cat_no %>
<% end %>
<% end %>
</ol>
<%#= link_to 'Done', #product, :class => "standard-button" %>
</div>
<%= form_for([#mailer,#mailer.mailer_products.build]) do |f| %>
<div class="field">
<%= f.label :product_id %><br />
<%= f.text_field :product_id %>
</div>
<div class="field">
<%= f.hidden_field :mailer_id, :value => #mailer.id %>
</div>
<div class="actions">
<%= f.submit "Add Product" %>
</div>
<% end %>
<%= link_to 'Edit', edit_mailer_path(#mailer) %> |
<%= link_to 'Back', mailers_path %>
The controller code is:
class MailersController < ApplicationController
def show
#mailer = Mailer.find(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render :json => #mailer }
end
end
class MailerProductsController < ApplicationController
def index
#mailer_products = MailerProduct.find(:all)
respond_to do |format|
format.html # index.html.erb
format.json { render :json => #mailer_products }
end
end
end
end
Your call to form_for looks like this
form_for([#mailer,#mailer.mailer_products.build]) do |f|
You get an extra blank item because that's what calling .build on mailer_products does: it appends a new instance to the array
When the form is after the loop this doesn't matter, but when things are the other way around the loop will be on the modified array
My usual mistake is adding a <%= instead of a <% on the loop...
<%= #foo.each do |itme| %>
# do stuff
<% end %>
which should be
<% #foo.each do |itme| %>
# do stuff
<% end %>
Double check your tags...
Here's the scoop: I've created a test app that allows users to create ideas and then add "bubbles" to these ideas. Currently, a bubble is just text. I've successfully linked bubbles to ideas. Furthermore, when a user goes to view an idea it lists all of the bubbles attached to that idea. The user can even delete the bubble for a given idea.
My problem lies in editing bubbles. When a user views an idea, he sees the idea's content as well as any bubbles for that idea. As a result, I've set all my bubble controls (editing and deleting) inside the ideas "show" view. My code for editing a bubble for an idea is <%= link_to 'Edit Bubble', edit_idea_bubble_path %>. I ran rake routes to find the correct path for editing bubbles and that is what was listed.
Here's my error: No route matches {:action=>"edit", :controller=>"bubbles"}
In my bubbles controller I have:
def edit
#idea = Idea.find(params[:idea_id])
#bubble = #idea.bubbles.find(params[:id])
end
def update
#idea = Idea.find(params[:idea_id])
#bubble = #idea.bubbles.find(params[:id])
respond_to do |format|
if #bubble.update_attributes(params[:bubble])
format.html { redirect_to(#bubble,
:notice => 'Bubble was successfully updated.') }
format.xml { head :ok }
else
format.html { render :action => "Edit" }
format.xml { render :xml => #bubble.errors,
:status => :unprocessable_entity }
end
end
end
To go a step further, I have the following in my routes.rb file
resources :ideas do
resources :bubbles
end
So far everything seems to function except when I try to edit a bubble.
I'd love some guidance.
Thanks!
Here's my show.html.erb file for Ideas:
<h2>Bubbles</h2>
<% #idea.bubbles.each do |bubble| %>
<p>
<b>Bubble:</b>
<%= bubble.description %>
</p>
<p>
<%= link_to 'Edit Bubble', edit_idea_bubble_path (#idea) %>
</p>
<tb />
<p>
<%= link_to 'Delete Bubble', [bubble.idea, bubble],
:confirm => 'Are you sure you want to delete this bubble?',
:method => :delete %>
</p>
<% end %>
<h2>Add a bubble:</h2>
<%= form_for([#idea, #idea.bubbles.build]) do |f| %>
<div class="field">
<%= f.label :description %><br />
<%= f.text_area :description %>
</div>
<div class="actions">
<%= f.submit %> </div><% end %>
Following edit_idea_bubble_path (#idea), here is the edit.html.erb file for Bubbles:
<%= render 'form' %>
<%= link_to 'Back to Ideas', ideas_path %>
And finally, my _form.html.erb file for Bubbles: this is where the problem lies, I believe
<% form_for([#idea, #idea.bubbles.build]) do |f| %>
<%= f.error_messages %>
<div class="field">
<%= f.label :description %><br />
<%= f.text_area :description %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
First build the route in your show.html.erb file
<%= link_to 'Edit Bubble', edit_idea_bubble_path(#idea, bubble) %>
Then, your controller should have 2 objects for both #idea and #bubble
when action is new
#idea = Idea.find_by_id(:params[:idea_id])
#bubble = #idea.bubbles.build
when action is edit
#idea = Idea.find_by_id(:params[:idea_id])
#bubble = #idea.bubbles.find_by_id(:params[:bubble_id])
In your _form.html.erb
<% form_for([#idea, #bubble]) do |f| %>
You have to provide the idea and the bubble objects:
<%= link_to 'Edit Bubble', edit_idea_bubble_path(#idea,#bubble) %>
Update:
Edit the _form.html.erb file
<% form_for([#idea, #bubble]) do |f| %>
Ok, I am new to rails so I hope I explain this well. I seem to have a problem with a form collecting the proper information. Work in one spot and not another. Here is the situation.
I have created a blog with three tables, posts, comments, and votes. I have comments working correctly and votes working partially. Here is what I mean.
The /posts/show.html.erb file basically shows the post, the associated comments and it shows how many votes that post has. I am working the votes but using a form with a hidden field that delivers a value of '1' along with the post_id to the table. I am then using AJAX to return the #post.votes.count. This all works great.
I am trying to use this same vote/return mentioned above but on the /posts/index.html.erb page. In the index page I have the <% #post.each do |post| %> doing two things. First render :partial => post %> and then I have the same code that I am using on the show.html.erb page. The error that I am getting from the terminal is
ActiveRecord::RecordNotFound (Couldn't find Post without an ID):
app/controllers/votes_controller.rb:4:in `create'
I am guessing this has to do with it being part of the index record set which doesn't have a unique post param associated with the page. I am hoping there is a simple fix. Here is the code:
This is the /posts/show.html.erb code that is working correctly:
<div id="backto"<%= link_to 'Back to all BattleCries', posts_path %>
</div>
<%= render :partial => #post %>
<div id="beltcomments">
<div id="beltcommenttext">
<div id="vote">
<div id="votes">
<%= #post.votes.count %> People liked this BattleCry.
</div>
</div>
<div id="votebutton">
<% remote_form_for [#post, Vote.new] do |f| %>
<%= f.hidden_field :vote, :value => '1' %>
<%= f.submit "Like" %>
<% end %>
</div>
</div>
</div>
<div id="beltcommentsbottom">
</div><br/><br/>
<div id="belt">
<div id="belttext">
<p5>Add a Comment</p5>
<% remote_form_for [#post, Comment.new] do |f| %>
<p>
<%= f.text_area ( :body, :class => "commentarea") %>
</p>
<%= f.submit "Add Comment"%>
<% end %>
</div>
<div id="beltbottom">
</div>
</div><br/>
<div id="comments">
<%= render :partial => #post.comments %>
</div>
<br/>
<div id="commenttime">
Copyright 2009, My Life BattleCry, LLC.
</div>
<br/>
<br/>
<br/>
Here is where it is in the index page:
<% #posts.each do |post| %>
<%= render :partial => post %>
<%= render :partial => #post %>
<div id="beltcomments">
<div id="beltcommenttext">
<div id="vote">
<div id="votes">
<%= post.votes.count %> People liked this BattleCry.
</div>
<%= link_to "Comments (#{post.comments.count})", post %>
</div>
<div id="votebutton">
<% remote_form_for [#post, Vote.new] do |f| %>
<%= f.hidden_field :vote, :value => '1' %>
<%= f.submit "Like" %>
<% end %>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<% end %>
<div id="commenttime">
Copyright 2009, My Life BattleCry, LLC.
</div>
<br/>
<br/>
<br/>
Here is the votes_controller.rb
class VotesController < ApplicationController
def create
#post = Post.find(params[:post_id])
#vote = #post.votes.create!(params[:vote])
respond_to do |format|
format.html { redirect_to #post}
format.js
end
end
end
Here is the /votes/create.js
page.replace_html :votes, :partial => #vote
page[#vote].visual_effect :highlight
Lastly, here is the partial, /_vote.html.erb:
page.replace_html :votes, :partial => #vote
page[#vote].visual_effect :highlight
I hope this makes sense. Let me know if I need to clarify anything.
I imagine this is causing problems. You didn't post your posts controller, but does the index action set #post?:
<%= render :partial => #post %>
Looks like I just needed to change the following in the <% #posts.each do |post| %> section of the index.html.erb file.
<% remote_form_for [#post, Vote.new] do |f| %>
<%= f.hidden_field :vote, :value => '1' %>
<%= f.submit "Like" %>
to
<% remote_form_for [post, Vote.new] do |f| %>
<%= f.hidden_field :vote, :value => '1' %>
<%= f.submit "Like" %>