I am implementing 'acts_as_commentable_with_threading' and the js script is not working with the delete or create actions. I have to reload the page for my comments to be added and removed from the page.
I have placed my 'comments.js.coffee' file in the 'app/assets/javascript' directory. It looks like the following:
#comments.js.coffee
jQuery ->
# Create a comment
$(".comment-form")
.on "ajax:beforeSend", (evt, xhr, settings) ->
$(this).find('textarea')
.addClass('uneditable-input')
.attr('disabled', 'disabled');
.on "ajax:success", (evt, data, status, xhr) ->
$(this).find('textarea')
.removeClass('uneditable-input')
.removeAttr('disabled', 'disabled')
.val('');
$(xhr.responseText).hide().insertAfter($(this)).show('slow')
# Delete a comment
$(document)
.on "ajax:beforeSend", ".comment", ->
$(this).fadeTo('fast', 0.5)
.on "ajax:success", ".comment", ->
$(this).hide('fast')
.on "ajax:error", ".comment", ->
$(this).fadeTo('fast', 1)
#In Comments controller file I wrote:
def create
#comment_hash = params[:comment]
#obj = #comment_hash[:commentable_type].constantize.find(#comment_hash[:commentable_id])
# Not implemented: check to see whether the user has permission to create a comment on this object
#comment = Comment.build_from(#obj, current_user, #comment_hash[:body])
if #comment.save
render :partial => "comments/comment", :locals => { :comment => #comment }, :layout => false, :status => :created
else
render :js => "alert('error saving comment');"
end
end
def destroy
#comment = Comment.find(params[:id])
if #comment.destroy
render :json => #comment, :status => :ok
else
render :js => "alert('error deleting comment');"
end
end
end
# In Catalogs controller the code is:
def find_user
#member = Member.find(params[:id])
end
def show_user
find_user
#comments = #member.comment_threads.order('created_at desc')
#new_comment = Comment.build_from(#member, #member.id, "","")
respond_to do |format|
format.html # show.html.erb
format.json { render json: #member }
end
end
#In Comments model, the code include:
acts_as_nested_set :scope => [:commentable_id, :commentable_type]
attr_accessible :commentable, :body,:member_id,:sender
validates :body, :presence => true,:length=>{:maximum=>1000}
validates :member, :presence => true,:length=>{:maximum=>200}
validates :sender,:presence=> true,:length=>{:maximum=>200}
belongs_to :commentable, :polymorphic => true
# NOTE: Comments belong to a user
belongs_to :member
def self.build_from(obj, member_id, comment,sender)
new \
:commentable => obj,
:member_id => member_id,
:body => comment,
:sender => sender
end
...................
# In Member model, I add the following lines:
acts_as_commentable
has_many :comments, :dependent=>:destroy
# In the view file 'show_user', I wrote:
<div class='comments'>
<%= render :partial => 'comments/form', :locals => { :comment => #new_comment }%>
<%= render :partial => 'comments/comment', :collection => #comments, :as => :comment %>
</div>
#Partial 'comments/comment' contains:
<div class='comment'>
<hr>
<b><%= comment.sender %> </b>
<small><%= comment.updated_at%></small> <%= link_to "×",comment_path(comment), :method => :delete, :remote => true, :confirm => "Are you sure you want to remove this comment from # {comment.sender}?", :disable_with => "×", :class => 'close'%>
<p><%= comment.body.html_safe%></p>
</div>
# In _form.html.erb file:
<div class='comment-form'>
<%= simple_form_for comment, :remote => true do |f|%>
<small>Leave your comment </small><br/>
<%= f.input :sender,:as => :hidden,:input_html => { :rows => "2", :value =>"# {current_user.login}"}, :label => false %>
<%= f.input :body, :input_html => { :rows => "2", :class =>"tinymce"}, :label => false %>
<%= f.input :commentable_id, :as => :hidden, :value => comment.commentable_id %>
<%= f.input :commentable_type, :as => :hidden, :value => comment.commentable_type %>
<%= f.button :submit, :class => "btn btn-primary", :disable_with => "Submitting…" %>
<%end%>
</div>
In config/routes file:
resources :comments, :only => [:create, :destroy]
#Here is the output I get if I click on to 'create comments' button:
I hope someone will help me. Thank you.
I **deleted** the jquery.min.js file from my app/assets/javascripts directory
and in my gem file I added the line : gem 'jquery-rails'
and used 'bundle install' to use the gem in my app.
The application.js file has three lines:
//= require jquery
//= require jquery_ujs
//= require_tree .
And in my layout.html.erb file I have the line:
<%= javascript_include_tag 'application' %>
I know it is pretty obvious. Sometimes you need to get things wrong
to understand the obvious better. Now I can add and remove
messages using AJAX and js files.
Related
I am using the gem "acts_as_votable" in my Rails application so that Users can vote on Posts.
I'm adding Ajax functionality so that the entire page doesn't have to refresh when a user upvotes a post. This is what I have:
routes.rb
Rails.application.routes.draw do
devise_for :users, controllers: {registrations: 'registrations'}
resources :posts do
member do
put "like", to: "posts#upvote"
put "dislike", to: "posts#downvote"
end
end
# Define Root URL
root 'pages#index'
# Define Routes for Pages
get '/home' => 'pages#home'
get '/explore' => 'pages#explore'
get '/privacy' => 'pages#privacy'
get '/:id' => 'pages#profile'
end
pages_controller.rb
def explore
#posts = Post.where('created_at >= :one_days_ago', one_days_ago: Time.now - 16.hours)
end
posts_controller.rb
class PostsController < ApplicationController
def index
#posts = Post.allow
end
def new
#post = Post.new
end
def create
#post = Post.new(post_params)
#post.user_id = current_user.id
respond_to do |f|
if (#post.save)
f.html { redirect_to :back, :flash => { :notice => "Posted" } }
else
f.html { redirect_to :back, :flash => { :alert => "Error" } }
end
end
end
def destroy
#post = Post.find(params[:id])
if current_user == #post.user
#post.destroy
end
redirect_to :back, alert: 'Deleted.'
end
def upvote
#posts = Post.find(params[:id])
#posts.upvote_by current_user
respond_to do |format|
format.html { redirect_to :back }
format.js
end
end
def downvote
#posts = Post.find(params[:id])
#posts.downvote_by current_user
respond_to do |format|
format.html { redirect_to :back }
format.js
end
end
private
def post_params # allows certain data to be passed via form.
params.require(:post).permit(:user_id, :content)
end
end
explore.html.erb
<% if #posts.each do |p| %>
<div class="panel-body">
<p class="post-content"><%= auto_link(p.content, :html => { :target => '_blank' }) %></p>
<%= render :partial => 'vote', :class => "vote", :locals => { p: #posts } %>
</div>
<% end %>
_vote.html.erb
<div id="vote_<%= p.id %>" class="vote">
<%= link_to 'Vote Up', like_post_path(p), :class => "upvote", :method => :put, :remote => true %>
<span><%= p.score %></span> <!--show the current vote-->
<%= link_to 'Vote Down', dislike_post_path(p), :class => "downvote", :method => :put, :remote => true %>
</div>
upvote.js.erb
$(document).ready(function(){
$('#vote_<%= p.id %>').html("<%= escape_javascript render :partial => '/pages/vote' %>");
});
When I go to run the project I get this error:
NoMethodError in Pages#explore
Showing /home/ubuntu/workspace/app/views/pages/_vote.html.erb where line #1 raised:
undefined method `id' for #<Post::ActiveRecord_Relation:0x007f6715d018e8>
Did you mean? ids
<div id="vote_<%= p.id %>" class="vote">
The issue arises from trying to render _votes.html.erb.
Where am I going wrong here? I've been stuck on this for a while and would appreciate any help. Thanks!
You are passing entire collection to partial
<% if #posts.each do |p| %>
<div class="panel-body">
<p class="post-content"><%= auto_link(p.content, :html => { :target => '_blank' }) %></p>
<%= render :partial => 'vote', :class => "vote", :locals => { p: #posts } %>
</div>
<% end %>
In line <%= render :partial => 'vote', :class => "vote", :locals => { p: #posts } %> replace #posts with p
I am trying to use JavaScript with jquery in rails to update a div without reloading the page. Its working but the comment is being created twice. I know something is wrong in the form partial but couldn't figure it out. Any help?
The following are the files -
_new_comment.html.erb
<%= form_for [:home, Comment.new], :url => home_comments_path, :html => {:id => "comment-new-" + post.id.to_s} do |f| %>
<div>
<%= f.text_area :message, :class => "message-area-" + post.id.to_s, :placeholder => "Add comment..." %>
<%= f.hidden_field :post_id, :value => post.id %>
<span class="new-comment"><%= link_to 'Add', '#', remote: true, :onclick => "$('#comment-new-#{post.id}').submit()" %></span>
</div>
<% end %>
comments_controller.rb
def create
#comment = Comment.new(comment_params)
#comment.user_id = current_user.id
if #comment.save
flash[:notice] = 'Comment added sucessfully'
respond_to do |format|
format.html { redirect_to home_posts_url }
format.js
end
end
end
create.js.erb
$("#comment-new-83").before('<div class="notice"><%= escape_javascript(flash[:notice]) %></div>');
$("#comment-new-83")[0].reset();
home.js
jQuery.ajaxSetup({
'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})
$(document).ready(function() {
$("#comment-new-83").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), null, "script");
return false;
})
})
form_for will automatically post to the controller. You need not submit the form explicitly using jquery.
Reference
I switched from a Sony computer to an Asus, downloaded the same programs as I had on the Sony and cloned my Rails 4.0.10 project from Bitbucket. Everything else behaves the same, but Paperclip has inexplicably stopped working, though the two development environments should be exactly the same. I used Paperclip to add an avatar to my User model, but now User.create fails when I attach an avatar. I tried uninstalling and reinstalling it, but that made no difference. Does anyone with Paperclip experience know what might have happened?
Gemfile:
gem "paperclip", :git => "git://github.com/thoughtbot/paperclip.git"
# ...
models/user.rb
class User < ActiveRecord::Base
has_attached_file :avatar, :styles => { :large => "500x500", :medium => "300x300>", :thumb => "50x50!" }, :default_url => "/images/:style/missing.png"
validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/
# ...
controllers/users.rb
class UsersController < ApplicationController
def create
# ...
if #user.save
render :action => "crop"
else
flash[:notice] = "Failed"
redirect_to new_user_path
end
end
private
def user_params
params.require(:user).permit(:name, :avatar)
end
views/users/new.html.erb
<%= form_for #user, :url => users_path, :html => { :multipart => true } do |f| %>
<%= f.text_field :name, :placeholder => "Name" %>
<br>
<%= f.label :display_picture %>
<%= f.file_field :avatar %>
<br>
<%= f.submit "Submit", class: "btn btn-primary" %>
<% end %>
views/users/crop.html.erb
<% content_for(:head) do %>
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
<script type="text/javascript" charset="utf-8">
ready = $(function() {
$("#cropbox").Jcrop();
});
</script>
<% end %>
$(document).ready(ready);
$(document).on('page:load', ready);
<%= image_tag #user.avatar.url(:large), :id => "cropbox" %>
Make sure imagemagick is installed on your machine. This isn't something 'bundle install' will cover.
Follow the instructions here
http://www.imagemagick.org/script/install-source.php
Or use homebrew or other package managers
Thanks for your time.
I am working on rails 3.2 and I am using gems simple_form, cocoon, and rails3-jquery-autocomplete.
I have following models Machine, Part, PartUsage, MachineCosting and PartCosting
Machine and Part models with many-to-many association.
class Machine < ActiveRecord::Base
attr_accessible :name
has_many :part_usages
has_many :parts, :through => :part_usage
end
class Part < ActiveRecord::Base
attr_accessible :name
end
class PartUsage < ActiveRecord::Base
attr_accessible :machine_id,
:part_id
belongs_to :part
belongs_to :machine
end
MachineCosting and PartCosting models with one-to-many association.
class MachineCosting < ActiveRecord::Base
attr_accessible :machine_id,
:total_cost,
:machine_name,
:part_costings_attributes
attr_accessor :machine_name
has_many :part_costings, :dependent => :destroy
accepts_nested_attributes_for :part_costings, :allow_destroy => true
def machine_name
self.machine.try(:name)
end
end
class PartCosting < ActiveRecord::Base
attr_accessible :part_id,
:part_name,
:cost
attr_accessor :part_name
belongs_to :machine_costing
belongs_to :part
def part_name
self.part.try(:name)
end
end
Form for MachineCosting
views/machine_costings/_form.html.erb
<%= simple_form_for(#machine_costing, :html => {:multipart => true}) do |f| %>
<%= f.input :machine_id, :url => autocomplete_machine_id_machines_path,
:as => :autocomplete %>
<!-- HERE, WHENEVER I SELECT A MACHINE, I WANT TO ADD NESTED-FORMS FOR
PARTCOSTINGS CORRESPONDING TO ALL THE PARTS OF THE MACHINE I JUST SELECTED.-->
<%= f.simple_fields_for :part_costings do |part_costing|%>
<%= render 'part_costings/part_costing_fields', :f => part_costing %>
<% end %>
<% end %>
Please suggest how can I populate and dynamically add fixed no of fields for PartCostings using javascript after machine_id is selected in the field.
I would be happy to provide any more information.
Thanks again!!
First, summary of my approach.
In MachineCosting form, use 'rails3-jquery-autopopulate' gem to search for Machines by their name.
Hack MachineController to also send 'Parts info' together with matching machines in json form.
When user selects a machine, use javascript to add nested_forms for PartCostings and partially populate them using data recieved in json form.
Now here is how I have done it (code part).
views/machine_costings/_form.html.erb
<%= simple_form_for(#machine_costing, :html => {:multipart => true}) do |f| %>
<%= f.error_notification %>
<%= f.input :machine_name, :url => autocomplete_machine_name_machines_path,
:as => :autocomplete, :input_html => { :id_element => "#machine_costing_machine_id"} %>
<%= f.association :machine, :as => :hidden %>
<div id='part_costings'>
<%= f.simple_fields_for(:part_costings) do |part_costing|%>
<%= render 'part_costings/part_costing_fields', :f => part_costing %>
<% end %>
<div class="links hidden">
<%= link_to_add_association 'Add part costings', f, :part_costings,
:partial => 'part_costings/part_costing_fields' %>
</div>
</div>
<%= f.button :submit%>
<% end %>
views/part_costings/_part_costing_fields.html.erb
<div class= 'nested-fields'>
<!-- DO NOT CHANGE THE ORDER OF ATTRIBUTES ELSE machine_costing.js WILL FAIL -->
<%= f.input :part_id, :as=> :hidden %>
<%= f.text_field :part_name, :disabled => 'disabled' %>
<%= f.input :cost %>
<%= link_to_remove_association '<i class="icon-remove"></i>'.html_safe, f ,:class =>"part_costing_remove" %>
</div>
controllers/machines_controller.rb
class MachinesController < ApplicationController
# OVER RIDING THIS BY OWN METHOD
# autocomplete :machine, :name, :full=> true, :extra_data => [:machine_id]
def autocomplete_machine_name
respond_to do |format|
format.json {
#machines = Machine.where("name ilike ?", "%#{params[:term]}%")
render json: json_for_autocomplete_machines(#machines)
}
end
end
def json_for_autocomplete_machines(machines)
machines.collect do |machine|
parts = Hash.new
unless machine.part_usages.empty?
machine.part_usages.each do |part_usage|
parts[part_usage.part.id] = part_usage.part.name
end
end
hash = {"id" => machine.id.to_s, "value" => machine.name,
"parts" => parts}
hash
end
end
#
#
#
end
And here is the javascript part.
assest/javascripts/machine_costings.js
$(function() {
// Part Costings
var part_id;
var part_name;
$('#machine_costing_machine_name').bind('railsAutocomplete.select', function(event, data){
console.debug("Machine selected...");
parts = data.item.parts;
console.debug("Removing existing part_costings...");
$('.part_costing_remove').click();
console.debug("Adding part_costings...");
for(var id in parts) {
part_id = id;
part_name = parts[id];
$('.add_fields').click();
}
console.debug("Done adding all part_costings...");
});
$('#part_costings').bind('cocoon:after-insert', function(e, part_costing) {
part_costing[0].getElementsByTagName('input')[0].value = part_id;
part_costing[0].getElementsByTagName('input')[1].value = part_name;
console.debug("Added part_costing...");
});
});
routes.rb
resources :machines do
get :autocomplete_machine_name, :on => :collection
end
The critical points in javascript solution are...
Method "bind('railsAutocomplete.select', function(event, data)" from rail3-jquery-autocomplete gem.
Method "bind('cocoon:after-insert', function(e, part_costing)" from cocoon gem.
That's all.
Please let me know if you have some suggestions. Thanks :)
I have to separate forms on my page that are similar in that I create a comment via ajax with each.
Not functioning quite right as they are both using the same create.js.erb file.
How would I separate them so that they only render the appropriate jQuery code?
Index:
Form #1
<% form_for(#snapshot_comment, :html => { :class => "snapshot_comment", :id => "snapshot_comment" } do |f| %>
Some stuff
<% end %>
<ol id="snapshot_comments_collection">
Append stuff here...
</ol>
Form #2
<% form_for(#photo_comment, :html => { :class => "section-photo-comments", :id => "section-photo-comments" } do |f| %>
Some stuff
<% end %>
<ol id="comments-collection">
Append stuff here...
</ol>
Controller:
# POST /comments
# POST /comments.json
def create
#comment = current_user.comments.build(params[:comment])
#comment.commentable.authorize(params[:auth_key])
unauthorized! unless can? :create, #comment
if #comment.save
respond_to do |format|
format.html { redirect_to(request.headers["Referer"]) }
format.js
format.json {
render :json => #comment, :status => :created, :location => #comment
}
end
else
redirect_to(request.headers["Referer"])
end
end
Create.js.erb:
$j("<%= escape_javascript(render(:partial => #comment)) %>").prependTo("#snapshot_comments_collection");
$j('#snapshot_comment')[0].reset();
$j("<%= escape_javascript(render(:partial => #comment)) %>").prependTo("#comments-collection");
$j('#section-photo-comments')[0].reset();
You should be able to just use $() but I fail to see any use of :remote => true for your forms? Do paste the log of your rails (dev) server.