I would like to implement a Subscribe/Unsubscribe toggle button which creates/destroys a Subscription objectonClick, but I'm having difficulties finding an elegant solution.
I have experimented with multiple ideas, and have come to the conclusion that I need to use Javascript to accomplish this. However, I'm unsure if/how I can simultaneously change the button text and its action when a user clicks it. See button_to 'Subscribe' and button_to 'Unubscribe' below.
Any feedback or advice would be much appreciated!
Artists Index View:
<% #artists.each do |artist| %>
<tr id="tr_<%=artist.id%>">
<td><%= artist.name %></td>
<td><%= artist.artist_data["name"] %></td>
<td><%= artist.artist_data["facebook_tour_dates_url"] %></td>
<td><%= artist.artist_data["mbid"] %></td>
<td><%= artist.artist_data["upcoming_event_count"] %></td>
<% if artist.is_not_subscribed?(user_id: #user.id, artist_id: artist.id)%>
<td><%= button_to 'Subscribe', user_subscriptions_path(#user, artist_id: artist.id), method: :post, id: "subscribe_link_#{artist.id}", class: "subscribe", remote: true %></td>
<% else %>
<td><%= button_to 'Unsubscribe', user_subscription_path(#user, artist.find_subscription(user_id: #user.id, artist_id: artist.id)), method: :delete, id: "unsubscribe_link_#{artist.id}", class: "unsubscribe", remote: true %></td>
<% end %>
<% end %>
Subscriptions Controller:
def create
#user = User.find(params[:user_id])
#subscription = #user.subscriptions.build(subscription_params)
#subscription.artist_id = params[:artist_id]
respond_to do |format|
if #subscription.save
format.html { redirect_to artists_path, notice: 'Subscription was successfully created.' }
format.json { render :show, status: :created, location: #subscription }
format.js
else
format.html { render :new }
format.json { render json: #subscription.errors, status: :unprocessable_entity }
format.js { render js: #subscription, notice:'Unable to create Subscription' }
end
end
end
def destroy
#subscription = Subscription.find(params[:id])
#subscription.destroy
respond_to do |format|
format.html { redirect_to user_subscriptions_url, notice: 'Subscription was successfully destroyed.' }
format.json { head :no_content }
format.js
end
end
Subscription Model:
class Subscription < ActiveRecord::Base
belongs_to :artist
belongs_to :user
accepts_nested_attributes_for :artist
end
Artist Model:
class Artist < ActiveRecord::Base
include Subscribable
has_and_belongs_to_many :events
has_many :subscriptions
has_many :users, through: :subscriptions
validate :artist_already_exists?
end
User Model:
class User < ActiveRecord::Base
include Subscribable
has_many :subscriptions
has_many :artists, through: :subscriptions
accepts_nested_attributes_for :subscriptions
end
Drawing inspiration from this blog post, I was able to implement the following solution. If you have feedback or advice on how to better design this, don't be shy. I would appreciate your thoughts.
TLDR: Added a link_to_toggle method to clean up the view. Utilized Javascript's replaceWith to call link_to_toggle on each link click.
views/artists/index.html.erb
<% #artists.each do |artist| %>
<tr id="tr_<%=artist.id%>">
<td><%= artist.name %></td>
<td><%= artist.artist_data["name"] %></td>
<td><%= artist.artist_data["facebook_tour_dates_url"] %></td>
<td><%= artist.artist_data["mbid"] %></td>
<td><%= artist.artist_data["upcoming_event_count"] %></td>
<td><%= link_to_toggle_user_subscription(user:#user, artist:artist)%></td>
<td><%= link_to 'Edit', edit_artist_path(artist) %></td>
<td><%= link_to 'Destroy', artist, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
helpers/subscriptions_helper.rb
module SubscriptionsHelper
def link_to_toggle_user_subscription(user:user, artist:artist)
if user.is_subscribed?(user_id: user.id, artist_id: artist.id)
link_to('Unsubscribe', user_subscription_path(#user, artist.find_subscription(user_id: #user.id, artist_id: artist.id), artist_id: artist.id),
method: :delete,
id: "unsubscribe_link_#{artist.id}",
class: "unsubscribe",
remote: true)
else
link_to('Subscribe', user_subscriptions_path(#user, artist_id: artist.id),
method: :post,
id: "subscribe_link_#{artist.id}",
class: "subscribe",
remote: true)
end
end
end
controllers/subscriptions_controller.rb
def create
#user = current_user
#artist = Artist.find(params[:artist_id])
#subscription = #user.subscriptions.build(subscription_params)
#subscription.artist_id = params[:artist_id]
respond_to do |format|
if #subscription.save
format.html { redirect_to artists_path, notice: 'Subscription was successfully created.' }
format.json { render :show, status: :created, location: #subscription }
format.js
else
format.html { render :new }
format.json { render json: #subscription.errors, status: :unprocessable_entity }
format.js { render js: #subscription, notice:'Unable to create Subscription' }
end
end
end
def destroy
#user = current_user
#subscription = Subscription.find(params[:id])
#artist = Artist.find(params[:artist_id])
#subscription.destroy
respond_to do |format|
format.html { redirect_to user_subscriptions_url, notice: 'Subscription was successfully destroyed.' }
format.json { head :no_content }
format.js
end
end
views/subscriptions/create.js.erb
$('#subscribe_link_<%=#artist.id%>').replaceWith("<%=j link_to_toggle_user_subscription(user:#user, artist:#artist)%>");
views/subscriptions/destroy.js.erb
$('#unsubscribe_link_<%=#artist.id%>').replaceWith("<%=j link_to_toggle_user_subscription(user:#user, artist:#artist)%>");
Related
When I try to add a comment, it doesnt append on table. When i refresh a page then it append. I dont know what is problem. I think I did everything well. There is no errors on page. And it goes in table whatever I add to table, but only after refresh a page.
show.html.erb
...
<table id="comments">
<tbody>
<% #article.comments.each do |comment| %>
<%= render 'comments/comment', comment: comment %>
<% end %>
</tbody>
...
_comment.html.erb
<tr>
<td><p><%= comment.name %></p></td>
<td><p><%= comment.body %></p></td>
<td><p><%= time_ago_in_words(comment.created_at) %> Ago</p></td>
<% if User.find_by(email: comment.name) == current_user %>
<td><%= link_to 'Delete', [comment.article, comment], method: :delete, data: { confirm: 'Are you sure?' } %></td>
<% else %>
<td> </td>
<% end %>
</tr>
create.js.erb
$('table#comments tbody').append("<%= j render #comment %>")
terminal
ActionController::UnknownFormat (ActionController::UnknownFormat):
app/controllers/comments_controller.rb:7:in `create'
routes.rb
Rails.application.routes.draw do
get 'search/index'
devise_for :users
get 'welcome/index'
get '/search', to: 'search#search'
resources :user
resources :articles do
resources :comments
member do
put "like" => "articles#like"
put "unlike" => "articles#unlike"
end
end
resources :search, only: [:index]
root 'welcome#index'
end
comments_controller.rb
def create
#article = Article.find(params[:article_id])
#comment = #article.comments.create(params[:comment].permit(:name, :body))
#comment.name = current_user.email
respond_to do |format|
if #comment.save
format.js
format.html { redirect_to #comment }
format.json { render :show, status: :created, location: #comment }
else
end
end
end
Because by default, format return from controller is html. So you need to add another formant js in controller to make js.erb work.
Your controller should be something like this:
def create
............
if #comment.save
respond_to do |format|
format.js
end
end
end
to handle the errors: in create.js.erb file, check #comment.errors.any? - then do whatever you want to do.
I keep receving an error on my home page saying
'undefined method `company' for nil:NilClass'
for the first line of the following code displayed below. I am not really sure on how to fix this. I have two Controllers for both companies and customers because I am creating a two-sided marketplace.
When the user clicks the logo at the top instead of being redirected to the welcome page, the login page is being rendered since the home page is the root_path but I am using devise for before_action authenticate is being used.
<% if((current_user.company) || (current_user.customer)) %>
<%= render 'pages/welcome' %>
<% else %>
<% if current_user.is_company %>
<%= render 'companies/form', company: #company%>
<% else %>
Here is the home.html.erb file with the code which is the root_path
<% if((current_user.company) || (current_user.customer)) %>
<%= render 'pages/welcome' %>
<% else %>
<% if current_user.is_company %>
<%= render 'companies/form', company: #company%>
<% else %>
<%= render 'customers/form', customer: #customer%>
<% end %>
<% end %>
Here is my companiesController
class CompaniesController < ApplicationController
before_action :set_company, only: [:show, :edit, :update, :destroy]
def index
#companies = Company.all
end
# GET /companies/1
# GET /companies/1.json
def show
#company = Company.find(params[:company_id])
end
# GET /companies/new
def new
#company = Company.new
end
# GET /companies/1/edit
def edit
end
# POST /companies
# POST /companies.json
def create
#company = Company.new(company_params)
respond_to do |format|
if #company.save
format.html { redirect_to #company, notice: 'Company was successfully created.' }
format.json { render :show, status: :created, location: #company }
else
format.html { render :new }
format.json { render json: #company.errors, status: :unprocessable_entity }
end
end
end
# PATCH/PUT /companies/1
# PATCH/PUT /companies/1.json
def update
respond_to do |format|
if #company.update(company_params)
format.html { redirect_to #company, notice: 'Company was successfully updated.' }
format.json { render :show, status: :ok, location: #company }
else
format.html { render :edit }
format.json { render json: #company.errors, status: :unprocessable_entity }
end
end
end
# DELETE /companies/1
# DELETE /companies/1.json
def destroy
#company.destroy
respond_to do |format|
format.html { redirect_to companies_url, notice: 'Company was successfully destroyed.' }
format.json { head :no_content }
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_company
#company = Company.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the
white list through.
def company_params
params.require(:company).permit(:username, :phone, :website, :street, :city, :state, :country, :user_id)
end
end
it just says that the current_user is nil, you need to make sure that the user is logged in to use current_user.company
The log is giving you details as to why the company is returning a nil. The company requires an object in it for the page to load properly. But that is not so because no user is logged in for the company to have an object to return.
<% if((current_user.company) || (current_user.customer)) %> <%=
render 'pages/welcome' %> <% else %>
<% if current_user.is_company %> <%= render 'companies/form',
company: #company%> <% else %>
is returning a nil because no user is logged in.
You can first check if there is a user logged in and then render
something before this to prevent the error page
<% if(current_user) <% if((current_user.company) ||
(current_user.customer)) %>
<%= render 'pages/welcome' %> <% else %>
<% if current_user.is_company %>
<%= render 'companies/form', company: #company%> <% end %> <% else %> render something here <% end %>
Or simply log in to make sure this does not return a nil. But the first fix is the most ideal.
In my app I have a commenting system in place that displays comments as a collection and I've got ajax commenting working but currently it renders the entire collection again but what I want is to just append the latest comment. Here's my code:
comments_controller.rb
class CommentsController < ApplicationController
before_filter :authenticate_member!
before_filter :load_commentable
before_filter :find_member
def index
redirect_to root_path
end
def new
#comment = #commentable.comments.new
end
def create
#comment = #commentable.comments.new(params[:comment])
#comment.member = current_member
respond_to do |format|
if #comment.save
format.html { redirect_to :back }
format.json
format.js
else
format.html { redirect_to :back }
format.json
format.js
end
end
end
def destroy
#comment = Comment.find(params[:id])
respond_to do |format|
if #comment.member == current_member || #commentable.member == current_member
#comment.destroy
format.html { redirect_to :back }
else
format.html { redirect_to :back, alert: 'You can\'t delete this comment.' }
end
end
end
private
def load_commentable
klass = [Status, Medium, Project, Event, Listing].detect { |c| params["#{c.name.underscore}_id"] }
#commentable = klass.find(params["#{klass.name.underscore}_id"])
end
def find_member
#member = Member.find_by_user_name(params[:user_name])
end
end
statuses_controller
def show
#status = Status.find(params[:id])
#commentable = #status
#comments = #commentable.comments.order('created_at desc').page(params[:page]).per_page(15)
#comment = Comment.new
respond_to do |format|
format.html # show.html.erb
format.json { redirect_to profile_path(current_member) }
format.js
end
end
statuses/show.html.erb
<% if member_signed_in? %>
<div id="comm_form_wrap">
<%= render "shared/comment_form" %>
</div>
<div id="comments_<%= #commentable.id %>">
<%= render partial: "shared/comments", :collection => #comments, :as => :comment %>
</div>
<% end %>
shared/_comments.html.erb
<div id="comment_<%= comment.commentable.id %>_<%= comment.id %>" class="comments">
<span class="comment_av">
<%= comment_avatar_link_2 comment.member, :class => "com_av", title: comment.member.full_name, alt: comment.member.full_name %>
</span>
<span>
<div class="comment_name">
<% if comment.member == #commentable.member %>
<%= link_to comment.member.user_name, profile_path(comment.member) %> <span class="owner">Creator</span>
<% else %>
<%= link_to comment.member.user_name, profile_path(comment.member) %>
<% end %>
<% if comment.member == current_member || #commentable.member == current_member %>
<span class="comment_del">
<%= link_to image_tag("Delete.png", title: 'Delete'), [#commentable, comment], remote: true, method: :delete, data: { confirm: 'Are you sure?' } %>
</span>
<% end %>
<span class="meta">
<%= time_ago_in_words(comment.created_at) %>
</span>
</div>
<div class="com_con">
<%= Rinku.auto_link(comment.content).html_safe %>
</div>
</span>
</div>
comments/create.js.erb
$("#comments_<%= #commentable.id %>").html("<%= escape_javascript(render :partial => 'shared/comments', :collection => #comments, :as => :comment) %>");
$('#comment_form')[0].reset();
If I just change html to append in the create.js.erb file it will append the entire collection of comments. I guess I could copy and paste the code from my comments partial but that'd be a lot of code and I wouldn't know how to define the variables that way. What's the best way for me to append the single new comment? Thanks in advance.
I was able to figure this one out. Instead of rendering or appending the collection I could just append #comment like so:
$("#comments_<%= #commentable.id %>").append("<%= escape_javascript(render :partial => #comment, :locals => {:comment => #comment}) %>");
Then I just needed to create a _comment.html.erb partial in my comments folder.
I want to implement ajax in my rails application but I am getting this error.
my erb code where ajax call is made is below
<% #articles.each do |article| %>
<tr>
<td><%= article.title %></td>
<td><%= article.text %></td>
<td><%= link_to 'Show', article_path(article) %></td>
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show Comment', :action => 'showcomment' ,method: :get, :id =>article, :remote => true ,:class=>'show_comment' %></td>
<td><%= link_to 'Destroy', article_path(article), method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
my articles.controller has code
class ArticlesController < ApplicationController
def new
#article = Article.new
end
def create
#article = Article.new(article_params)
if #article.save
redirect_to #article
else
render 'new'
end
end
def show
#article = Article.find(params[:id])
end
def edit
#article = Article.find(params[:id])
end
def index
#articles = Article.all
end
def destroy
#article = Article.find(params[:id])
#article.destroy
redirect_to articles_path
end
def showcomment
#article = Article.find(params[:article_id])
#comment = #article.comments.find(params[:id])
respond_to do |format|
format.js
end
end
def update
#article = Article.find(params[:id])
if #article.update(article_params)
redirect_to #article
else
render 'edit'
end
end
private
def article_params
params.require(:article).permit(:title, :text)
end
end
I dont know somehow the request is getting in show method and it is giving the exception
Couldn't find Article with 'id'=showcomment
In your view, try passing:
<td><%= link_to 'Show Comment', :action => 'showcomment' ,method: :get, :id =>article.id, :remote => true ,:class=>'show_comment' %>
Once the error is removed, try checking if your js template is in the right directory.
P.S: A little thing worth noticing: instead of showcomment use show_comment. Ruby way.
I have a Rails app with listing of leads in a table. In one of the collumns I display status of a lead in a drop down menu. I want to enable changing this status of the lead on changing the value selected in the drop down.
This is what I tried:
The code to display the form in a table cell:
<% #leads.each do |lead| %>
<tr>
<td><%= lead.id %></td>
<td><%= form_for(lead,:url => 'update_lead_status') do |f| %>
<div class="field">
<%= f.select :status, ["to_call","called","confirmed","lite"], :selected => lead.status, onchange: "this.form.submit();" %>
</div>
<% end %>
</td>
my update_lead_status method in leads controller:
#PUT
def update_lead_status
#lead = Lead.find(params[:id])
respond_to do |format|
# format.js
if #lead.update_attributes(params[:lead])
format.html { redirect_to leads_url, notice: 'Lead was successfully updated.' }
format.json { head :no_content }
else
format.html { render action: "edit" }
format.json { render json: #lead.errors, status: :unprocessable_entity }
end
end
end
Also I want the submission to be Ajax style without refreshing.
Set form id and then submit form
<%= form_for(lead,:url => 'update_lead_status',:html=>{:id=>'lead_form'}) do |f| %>
<%= f.select :status, ["to_call","called","confirmed","lite"], :selected => lead.status, onchange: "$('#lead_form').submit();" %>
<% end %>