When I post a new comment in the product page, an alert should appear to all the users that are logged in and in that page, also the comment should appear without refreshing the page.
When there's incoming data on the websocket for this channel ProductChannel the function received in product.js should be called, but instead nothing happens. Any ideas what could be the problem?
App.product = App.cable.subscriptions.create("ProductChannel", {
connected: function() {
// Called when the subscription is ready for use on the server
},
disconnected: function() {
// Called when the subscription has been terminated by the server
},
received: function(data) {
// Called when there's incoming data on the websocket for this channel
$('.alert.alert-info').show().delay(3000).fadeOut('slow');
$('.product-reviews').prepend(data.comment);
$("#average-rating").attr('data-score', data.average_rating);
refreshRating();
},
listen_to_comments: function(){
return this.perform('listen', {
product_id: $("[data-product-id]").data("product-id")
});
}
});
$(document).on('turbolinks:load', function() {
App.product.listen_to_comments();
});
product_channel.rb
class ProductChannel < ApplicationCable::Channel
def subscribed
# stream_from "some_channel"
# stream_from "product_channel"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
def listen(data)
stop_all_streams
stream_for data["product_id"]
end
end
comments_controller.rb
class CommentsController < ApplicationController
def index
redirect_to root_path
end
def create
#product = Product.find(params[:product_id])
#comment = #product.comments.new(comment_params)
#comment.user = current_user
respond_to do |format|
if #comment.save
ProductChannel.broadcast_to #product.id, comment: CommentsController.render(partial: 'comments/comment', locals: {comment: #comment, current_user: current_user}), average_rating: #product.average_rating
format.html { redirect_to #product, notice: 'Review was created successfully.' }
format.json { render :show, status: :created, location: #product }
format.js
else
format.html { redirect_to #product, alert: 'Review was not saved successfully.' }
format.json { render json: #comment.errors, status: :unprocessable_entity }
end
end
end
Also I get this error Unable to process ProductChannel#listen({"product_id"=>9})
Related
I have a problem with HTML sortable update in rails 6
I want to drag and drop the images through web page and that is worked fine but, When I want to update the order I got 404 not found error in console log and also an error in find ID.
by the way, I use this script for HTML sortable
https://github.com/jordanhudgens/devcamp-portfolio/blob/master/app/assets/javascripts/html.sortable.js
Controller :
class PortfoliosController < ApplicationController
before_action :set_portfolio_item, only:[:edit , :show, :update , :destroy]
layout "portfolio"
access all: [:show, :index , :angular], user: {except: [:destroy, :new , :create , :update , :edit , :sort]}, site_admin: :all
def index
# You can filter what you want to show in protfolio
# Portfolio.where(subtitle: "Angular")
# You can define it in models and call the method here
# It must create on Portfolio.rb in models
# You can create scope too on models and call
#portfolio_items = Portfolio.by_position
end
def angular
#angular_portfolio_items = Portfolio.angular
end
def sort
params[:order].each do |key, value|
Portfolio.find(value[:id]).update(position: value[:position])
end
head :ok
end
def new
#portfolio_item = Portfolio.new
3.times { #portfolio_item.technologies.build }
end
def create
#portfolio_item = Portfolio.new(portfolio_params)
respond_to do |format|
if #portfolio_item.save
format.html { redirect_to portfolios_path, notice: 'Portfolio was successfully created.' }
else
format.html { render :new }
end
end
end
def edit
end
def update
respond_to do |format|
if #portfolio_item.update(portfolio_params)
format.html { redirect_to portfolios_path, notice: 'The record was successfully updated.' }
else
format.html { render :edit }
end
end
end
def show
end
def destroy
# Perform the lookup
# Destroy/delete the record
#portfolio_item.destroy
#Redirect
respond_to do |format|
format.html { redirect_to portfolios_url, notice: 'Portfolio was successfully deleted!.' }
end
end
private
def portfolio_params
params.require(:portfolio)
end
def set_portfolio_item
#portfolio_item = Portfolio.find(params[:id])
end
end
This is my routes.rb
Rails.application.routes.draw do
devise_for :users, path: '', path_names: { sign_in: 'login', sign_out: 'logout', sign_up: 'register' }
resources :portfolios, except: [:show] do
put :sort, on: :collection
end
get 'portfolio/:id' , to: 'portfolios#show', as: 'portfolio_show'
get 'angular-items' , to: 'portfolios#angular'
# we can pass anything here after get
get 'about', to: 'pages#about'
get 'contact', to: 'pages#contact'
resources :blogs do
member do
get :toggle_status
end
end
resources :posts
root to: 'pages#home'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
This is my CoffeeScript for HTML sortable
ready = undefined
set_positions = undefined
set_positions = ->
$('.card').each (i) ->
$(this).attr 'data-pos', i + 1
return
return
ready = ->
set_positions()
$('.sortable').sortable()
$('.sortable').sortable().bind 'sortupdate', (e, ui) ->
updated_order = []
set_positions()
$('.card').each (i) ->
updated_order.push
id: $(this).data('id')
position: i + 1
return
$.ajax
type: 'PUT'
url: '/portfolios/sort'
data: order: updated_order
return
return
$(document).ready ready
Thanks for your helps!
I would like to implement ajax to create a post, without recharging the page and not going to the show (I following a tutorial) but is not working.
in the _form.html.haml you can see remote:true in the form helper
= form_for #post,remote: true do |f|
- if #post.errors.any?
#error_explanation
%h2= "#{pluralize(#post.errors.count, "error")} prohibited this post
from being saved:"
%ul
- #post.errors.full_messages.each do |message|
%li= message
.mdl-textfield.mdl-js-textfield.full-width
= f.text_area :body, class:"mdl-textfield__input"
= f.label :body, "Comparte con la Comunidad", class:"mdl-
textfield__label"
.actions.text-right
= f.submit 'Publicar', class:"mdl-button mdl-js-button mdl-button--
raised mdl-button--colored"
however when the post is created, the application redirect to the show of the post created recently in html format, it should be stay in the form.
I don't know if the version of Rails 5.1.2 has a issue, but in Rails 4 with only typing remote: true the application stay in the form after the submit action.
post controller:
class PostsController < ApplicationController
before_action :set_post, only: [:show, :edit, :update, :destroy]
# GET /posts
# GET /posts.json
def index
#posts = Post.all
end
# GET /posts/1
# GET /posts/1.json
def show
end
# GET /posts/new
def new
#post = Post.new
end
# GET /posts/1/edit
def edit
end
# POST /posts
# POST /posts.json
def create
#post = current_user.posts.new(post_params)
respond_to do |format|
if #post.save
format.html { redirect_to #post, notice: 'Post was successfully created.' }
format.json { render :show, status: :created, location: #post }
else
format.html { render :new }
format.json { render json: #post.errors, status: :unprocessable_entity }
end
end
end
# PATCH/PUT /posts/1
# PATCH/PUT /posts/1.json
def update
respond_to do |format|
if #post.update(post_params)
format.html { redirect_to #post, notice: 'Post was successfully updated.' }
format.json { render :show, status: :ok, location: #post }
else
format.html { render :edit }
format.json { render json: #post.errors, status: :unprocessable_entity }
end
end
end
# DELETE /posts/1
# DELETE /posts/1.json
def destroy
#post.destroy
respond_to do |format|
format.html { redirect_to posts_url, notice: 'Post was successfully destroyed.' }
format.json { head :no_content }
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_post
#post = Post.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def post_params
params.require(:post).permit(:body)
end
end
also I have a show.js.erb file to render a view to see the body of the post after he is created.
show.js.erb
$('#posts').append("<%= render j #post %>")
_post.haml
%article
=post.body
Done! in the post controller is missing to respond a JS format and the show.js.erb the render method has bad syntax
1) post controller: add format.js
def create
#post = current_user.posts.new(post_params)
respond_to do |format|
if #post.save
format.html { redirect_to #post, notice: 'Post was successfully created.' }
format.json { render :show, status: :created, location: #post }
format.js { render :show }
else
format.html { render :new }
format.json { render json: #post.errors, status: :unprocessable_entity }
format.js { }
end
end
end
2) show.js.erb: the J it should be before render
$("posts").append(<%= j render #post %>)
For some reason after a click my button that requests data from my controller, my table disappears. Here is my table:
<div id="SelectedTm" style= float:right>
<table id = "PlyrsTm2" style = float:right>
<tr><th id="PTTitle" colspan=2>List of players on selected team</th></tr>
<tr><th id="PTHRows">Player</th><th id="PTHRows">Team</th></tr>
<% #pl.each do |f| %>
<tr><td class="player"><%= f.Plyr %></td><td class="team"><%= f.Team%></td></tr>
<% end %>
</table>
</div>
Here is the button that triggers my jquery with ajax
<button id="showbtn">Select Team</button>
Here is the jquery and ajax:
$(document).ready(function(){
$('#showbtn').on('click', function() {
ids = $('#teams').val()
IM = false
$.ajax({
url: "http://localhost:3000/teamplayers.json?resolution="+ids+"&import="+IM,
type:"get",
dataType: "json",
cache: true,
success:function(data){
$('#PlyrsTm2').html(data);
alert("Loading Players....");
},
error: function(error) {
alert("Failed " + console.log(error) + " " + error)
}
});
$('#PlyrsTm2').trigger('create');
return false;
});
});
Now as you can see, my table is populated by rails. Every time i select a new team the table disappears. And only re-appears if I reload the page, but that is the originally selected team, which by default is the first one.
UPDATE
Here is my controller:
class TeamplayersController < ApplicationController
before_filter :set_id
before_action :set_id, :set_teamplayer, only: [:show, :edit, :update, :destroy]
# GET /teamplayers
# GET /teamplayers.json
def index
#teamplayers = Teamplayer.all
#fteams = Fteam.all
tid = params[:resolution]
toimport = params[:import]
puts tid
if tid.nil? == true
tid = 1
#ids = tid
#pl = Teamplayer.joins(:live_player).where(:teamid => #ids).all
else
tid = tid.to_i;
#ids = tid
#pl = Teamplayer.joins(:live_player).where(:teamid => #ids).pluck(:Plyr, :Team)
end
if toimport == "true"
#turl = Fteam.where(:id => #ids).pluck(:TeamUrl)
#turl = #turl[0]
system "rake updateTm:updateA[#{#turl},#{#ids}]"
end
end
# GET /teamplayers/1
# GET /teamplayers/1.json
def show
end
# GET /teamplayers/new
def new
#teamplayer = Teamplayer.new
end
# GET /teamplayers/1/edit
def edit
end
# POST /teamplayers
# POST /teamplayers.json
def create
#teamplayer = Teamplayer.new(teamplayer_params)
respond_to do |format|
if #teamplayer.save
format.html { redirect_to #teamplayer, notice: 'Teamplayer was successfully created.' }
format.json { render action: 'show', status: :created, location: #teamplayer }
else
format.html { render action: 'new' }
format.json { render json: #teamplayer.errors, status: :unprocessable_entity }
end
end
end
# PATCH/PUT /teamplayers/1
# PATCH/PUT /teamplayers/1.json
def update
respond_to do |format|
if #teamplayer.update(teamplayer_params)
format.html { redirect_to #teamplayer, notice: 'Teamplayer was successfully updated.' }
format.json { head :no_content }
else
format.html { render action: 'edit' }
format.json { render json: #teamplayer.errors, status: :unprocessable_entity }
end
end
end
# DELETE /teamplayers/1
# DELETE /teamplayers/1.json
def destroy
#teamplayer.destroy
respond_to do |format|
format.html { redirect_to teamplayers_url }
format.json { head :no_content }
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_teamplayer
#teamplayer = Teamplayer.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def teamplayer_params
params.require(:teamplayer).permit(:playerid, :teamid)
end
end
So what is going wrong here, because i notice that it is calling every records individual page but why is it now giving my back the the information from my query as the data instead?
Looks like the statement ids = $("#teams").val(); will return undefined, since there is no element with id="teams".
If ids is undefined, it's likely that data is null or undefined in this function call:
function(data){
$('#PlyrsTm2').html(data);
alert("Loading Players....");
}
If data is null, calling html(null) will cause all your table data to disappear.
So, the solution is to populate ids correctly. I'm not sure what ids is supposed to do, but that's most likely the solution.
$('#PlyrsTm2').html(data);
That's why your table disappears
The problem is you're replacing the content of this element (not the element itself). To fix this, I'd do this:
$('#SelectedTm').html(data);
So I've been searching for an answer to this, but I've been having a lot of trouble. I'm trying to have a form_for in rails that goes to the create action in the User controller, which updates the color of the submit button depending on whether it fails submitting or not. Here is my code, some of which is directly from a tutorial I found online:
class UsersController < ApplicationController
def new
#user = User.new
end
def create
#user = User.new(user_params)
respond_to do |format|
if #user.save
format.html { redirect_to #user, notice: 'User was successfully created.' }
format.js {}
format.json { render json: #user, status: :created, location: #user }
else
format.html { render action: "new" }
format.json { render json: #user.errors, status: :unprocessable_entity }
end
end
private
def user_params
params.require(:user).permit(:email)
end
And here is my create.js.coffee.erb file.
if(!isValidEmailAddress($('#e_submit').val())){
$('.button').text("Invalid Email");
$('.button').animate({"background-color":"#FFBF00"},300);
$('.button').hover(function(){
$(this).css("background-color","#FFBF00");
}, function(){
$(this).css("background-color","#FFBF00");
});
$('#e_submit').css("box-shadow","0 0 0px rgba(0,0,0,0)");
$('#e_submit').val("");
}
Basically, I want different js events to happen depending on the submitted information, and I don't know how to do this in rails.
You could check if there are any errors on #user in your js template to know if save is success or not, create.js.coffee.erb:
<% if #user.errors.empty? %>
# successfully saved
<% else %>
# failed to save
<% end %>
So I worked through the Agile Web Development with Rails book, and had a nice functional web application running on Heroku based on the "Depot" app in the book. I was editing CSS/SASS primarily, and I did something that messed up my line_item quantity in my cart.
For the life of me I can't figure out what I've done. Now when I click "Add to cart" button on my main page, 2 items are added to my cart. Does this have something to do with my database? I'm totally flummoxed after losing a bit of my flow in photoshop/CSS-land.
So in a nutshell:
I hit the "Add to cart" button, and I get two of each item I click on.
Here is my carts controller:
class CartsController < ApplicationController
skip_before_filter :authorize, only: [:create, :update, :destroy]
# GET /carts
# GET /carts.json
def index
#carts = Cart.all
respond_to do |format|
format.html # index.html.erb
format.json { render json: #carts }
end
end
# GET /carts/1
# GET /carts/1.json
def show
begin
#cart = Cart.find(params[:id])
rescue ActiveRecord::RecordNotFound
logger.error "Attempt to access invalid cart #{params[:id]}"
redirect_to store_url, notice: 'Invalid cart'
else
respond_to do |format|
format.html #show.html.erb
format.json { render json: #cart }
end
end
end
# GET /carts/new
# GET /carts/new.json
def new
#cart = Cart.new
respond_to do |format|
format.html # new.html.erb
format.json { render json: #cart }
end
end
# GET /carts/1/edit
def edit
#cart = Cart.find(params[:id])
end
# POST /carts
# POST /carts.json
def create
#cart = Cart.new(params[:cart])
respond_to do |format|
if #cart.save
format.html { redirect_to #cart, notice: 'Cart was successfully created.' }
format.json { render json: #cart, status: :created, location: #cart }
else
format.html { render action: "new" }
format.json { render json: #cart.errors, status: :unprocessable_entity }
end
end
end
# PUT /carts/1
# PUT /carts/1.json
def update
#cart = Cart.find(params[:id])
respond_to do |format|
if #cart.update_attributes(params[:cart])
format.html { redirect_to #cart, notice: 'Cart was successfully updated.' }
format.json { head :no_content }
else
format.html { render action: "edit" }
format.json { render json: #cart.errors, status: :unprocessable_entity }
end
end
end
# DELETE /carts/1
# DELETE /carts/1.json
def destroy
#cart = current_cart
#cart.destroy
session[:cart_id] = nil
respond_to do |format|
format.html { redirect_to store_url }
format.json { head :no_content }
end
end
end
Here is my models/cart.rb file:
class Cart < ActiveRecord::Base
attr_accessible :title, :body, :name, :quantities_attributes, :quantities, :quantity, :product_id, :line_items
#the addition of everything in attr_accessible after :body may be unnecessary if bugs show up later on...
has_many :line_items, dependent: :destroy
def add_product(product_id)
current_item = line_items.find_by_product_id(product_id)
if current_item
current_item.quantity += 1
else
current_item = line_items.build(product_id: product_id)
end
current_item
end
def total_price
line_items.to_a.sum { |item| item.total_price }
end
end
Here is my create.js.erb file
$("#notice").hide();
if ($('#cart tr').length == 1) { $('#cart').show('blind', 1000); }
$('#cart').html("<%=j render #cart %>");
$('#current_item').css({'background-color':'#fb0f19'}).
animate({'background-color':'#08BBD1'}, 1000);
Here is my application_controller.rb:
class ApplicationController < ActionController::Base
before_filter :authorize
protect_from_forgery
private
def current_cart
Cart.find(session[:cart_id])
rescue ActiveRecord::RecordNotFound
cart = Cart.create
session[:cart_id] = cart.id
cart
end
protected
def authorize
unless User.find_by_id(session[:user_id])
redirect_to login_url, notice: "Please log in"
end
end
end
Here is my views/carts/_cart.html.erb
<% unless cart.line_items.empty? %>
<div class="cart_title">Your Comic Cart</div>
<table>
<%= render(cart.line_items) %>
<tr class="total_line">
<td colspan="2">Total</td>
<td class="total_cell"><%= cart.total_price %> BTC</td>
</tr>
</table>
<%= button_to "Checkout", new_order_path, method: :get %>
<%= button_to 'Empty cart', cart, method: :delete,
confirm: 'Are you sure?' %>
<% end %>
line_items_controller.rb:
class LineItemsController < ApplicationController
skip_before_filter :authorize, only: :create
# GET /line_items
# GET /line_items.json
def index
#line_items = LineItem.all
respond_to do |format|
format.html # index.html.erb
format.json { render json: #line_items }
end
end
# GET /line_items/1
# GET /line_items/1.json
def show
#line_item = LineItem.find(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render json: #line_item }
end
end
# GET /line_items/new
# GET /line_items/new.json
def new
#line_item = LineItem.new
respond_to do |format|
format.html # new.html.erb
format.json { render json: #line_item }
end
end
# GET /line_items/1/edit
def edit
#line_item = LineItem.find(params[:id])
end
# POST /line_items
# POST /line_items.json
def create
#cart = current_cart
product = Product.find(params[:product_id])
#line_item = #cart.add_product(product.id)
respond_to do |format|
if #line_item.save
format.html { redirect_to store_url }
format.js { #current_item = #line_item }
format.json { render json: #line_item,
status: :created, location: #line_item }
else
format.html { render action: "new" }
format.json { render json: #line_item.errors, status: :unprocessable_entity }
end
end
end
# PUT /line_items/1
# PUT /line_items/1.json
def update
#line_item = LineItem.find(params[:id])
respond_to do |format|
if #line_item.update_attributes(params[:line_item])
format.html { redirect_to #line_item, notice: 'Line item was successfully updated.' }
format.json { head :no_content }
else
format.html { render action: "edit" }
format.json { render json: #line_item.errors, status: :unprocessable_entity }
end
end
end
# DELETE /line_items/1
# DELETE /line_items/1.json
def destroy
#line_item = LineItem.find(params[:id])
#line_item.destroy
respond_to do |format|
format.html { redirect_to line_items_url }
format.json { head :no_content }
end
end
end
I'm not sure if there are more files worth showing, it is late and I'm super lost, so I probably should have waited until morning to post this. Let me know if anyone else has run into this. I still have a hard time with databases, so I could be completely missing the right place to be looking. Thanks for any help, I know this misstep lacks focus in my explination.
I think the problem is in your store.js.coffee. Check and modify the code as per errata 153 from below link:
http://pragprog.com/titles/rails4/errata
i.e change $(document).on "ready page:change" to $(document).on "ready, page:change"