In my website recaptcha disappears after second click in sign up button or home button in top navbar. User can signup without verification. How to solve it.
<h2>Create Blog</h2>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), class: "form-horizontal" ) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :username, required: true, autofocus: true, hint: 'no special characters, no numbers only letters [a-z]' %>
<%= f.input :password, required: true, hint: ("#{#minimum_password_length} characters minimum" if #minimum_password_length) %>
<%= f.input :password_confirmation, required: true %>
<div id="g-recaptcha" class="g-recaptcha" data-sitekey="6LcOGEgUAAAAAOxXmBxxxxxxxx"></div>
</div>
<div class="form-actions">
<%= f.button :submit, "Create Blog", data: { disable_with: "This may take upto 2 minutes... "} %>
</div>
<% end %>
<%= render "devise/shared/links" %>
<script>
var captcha_interval;
var myCallback=function(){
document.getElementsByName('commit')[0].disabled=false;
};
var onloadCallback = function() {
document.getElementsByName('commit')[0].disabled=true;
grecaptcha.render(
document.getElementById('g-recaptcha'),
{
callback: myCallback,
sitekey: "6LcOGEgUAAAAAOxXmBVgxxxxxx"
});
};
</script>
<html>
<head>
<title>reCAPTCHA demo: Explicit render for multiple widgets</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var onloadCallback = function() {
grecaptcha.render('example3', {
'sitekey' : '6LcOGEgUAAAAAOxXmBVgxxxxxx',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<form action="?" method="POST">
<div id="example3"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
As per reference google-captcha, you are missing the
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
after the form.
Please try adding after form and let me know
Related
I have a table "fundings" in which there is a field "status", for which i have a select field in the form. The options for this select field are ["approved", "declined", "pending"]. What i want is when "declined" is selected, a further text box shows to explain the reason for decline. Please help how can this be done.
<%= form_for([#parent, #child, #funding], :html => {class: "form-horizontal",role: "form"}) do |form| %>
<div class = "form-group">
<div class="control-label col-sm-2">
<%= form.label :status %>
</div>
<% if current_user.admin? %>
<div class="col-sm-8">
<%= form.select :status,['Pending', 'Approved', 'Declined'], class: "form-control" %>
</div>
<% else %>
<!-- Disabled for non-admin users -->
<% end %>
</div>
<!-- Submit button here -->
<% end %>
Update
<div class="form-group">
<%= "Status" %>
<%= form.select :status, ['Pending', 'Approved', 'Declined'], {}, id: "sample-status-select", class: "form-control" %>
</div>
<div class="form-group">
<%= "Decline Reason" %>
<%= form.text_area :decline_reason, class: "form-control hidden", id: "decline-reason-textarea" %>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<%= form.submit "Apply", class: 'btn btn-primary btn-lg' %>
</div>
</div>
</div>
</div>
<% end %>
<script type="text/javascript">
<plain>
$(function() {
$("#sample-status-select").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Declined') {
$("#decline-reason-textarea").removeClass("hidden");
} else {
$("#decline-reason-textarea").addClass("hidden");
$("#decline-reason-textarea").val("");
}
});
});
</plain>
</script>
$(function() {
$("#sample-status-select").on("change", function() {
var select_val = $(this).val(); // this gets the value of the dropdown menu
console.log(select_val); // this just displays the selected value in the browser console (if you have the browser console open)
if (select_val === 'Declined') {
// if the 'Declined' option is chosen
// we remove the 'hidden' class from the textarea
$("#decline-reason-textarea").removeClass("hidden");
} else {
// if any other option is chosen
// we put back the 'hidden' class to the textarea
// also, we update the textarea value to BLANK (this part is optional, it depends if you want to keep the value of the textarea)
$("#decline-reason-textarea").addClass("hidden");
$("#decline-reason-textarea").val("");
}
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://httpbin.org/post" method="post">
Status
<select id="sample-status-select">
<option value="Pending">Pending</option>
<option value="Approved">Approved</option>
<option value="Declined">Declined</option>
</select>
<br>
<br> Decline Reason
<textarea id="decline-reason-textarea" class="hidden">
</textarea>
</form>
Check this snippet I made. It should work for you as well.
This is a basic html form so this works even without ruby on rails.
After you get the gist of this, you should be able to port for it to work with your rails app.
<script type="text/javascript">
$(function() {
$("#sample-status-select").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === "Declined") {
$("#decline-reason-textarea").removeClass("hidden");
} else {
$("#decline-reason-textarea").addClass("hidden");
$("#decline-reason-textarea").val("");
}
});
});
</script>
I can not get rid of this error, and its to the point where i just started adding sources to the header hoping something would work. What could possibly be causing these errors? this is a form helper in rails.
Uncaught ReferenceError: jQuery is not defined
at select2.self-3d0dca634dc5f4aee8c2dddef05674d9a674214500fd7e89959dc9e7251bb717.js:18
at select2.self-3d0dca634dc5f4aee8c2dddef05674d9a674214500fd7e89959dc9e7251bb717.js:20
reports.self-125a9126dcda5f55eea80b80380e4bf42b79fb01ceba6fbb8c52674b3952fca7.js:2 Uncaught TypeError: $(...).select2 is not a function
at reports.self-125a9126dcda5f55eea80b80380e4bf42b79fb01ceba6fbb8c52674b3952fca7.js:2
at reports.self-125a9126dcda5f55eea80b80380e4bf42b79fb01ceba6fbb8c52674b3952fca7.js:4
reports:59 Uncaught SyntaxError: missing ) after argument list
application.self-a24973bbb6a25a64ef1e551cdacacf83cdc7ddd8e2ea49e5c4df1e07a115c569.js?body=1:24 Uncaught TypeError: $(...).select2 is not a function
at HTMLDocument. (application.self-a24973bbb6a25a64ef1e551cdacacf83cdc7ddd8e2ea49e5c4df1e07a115c569.js?body=1:24)
at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233)
at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363)
at Function.ready (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3583)
at HTMLDocument.completed (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3618)
<header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</header>
<h1>Partner Scorecard Generator</h1>
<%= form_for(:report) do |f| -%>
<p>
<%=f.label "Run date" %><br>
<%=f.date_field :run_date %><br>
</p>
<p>
<script type = "text/javascript">
$(document).ready(function() {
console.log("setting up select 2");
$("#selecttwo").select2({
placeholder: "Select your Partners",
ajax: {
url: 'http://services.dwmholdings.com/order.svcs/api/partners',
dataType: 'json',
type: 'post',
processResults: function p(data){
console.log(processresults())
var mapped = $.map(data, funtion (obj){
obj.text = obj.text || obj.name;
obj.id = obj.id || obj.salesId;
console.log(mapped);
return obj;
})
return {
results: mapped
}
}
}
});
});
console.log("hello")
</script>
<%= select_tag :sales_ids %>
</p>
<p>
<%= f.label "Yes send Email" %>
<%= f.radio_button :send_email, "True" %><br>
<%= f.label "Do not Email" %>
<%= f.radio_button :send_email, "False" %>
</p>
<p>
<%= f.label "recipients" %>
<%= f.email_field(:recipients) %>
</p>
<p>
<%= f.label "bcc" %>
<%= f.email_field(:bcc)%>
</p>
<p>
<%= f.radio_button :Send_Email, "True" %>
<%= f.label :Debug, "Debug on" %><br>
<%= f.radio_button :Send_Email, "False" %>
<%= f.label :Debug, "Debug off" %>
</p>
<p>
<%=f.submit %>
</p>
<!-- :class => "selecttwo",
:multiple=>true,
:size =>20,
:id => "selecttwo" -->
<% end %>
You are loading jquery.min.js as well as jquery.js. Try removing one of those two. This error occurs if sister or same javascripts are getting loaded on same page.
$("#foo").select2()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<div id="foo"></div>
Trying using https instead of http in your script src. Seems to work in this simplified example.
So I have been having an interesting time trying to get Stripe up and running in my app, currently the problem is that a payment token is not being generated for transactions. When I try to process a test payment I get this error: Must provide source or customer.
Inside of console I get this error: Uncaught ReferenceError: Stripe is not defined
I think the problem is that the <script type="text/javascript" src="https://js.stripe.com/v2/"></script> file is not being read, as it is what should be giving me my token. I have been at this for quite some time, and have read everything I could get my hands on online, but haven't found a solution that works for me yet. It is probably something small, and any help is really really appreciated.
Here is my controller:
require "stripe"
class ChargesController < ApplicationController
def new
#project = Project.find(params[:project_id])
end
def create
binding.pry
#project = Project.find(params[:project_id])
Stripe.api_key = "sk_test_JlKC4V7nmCQ0sE4iNAVyoAxA"
#Get the credit card details submitted by the form
token = params[:stripeToken]
# Amount in cents, this is being read and recorded in stripe dashboard
amount = (params[:amount].to_f * 100).to_i
charge = Stripe::Charge.create(
:amount => amount,
:source => token,
:description => 'Rails Stripe customer',
:currency => 'usd'
)
rescue Stripe::CardError => e
flash[:error] = e.message
#save what we need for our server as a new payment
binding.pry
#payment = Payment.create({
user_id: current_user.id,
project_id: #project.id,
amount: #amount,
comments: params[:comments]
})
#make a function in payments model that will convert the cents back into dollars
#project.addMoney(#amount) #add it to project
#payment.save
end
private
def charges_params
params.require(:payment).permit(:comments, :user_id, :project_id, :amount)
end
end
I am not creating a customer, as I was explicitly told by Stripe support via email, that I need not if I am only processing one-time payments, which I am. Here is the payment form, which includes the Javascript in the head (as per Stripe's example):
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
// The required Stripe lib
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script>
Stripe.setPublishableKey('<%= ENV['SECRET_KEY'] %>');
function stripeResponseHandler(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// response contains id and card, which contains additional card details
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and submit
$form.get(0).submit();
}
}
$('#payment-form').submit(function(event) {
var $form = $(this);
alert('you clicked submit');
console.log('this function was hit');
// Disable the submit button to prevent repeated clicks
$form.find('submit').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
</script>
</head>
<!-- form -->
<div class="container">
<div class="row Row one">
<div class="col-sm-12 col-md-10">
<h1>Make your contribution</h1>
<%= form_for #project, url: project_charges_path, :html => {:id => "payment-form"}, method: 'post' do |f| %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<%= f.hidden_field :#project_id, :value => #project.id %>
<div class= "field">
<%= label_tag :card_number, "Credit Card Number" %><br>
<%= text_field_tag :card_number, nil, name: nil, class: 'form-control', :required => true %><br>
</div>
<div class= "field">
<%= label_tag :card_code, "Security Code (cvc)" %><br>
<%= text_field_tag :card_code, nil, name: nil, class: 'form-control', :required => true %><br>
</div>
<div class= "field">
<%= label_tag :card_month, "Expiration" %>
<%= select_month nil, {add_month_numbers: true}, {name: nil, id: "card_month"} %>
<%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, id: "card_year"}%>
</div>
<div class= "field">
<%= label_tag :amount, "Amount" %><br>
<%= text_field_tag :amount, nil, name: nil, class: 'form-control', :required => true %>
</div>
<div class= "field">
<%= label_tag :comments, "Add a comment?" %><br>
<%= text_area_tag :comments, nil, name: nil, class: 'form-control', :required => true %>
</div>
<div class= "actions">
<%= f.submit 'Submit', :class => 'contribution-submit' %>
</div>
<div id="stripe_error">
<noscript>JavaScript is not enabled and is required for this form. First enable it in your web browser settings.</noscript>
</div>
<% end %>
</div>
</div>
<!-- <div class="row"></div> -->
</div>
Another thing I find odd that may be worth mentioning in case it is indicative of what the problem may be - the files in this view folder (where the form lives) are not picking up any of the sites css which is provided in the application.html.erb. That is why I had to manually include it in the head of the form's html.erb, as well as include the js.stripe.com file. The css is now rendering, but this file does not seem to be doing anything.
not sure what did it exactly, but went back and copied Stripes code again and it now works. My form now looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Contribution Form</title>
<!-- The required Stripe lib -->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- jQuery is used only for this example; it isn't required to use Stripe -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('<%= 'pk_test_KfCg1YmVXwBYyEdPEWnfibF8'%>');
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and re-submit
$form.get(0).submit();
}
};
jQuery(function($) {
$('#payment-form').submit(function(e) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.card.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()}, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
</script>
</head>
<body>
<!-- form -->
<div class="container">
<div class="row Row one">
<div class="col-sm-12 col-md-10">
<h1>Make your contribution</h1>
<%= form_for #project, url: project_charges_path, :html => {:id => "payment-form"}, method: 'post' do |f| %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<%= f.hidden_field :#project_id, :value => #project.id %>
<div class= "field">
<%= label_tag :card_number, "Credit Card Number" %><br>
<%= text_field_tag :card_number, nil, name: nil, class: ' card-number form-control', :required => true %><br>
</div>
<div class= "field">
<%= label_tag :card_code, "Security Code (cvc)" %><br>
<%= text_field_tag :card_code, nil, name: nil, class: 'card-cvc form-control', :required => true %><br>
</div>
<div class= "field">
<%= label_tag :card_month, "Expiration" %>
<%= select_month nil, {add_month_numbers: true}, {name: nil, class: "card-expiry-month"} %>
<%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, class: "card-expiry-year"}%>
</div>
<div class= "field">
<%= label_tag :amount, "Amount" %><br>
<%= text_field_tag :amount %>
</div>
<div class= "field">
<%= label_tag :comments, "Add a comment?" %><br>
<%= text_area_tag :comments %>
</div>
<div class= "actions">
<%= f.submit 'Submit', :class => 'contribution-submit' %>
</div>
<div id="stripe_error">
<noscript>JavaScript is not enabled and is required for this form. First enable it in your web browser settings.</noscript>
</div>
<% end %>
</div>
</div>
<!-- <div class="row"></div> -->
</div>
</body>
</html>
I'm creating a form_for that basically lets the user mark when it has completed a video. I'm nesting this form inside a jQuery tabs and want to have one checkbox on each tab, and so far I got that. However the functionality is the one that is failing: Only the checkbox on the first tab actually changes the value when it is submitted. Any ideas on how to fix this?
<% for i in 1..#statement %>
<div id="htab-current-<%= i %>">
<%= form_for #user.workouts.where(week_num: #week).where(video_num_in_week: i).first.assignedworkouts.first, remote:true ,:html=>{:id=>'completed_form'} do |f| %>
<%= f.check_box :completed, :onclick => "$('#completed_form').submit()" %>
<% end %>
<div class='videowrapper2'>
<div id="myElement<%= i %>">Loading the player ...</div>
<script type="text/javascript">
jwplayer("myElement<%= i %>").setup({
skin: 'five',
width: "100%",
aspectratio: "4:3",
listbar: {
position: 'bottom',
},
playlist: '<%=asset_path(#user.workouts.where(week_num: #week).where(video_num_in_week: i).first.playlist_file ) %>'
});
</script>
</div>
</div>
EDIT: I tried brute forcing it and actually it was an issue of the id on the form being the same. However when I changed it to be generated dynamically even though the ids on the form and the jQuery call are the same, they don't seem to be working.
<% for i in 1..#statement %>
<div id="htab-current-<%= i %>">
<%= form_for #user.workouts.where(week_num: #week).where(video_num_in_week: i).first.assignedworkouts.first, remote:true ,:html=>{:id=>"#{i}completed_form'"} do |f| %>
<%= f.check_box :completed, :onclick => "$('#{i}completed_form').submit()" %>
<% end %>
<div class='videowrapper2'>
<div id="myElement<%= i %>">Loading the player ...</div>
<script type="text/javascript">
jwplayer("myElement<%= i %>").setup({
skin: 'five',
width: "100%",
aspectratio: "4:3",
listbar: {
position: 'bottom',
},
playlist: '<%=asset_path(#user.workouts.where(week_num: #week).where(video_num_in_week: i).first.playlist_file ) %>'
});
</script>
</div>
</div>
Try with:
<% for i in 1..#statement %>
<div id="htab-current-<%= i %>">
<%= form_for #user.workouts.where(week_num: #week).where(video_num_in_week: i).first.assignedworkouts.first, remote:true ,:html=>{:id=>'completed_form'} do |f| %>
<%= f.check_box :completed, :onclick => "$('#completed_form').submit()" %>
<div class="videowrapper2">
<div id="myElement<%= i %>">Loading the player ...</div>
<script type="text/javascript">
jwplayer("myElement<%= i %>").setup({
skin: 'five',
width: "100%",
aspectratio: "4:3",
listbar: {
position: 'bottom',
},
playlist: '<%=asset_path(#user.workouts.where(week_num: #week).where(video_num_in_week: i).first.playlist_file ) %>'
});
</script>
</div>
</div>
<% end %>
I have following code in a new.html.erb page.
<h3>Create Make Payment </h3>
<%= simple_form_for(#payment) do |f| %> <%= f.error_notification %> <div class="form-inputs">
<%= f.input :email, collection:#arr,:required=>true,:id=>"payment_email" ,:class=>"chosen-select"%> </div> <div class="form-inputs">
<%= f.hidden_field :user_id,:value=>User.find_by_email(ar).id,:id=>"user_id" %> </div> <div class="form-inputs">
<%= f.input :amount,:required=>true%> </div>
<div class="form-inputs">
<%= f.input :desc, as: :text ,:required=>true%> </div>
<div class="form-actions">
<%= f.button :submit %> </div> <% end %>
On chage in the payment_email select box I want a ajax request to take place. I have done the following.
Added respond_to do |format| format.js in the create action in payments controller.
I have written the following in a js file.
jQuery.ajaxSetup({
'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})
jQuery.fn.submitWithAjax = function() {
this.onChange(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
})
return this;
};
$(document).ready(function() {
$("#payment_email").submitWithAjax();
})
created a file called create.js.erb and entered the following in it.
$("#user_id").value("<%= escape_javascript(render(:partial => user_id)) %>");
I have created a partial _user_id.html.erb to print the value to be changed.
Now where I am stuck is that, I am not sure how to send the value of payment_email through ajax to create.js.erb where I will use it to get the required User id. How can I do this?
You can use jQuery Change event
$(document).ready(function() {
$( "#payment_email" ).change(function() {
$.ajax({
type: "POST",
url: "/controller/action",
data: { email: $( "#payment_email" ); }
});
});
});