I have a simple ruby on rails form that is posted with ajax. However, I keep receiving this error:
NameError (uninitialized constant Welcome4Controller::EmailMe2Mailer):
app/controllers/welcome4_controller.rb:3:in `contact'
This is the form:
<%= form_for :contact, :remote => true, :method => :post, html: {:class => "form-stacked", id: 'contact_form' } do |f| %>
<div class="col-md-6">
<div class="input-group input-group-lg wow fadeInUp" data-wow-delay='0.8s'>
<span class="input-group-addon" id="sizing-addon1">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" aria-describedby='sizing-addon1' placeholder="Full Name" name="fullname" id="fullname" required>
</div>
<div class="input-group input-group-lg wow fadeInUp" data-wow-delay='1.2s'>
<span class="input-group-addon" id="sizing-addon1">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
<input class="form-control" aria-describedby='sizing-addon1' placeholder="Email Address" required name="email" id="email">
</div>
<div class="input-group input-group-lg wow fadeInUp" data-wow-delay='1.6s'>
<span class="input-group-addon" id="sizing-addon1">
<i class="fa fa-phone" aria-hidden="true"></i>
</span>
<input class="form-control" aria-describedby='sizing-addon1' placeholder="Phone Number (optional)" name="phone" id="phone">
</div>
</div>
<div class="col-md-6">
<div class="input-group wow fadeInUp" data-wow-delay='2s'>
<textarea class="form-control" cols="80" rows="6" name="message" placeholder="Type here..." style="width:100%" id="message" required></textarea>
</div>
<button class="btn btn-lg wow fadeInUp" data-wow-delay='2.4s' id="contact_btn"data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Sending" >Send Your Message</button>
</div>
<% end %>
This is the controller:
class Welcome4Controller < ApplicationController
def contact
EmailMe2Mailer.confirmation_2(params[:fullname,:email,:phone,:message]).deliver_now
render json: { success: true }, status: 200
end
def index
end
end
This is the mailer:
class EmailMe2Mailer < ApplicationMailer
default from: "**#gmail.com"
def confirmation_2(fullname,email,phone,message)
#greeting = "Hi"
#fullname = fullname
#email = email
#phone = phone
#message = message
mail to: "**#gmail.com", subject: "contact email"
end
end
This is the ajax call:
$('#contact_form').submit(function(e) {
e.preventDefault();
}).validate({
rules: {
fullname: {
required: true,
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 5
}
},
submitHandler: function (form) {
var btn = $('#contact_btn');
btn.button('loading');
setTimeout(function() {
btn.button('reset');
}, 8000);
$.ajax({
type: 'POST',
url: '/contact',
// data: form.serialize(),
dataType: 'json',
async: true,
data: {
fullname: $('#fullname').val(),
email: $('#email').val(),
phone: $('#phone').val(),
message: $('#message').val()
},
success: function (json) {
$('#contact').hide();
$('#output').html(
'<i class="fa fa-check" aria-hidden="true" id="check" style="border-radius:50%;font-size:80px;text-align:center;color:#E81B00"></i><br><p class="lead" style="font-size:40px;">We have received your message!</p>'
).show();
}
});
return false; // for demo
}
});
It is basically complaining about passing multiple arguments to the mailer here:
EmailMe2Mailer.confirmation_2(params[:fullname,:email,:phone,:message]).deliver_now
This is where EmailMe2Mail is located:
app => mailers => email_me_2_mailer.rb
this is application_mail.rb
class ApplicationMailer < ActionMailer::Base
default from: '**#gmail.com'
layout 'mailer'
end
NameError (uninitialized constant Welcome4Controller::EmailMe2Mailer):
This is because of the file name being wrong. It should be email_me2_mailer.rb whereas you have it like email_me_2_mailer.rb Changing it to email_me2_mailer.rb should fix your problem.
Normally Rails expects the file names to be in snake_case with respect to the class names being CamelCase. You can use underscore to check the snake_case string for EmailMe2Mailer like below
"EmailMe2Mailler".underscore
=> "email_me2_mailler"
Related
I am building out an app using Rails 6 Api as a backend and Vue as a standalone web app.
I have just created my sign up form, however on submit I am getting a Completed 422 Unprocessable Entity error. I can not for the life of me figure out where I am going wrong.
How the form works:
I am creating both the user and the Account on the same form, using the accepts_nested_attributes_for :account. the form is hitting a signup controller as shown below:
class SignupController < ApplicationController
def create
user = User.new(user_params)
if user.save
payload = { user_id: user.id }
session = JWTSessions::Session.new(payload: payload, refresh_by_access_allowed: true)
tokens = session.login
response.set_cookie(JWTSessions.access_cookie,
value: tokens[:access],
httponly: true,
secure: Rails.env.production?)
render json: { csrf: tokens[:csrf] }
set_trial
else
render json: { error: user.errors.full_messages.join(' ') }, status: :unprocessable_entity
end
end
protected
private
def user_params
params.permit(:f_name, :l_name, :email, :password, :password_confirmation, account_attributes: [:company_name])
end
def set_trial
account = user.account
account.update!(trial_start: DateTime.now, trial_end: 7.days.from.now, is_active: true)
end
end
When I submit the form, see below) I get this error in my rails server.
Started POST "/signup" for ::1 at 2019-10-20 22:10:09 -0600
(0.5ms) SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
Processing by SignupController#create as HTML
Parameters: {"company_name"=>"tauren group", "f_name"=>"Sxxx", "l_name"=>"Wxxx", "email"=>"xxx#xxx.com", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]", "signup"=>{"company_name"=>"tauren group", "f_name"=>"Sxxx", "l_name"=>"Wxxx", "email"=>"xxx#xxx.com", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]"}}
Unpermitted parameters: :company_name, :signup
(0.2ms) BEGIN
↳ app/controllers/signup_controller.rb:5:in `create'
(0.2ms) ROLLBACK
↳ app/controllers/signup_controller.rb:5:in `create'
Completed 422 Unprocessable Entity in 290ms (Views: 0.3ms | ActiveRecord: 5.9ms | Allocations: 13334)
What I don't get is how signup is being passed in the param, and why company_name is not permitted.
Here is my Vue Component:
<template>
<div class="flex h-screen items-center justify-center -mt-20">
<div class="flex flex-wrap w-full justify-center">
<div class="w-full text-center mb-4 text-xs lg:text-sm headerFont tracking-wide text-link-blue">
Start your free 7 day trial. No credit card required. No obligation to continue.
</div>
<div class="w-full lg:w-7/12 bg-gray-200 p-6 rounded-lg shadow-md">
<form #submit.prevent="signup">
<div class="w-full mb-4">
<label for="user_account_attributes_company_name" class="label headerFont">Company Name</label>
<input type="text" v-model="company_name" name="user[account_attributes][company_name]" class="form-input w-full block" id="user_account_attributes_company_name" />
</div>
<div class="flex flex-wrap w-full mb-4">
<div class="w-full lg:w-1/2">
<label for="user_f_name" class="label headerFont">First Name</label>
<input type="text" v-model="f_name" name="user[f_name]" id="user_f_name" class="form-input w-full lg:w-11/12 block" />
</div>
<div class="w-full lg:w-1/2">
<label for="user_l_name" class="label headerFont">First Name</label>
<input type="text" v-model="l_name" name="user[l_name]" id="user_l_name" class="form-input w-full block" />
</div>
</div>
<div class="w-full mb-4">
<label for="user_email" class="label headerFont">Email Address</label>
<input type="email" v-model="email" name="user[email]" id="user_email" class="form-input w-full block" />
</div>
<div class="flex flex-wrap w-full mb-4">
<div class="w-full lg:w-1/2">
<label for="user_password" class="label headerFont">Password</label>
<input type="password" v-model="password" name="user[password]" id="user_password" class="form-input w-full lg:w-11/12 block" />
</div>
<div class="w-full lg:w-1/2">
<label for="user_password_confirmation" class="label headerFont">Confirm Password</label>
<input type="password" v-model="password_confirmation" name="user[password_confirmation]" id="user_password_confirmation" class="form-input w-full block" />
</div>
</div>
<div class="flex w-full justify-center">
<button type="submit" class="p-3 bg-green-600 rounded headerFont text-white hover:bg-green-400">
Start My Trial
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Signup',
props:{
user: Object
},
data () {
return {
company_name: '',
f_name: '',
l_name: '',
email: '',
password: '',
password_confirmation: '',
error: ''
}
},
created () {
this.checkedSignedIn()
},
updated () {
this.checkedSignedIn()
},
methods: {
signup () {
this.$http.plain.post('/signup', { company_name: this.company_name, f_name: this.f_name, l_name: this.l_name, email: this.email, password: this.password, password_confirmation: this.password_confirmation })
.then(response => this.signupSuccessful(response))
.catch(error => this.signupFailed(error))
},
signupSuccessful (response) {
if (!response.data.csrf) {
this.signupFailed(response)
return
}
localStorage.csrf = response.data.scrf
localStorage.signedIn = true
this.error = ''
this.$router.replace('/dashboard')
},
signupFailed (error) {
this.error = (error.response && error.response.data && error.response.data.error) || 'Something Went Wrong'
delete localStorage.csrf
delete localStorage.signedIn
},
checkedSignedIn () {
if (localStorage.signedIn) {
this.$router.replace('/dashboard')
}
}
}
}
</script>
And just for good measures here is my routes configuration:
namespace :api do
namespace :v1 do
end
end
post 'refresh', controller: :refresh, action: :create
post 'signin', controller: :signin, action: :create
post 'signup', controller: :signup, action: :create
delete 'signin', controller: :signin, action: :destroy
Any assistance here would be very much appreciated! I am new to Vue and have not had alot of experience building out API's! thanks in advance and please let me know if any more information is required!
There is some error with your user_params due to which user is not being created and the control is passing down to else condition saying "status: :unprocessable_entity".
In order to fix it, run rails console:
RUN rails c
Copy your params that you have passed to rails api and try creating a user with those in the rails console. Or use binding.pry.
User.create(user_params)
This will highlight the errors in params. Hope this helps.
I have the following datetimepicker, which work well and pass the params to the controller. But I would like to make sure that the user cannot select a end date that is before the start date.
<div class="row">
<div class="col-md-2" style="text-align: right;">
</div>
<div class="col-md-3">
<div class="input-group date" id="datetimepicker4" data-target-input="nearest" style="margin-bottom: 20px">
<%= form.text_field(:start, class: "form-control datetimepicker-input", data: {target:"#datetimepicker4"}, placeholder: "#{t :From}") %>
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><span class="fas fa-calendar-alt"></span></div>
</div>
</div>
</div>
<div class="col-md-2 col-md-offset-1" style="text-align: right;">
</div>
<div class="col-md-3">
<div class="input-group date" id="datetimepicker5" data-target-input="nearest" style="margin-bottom: 20px">
<%= form.text_field(:end, class: "form-control datetimepicker-input", data: {target:"#datetimepicker5"}, placeholder: "#{t :End_time_or_until}") %>
<div class="input-group-append" data-target="#datetimepicker5" data-toggle="datetimepicker">
<div class="input-group-text"><span class="fas fa-calendar-alt"></span></div>
</div>
</div>
</div>
<div class="col-md-1" style="margin-bottom: 20px; text-align: right">
<%= form.button "#{t :Refresh}", class: "btn btn-primary" %>
</div>
</div>
I have the following scripts:
<script>
$(".end_at").change(function (e) {
end_at = $(e.target).val();
start_at = $(".start_at").val();
$.ajax({
type: "POST",
url: "index",
data: {
start_at: start_at,
end_at: end_at,
},
success: function (data) {
$(".chart-container").html(data);
},
});
});
$(function() {
$('#datetimepicker4').datetimepicker({
viewMode: 'days',
dropdownParent: $("#modal-window")
});
$('#datetimepicker5').datetimepicker({
viewMode: 'days',
useCurrent: false,
dropdownParent: $("#modal-window")
});
$('#datetimepicker4').on('dp.change', function (e) {
$('#datetimepicker5').data('DateTimePicker').minDate(e.date);})
$('#datetimepicker5').on('dp.change', function (e) {
$('#datetimepicker4').data('DateTimePicker').maxDate(e.date);
});
});
</script>
Anybody knows what is missing please ? It does look like the form is not connecting to the scripts.
datetimepicker once initiated won't change configurations , so i think on change of start_date datetimepicker you need to destroy end_date's datetimepicker and then reinitiate with the new configs, set minDate in initiation of the end_date datetimepicker.
What's going on? Everything actually worked fine when using the test keys but changing to live keys gives me this error, "Cannot charge a customer that has no active card".
My Charges Controller:
class ChargesController < ApplicationController
before_action :check_if_user_already_subscribed, only: [:new]
def new
end
def create
# Amount in cents
#amount = 100
# Create the charge on Stripe's servers - this will charge the user's card
begin
# Get the credit card details submitted by the form
customer = Stripe::Customer.create(
:email => params[:email],
:source => params[:stripeToken]
)
Stripe::Charge.create(
:amount => #amount,
:currency => 'usd',
:customer => customer.id,
:description => 'Example charge custom form'
)
current_user.subscribed = true
current_user.stripe_id = customer.id
current_user.expiry_date = Date.today + 90.days
current_user.save
flash[:success] = "Thank you for subscribing. Your account has been unlocked."
redirect_to root_path
rescue Stripe::CardError => e
flash[:danger] = e.message
redirect_to root_path
end
end
private
def check_if_user_already_subscribed
if current_user.subscribed
flash[:danger] = "You have already subscribed. Please wait until your subscription runs out to resubscribe."
redirect_to root_path
end
end
end
My new.html.erb:
<script type="text/javascript">
Stripe.setPublishableKey("pk_live_Jl8l7PukeQeOkuSn8HqVT96G");
</script>
<%= form_tag charges_path, id: 'payment-form' do %>
<div class = 'charge-form'>
<span class="payment-errors"></span>
<div class="form-group">
<label>
<input value="<%= current_user.email if current_user %>" type="hidden" data-stripe="email" >
</label>
</div>
<div class="form-group">
<label>
<span>Full name</span><span class = 'small-text'> (e.g. John Smith)</span>
<input type="text" size="5" data-stripe="name" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Country</span><span class = 'small-text'> (e.g. United States)</span>
<input type="text" size="10" data-stripe="address_country" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Address</span>
<input type="text" size="10" data-stripe="address_line1" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Postal Code / Zip Code</span>
<input type="text" size="4" data-stripe="address_zip" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Card Number</span>
<input type="text" size="20" data-stripe="number" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Expiration (MM/YY)</span>
<input type="text" size="2" data-stripe="exp_month" class ='form-field-expiry'>
<span> / </span>
<input type="text" size="2" data-stripe="exp_year" class ='form-field-expiry'>
</label>
</div>
<div class="form-group">
<label>
<span>CVC</span>
<input type="text" size="3" data-stripe="cvc" class = 'form-field'>
</label>
</div>
<input type="submit" class="c-btn-submit-charge" value="Submit Payment">
</div>
<% end %>
<script>
$(function() {
var $form = $('#payment-form');
$form.submit(function(event) {
// Disable the submit button to prevent repeated clicks:
$form.find('.submit').prop('disabled', true);
// Request a token from Stripe:
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from being submitted:
return false;
});
});
function stripeResponseHandler(status, response) {
// Grab the form:
var $form = $('#payment-form');
if (response.error) { // Problem!
// Show the errors on the form:
$form.find('.payment-errors').text(response.error.message);
$form.find('.submit').prop('disabled', false); // Re-enable submission
} else { // Token was created!
// Get the token ID:
var token = response.id;
// Insert the token ID into the form so it gets submitted to the server:
$form.append($('<input type="hidden" name="stripeToken">').val(token));
// Submit the form:
$form.get(0).submit();
}
};
</script>
Anyone know what's up? I've been working at this for a few hours now but I'm not making any progress.
You are getting this error because stripe.js couldn't find the payment-form.
The solution is insted of
= form_tag charges_path, id: 'payment-form' do
You should do this:
= form_tag charges_path do
#payment-form
I'm getting this error during my stripe and rails integration and I can't figure out why.
My charges controller:
class ChargesController < ApplicationController
before_action :check_if_user_already_subscribed, only: [:new]
def new
end
def create
# Amount in cents
#amount = 100
# Create the charge on Stripe's servers - this will charge the user's card
begin
# Get the credit card details submitted by the form
customer = Stripe::Customer.create(
:email => params[:email],
:source => params[:stripeToken]
)
Stripe::Charge.create(
:amount => #amount,
:currency => 'usd',
:customer => customer.id,
:description => 'Example charge custom form'
)
current_user.subscribed = true
current_user.stripe_id = customer.id
current_user.expiry_date = Date.today + 90.days
current_user.save
flash[:success] = "Thank you for subscribing. Your account has been unlocked."
redirect_to root_path
rescue Stripe::CardError => e
flash[:danger] = e.message
redirect_to root_path
end
end
private
def check_if_user_already_subscribed
if current_user.subscribed
flash[:danger] = "You have already subscribed. Please wait until your subscription runs out to resubscribe."
redirect_to root_path
end
end
end
my initializer stripe.rb:
Rails.configuration.stripe = {
:publishable_key => ENV['PUBLISHABLE_KEY'],
:secret_key => ENV['SECRET_KEY']
}
Stripe.api_key = Rails.configuration.stripe[:secret_key]
I'm using figaro, so configuration.yml (I've replaced the actual key values):
PUBLISHABLE_KEY: "sk_test_key"
SECRET_KEY: "pk_test_key"
My view:
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
Stripe.setPublishableKey("pk_test_N9K3OPekS1Wi5zyyWtgcVLEe");
</script>
<div id= 'charges-new-promo'>
<div class = 'container-fluid'>
<div class = 'index-header'>
<h2 class ='text-center charge-title'>Upgrade Now.</h2>
<p class = ' text-center charge-sub-title'>Instantly unlock the entire site for 90 days.</p>
<p class = ' text center charge-stripe-title'><%= image_tag("stripe.png", :class => "stripe-img" ) %></p>
</div>
</div>
</div>
<div class = 'container'>
<div class = 'row'>
<div class = 'col-md-5 col-sm-12'>
<%= form_tag charges_path, id: 'payment-form' do %>
<div class = 'charge-form'>
<span class="payment-errors"></span>
<div class="form-group">
<label>
<input value="<%= current_user.email if current_user %>" type="hidden" data-stripe="email" >
</label>
</div>
<div class="form-group">
<label>
<span>Full name</span><span class = 'small-text'> (e.g. John Smith)</span>
<input type="text" size="5" data-stripe="name" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Country</span><span class = 'small-text'> (e.g. United States)</span>
<input type="text" size="10" data-stripe="address_country" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Address</span>
<input type="text" size="10" data-stripe="address_line1" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Postal Code / Zip Code</span>
<input type="text" size="4" data-stripe="address_zip" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Card Number</span>
<input type="text" size="20" data-stripe="number" class = 'form-field'>
</label>
</div>
<div class="form-group">
<label>
<span>Expiration (MM/YY)</span>
<input type="text" size="2" data-stripe="exp_month" class ='form-field-expiry'>
<span> / </span>
<input type="text" size="2" data-stripe="exp_year" class ='form-field-expiry'>
</label>
</div>
<div class="form-group">
<label>
<span>CVC</span>
<input type="text" size="3" data-stripe="cvc" class = 'form-field'>
</label>
</div>
<input type="submit" class="c-btn-submit-charge" value="Submit Payment">
</div>
<% end %>
</div>
<div class ='col-md-4 col-sm-12'>
<div class = 'payment-box'>
<p> Information about your order:</p>
<ul>
<li>You are subscribing to the full membership.</li>
<li>This subscription lasts for 3 months (90 days).</li>
<li>Do not subscribe again if you are already subscribed and your expiry date has not been passed.</li>
<li>Subscribing grants you access to every test and practice material on this website.</li>
<li>At the moment, this consists of 19 online DAT reading comprehension tests along with answer explanations.</li>
<li>Any additional premium material added (such as more tests or more DAT sections) after you subscribe will be automatically available to you with
no extra charge.</li>
</ul>
<div class = 'inner-box'>
<p class = 'text-center'> Total cost: $20 </p>
</div>
<div class ='inner-box-payment'>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
var $form = $('#payment-form');
$form.submit(function(event) {
// Disable the submit button to prevent repeated clicks:
$form.find('.submit').prop('disabled', true);
// Request a token from Stripe:
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from being submitted:
return false;
});
});
function stripeResponseHandler(status, response) {
// Grab the form:
var $form = $('#payment-form');
if (response.error) { // Problem!
// Show the errors on the form:
$form.find('.payment-errors').text(response.error.message);
$form.find('.submit').prop('disabled', false); // Re-enable submission
} else { // Token was created!
// Get the token ID:
var token = response.id;
// Insert the token ID into the form so it gets submitted to the server:
$form.append($('<input type="hidden" name="stripeToken">').val(token));
// Submit the form:
$form.get(0).submit();
}
};
</script>
And that's it. I'm completely lost right now. What went wrong?
I'm using figaro, so configuration.yml (I've replaced the actual key
values):
PUBLISHABLE_KEY: "sk_test_key"
SECRET_KEY: "pk_test_key"
You incorrectly set the key values.
Was:
PUBLISHABLE_KEY: "sk_test_key"
SECRET_KEY: "pk_test_key"
Must:
PUBLISHABLE_KEY: "pk_test_key"
SECRET_KEY: "sk_test_key"
P.s "sk_test_key" - sk -> secret_key
Did you change your keys values?
Looks like this answer should solve your problem.
So in your yml you should have:
PUBLISHABLE_KEY: "pk_test_key"
SECRET_KEY: "sk_test_key"
Pk_key refers to the publishable key, while sk_key refers to the secret key.
I am using acts_as_votable on my rails 4 app.
I have it set up so upvotes/downvotes are take via an ajax request. I would like to implement a prompt, or a confirmation with a text box inside of it, so when a user downvotes an article a popup is displayed and they can input their reason for downvoting it.
I am having trouble finding any sort of documentation on doing so. Does anyone have any recommendations?
Here is my current controller code:
def upvote
#article = Article.find(params[:article_id])
#subarticle = #article.subarticles.find(params[:id])
session[:voting_id] = request.remote_ip
voter = Session.find_or_create_by(ip: session[:voting_id])
voter.likes #subarticle
respond_to do |format|
format.html {redirect_to :back }
format.json { render json: { count: #subarticle.get_upvotes.size } }
end
end
def downvote
#article = Article.find(params[:article_id])
#subarticle = #article.subarticles.find(params[:id])
session[:voting_id] = request.remote_ip
voter = Session.find_or_create_by(ip: session[:voting_id])
voter.dislikes #subarticle
respond_to do |format|
format.html {redirect_to :back }
format.json { render json: { count: #subarticle.get_downvotes.size } }
end
end
and inside of the view:
<%= link_to like_article_subarticle_path(#article, #subarticle), class: "voteup", method: :put, remote: true, data: { type: :json } do %>
<button type="button" class="btn btn-success btn-lg" aria-label="Left Align" style="margin-right:5px">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Helpful
</button><div class="badge" style="margin-right:10px"><%= #subarticle.get_upvotes.size %></div>
<% end %>
<script>
$('.voteup')
.on('ajax:send', function () { $(this).addClass('loading'); })
.on('ajax:complete', function () { $(this).removeClass('loading'); })
.on('ajax:error', function () { $(this).after('<div class="error">There was an issue.</div>'); })
.on('ajax:success', function(e, data, status, xhr) { $(this).find("div").text("+1"); });
</script>
<%= link_to dislike_article_subarticle_path(#article, #subarticle), class: "votedown", method: :put, remote: true, data: { type: :json } do %>
<button type="button" class="btn btn-danger btn-lg" aria-label="Left Align" style="margin-right:5px">
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Unhelpful
</button><div class="badge"><%= #subarticle.get_downvotes.size %></div>
<% end %>
<script>
$('.votedown')
.on('ajax:send', function () { $(this).addClass('loading'); })
.on('ajax:complete', function () { $(this).removeClass('loading'); })
.on('ajax:error', function () { $(this).after('<div class="error">There was an issue.</div>'); })
.on('ajax:success', function(e, data, status, xhr) { $(this).find("div").text("-1"); });
</script>
Thank you for any help. Been trying to find a way to do this for a while now.
As you want it as a pop-up, your best bet would be triggering a modal upon clicking the link_to
<%= link_to dislike_article_subarticle_path(#article, #subarticle), class: "votedown", method: :put, remote: true, data: { type: :json, toggle: "modal", target: "#my-modal" } do %>
<button type="button" class="btn btn-danger btn-lg" aria-label="Left Align" style="margin-right:5px">
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span>
Unhelpful
</button>
<div class="badge"><%= #subarticle.get_downvotes.size %></div>
<% end %>
And include a form containing a text_field/text_area for the user to include a reason for downvoting.
<div class="modal hide fade" id="my-modal" title="My modal">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Modal Body
#your form goes here
</div>
<div class="modal-footer">
<button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
If you don't like the approach, you can also use fadeIn/fadeOut or hide/show to display the form containing a text_field/text_area but you won't get that pop-up effect with those.