Я получаю ошибку ссылки $ undefined для функции в теге скрипта в HTML-документе.Тем не менее, код внутри него все еще выполняется, он просто не показывает его в модале для извлечения полосы, как он должен (он идет на свою собственную страницу).
Я смотрел сообщения на другихответы и мои ресурсы загружены правильно.Я не изменил порядок js ниже с момента, когда он работал до сих пор.Единственное, что я изменил, - это расположение некоторых тегов для частей, отображаемых на этой странице.К сожалению, я не фиксировал свои изменения весь день, поэтому я не могу просто откатить изменения.
Вот мои настройки:
stack.js (файл js моего макета):
//= require jquery
//= require popper
//= require rails-ujs
//= require bootstrap
//= require stack/vendors/vendors.min
//= require stack/vendors/charts/raphael-min
//= require stack/vendors/charts/chart.min
//= require stack/vendors/charts/jquery.sparkline.min
//= require stack/vendors/extensions/unslider-min
//= require stack/vendors/extensions/wNumb
//= require stack/vendors/extensions/nouislider.min
//= require stack/vendors/extensions/jquery.steps.min
//= require stack/vendors/timeline/horizontal-timeline
//= require stack/core/app-menu
//= require stack/core/app
//= require stack/scripts/pages/dashboard-ecommerce
//= require_tree ./common
сценарий my in page:
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
$(function () {
var handler = StripeCheckout.configure({
key: "<%= Rails.configuration.stripe[:publishable_key] %>",
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
currency: "<%= @plan.currency %>",
token: function(token) {
var my_form = $('#stripe-form');
console.log(my_form);
var url = my_form.attr('action');
console.log(url);
var form_data = my_form.serialize();
console.log(form_data);
var submission = $.post(url, form_data + "&stripeToken="+ token.id);
//$.post(url, token + submission);
submission.success(function(result) {
document.getElementById('subscribed').value = 1;
$("#steps-uid-0-t-2").click();
console.log("success" + result);
});
submission.error(function() {
alert("ajax error");
});
//You can access the token ID with `token.id`.
//Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
email: "<%=current_user.email%>",
zipCode: true,
amount: <%= @plan.price_cents %>
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
});
</script>
Частично, где существует сценарий:
<h6><i class="step-icon fa fa-credit-card"></i></h6>
<fieldset>
<div class="row">
<button id="customButton">Subscribe</button>
<%= form_tag('/subscription_checkout', {method: :post, id:"stripe-form"}) do %>
<input name="subscribed" id="subscribed" type="hidden" value= false></input>
<input name="id" type="hidden" value= "<%= @plan.pg_plan_id %>"></input>
<input name="property_id" type="hidden" id="property_id" value= ""></input>
<% end %>
</div>
</fieldset>
Эта страница является частью, вложенной в другую часть.Существует еще одно частичное представление перед этим, в котором используется API мест Google, однако оба работали нормально, пока что-то не изменилось (не знаю, что), и я заявил, что получил ошибку $ undefined для этой функции.Весь код в этой функции по-прежнему выполняется просто отлично.
Файл Javascript для этого контроллера:
$( document ).ready(function() {
var property_id;
if (page.controller() == 'properties')
{ if ($(".icons-tab-steps" != 'undefined') )
{
// Wizard tabs with icons setup
$(".icons-tab-steps").steps({
headerTag: "h6",
bodyTag: "fieldset",
useURLhash: true,
showStepURLhash: true,
transitionEffect: "fade",
titleTemplate: '<span class="step">#title#</span>Step#index#',
labels: {
finish: 'Submit'
},
onStepChanging: function (event, currentIndex, newIndex)
{
// Always allow previous action even if the current form is not valid!
if (currentIndex > newIndex)
{
return true;
}
if (currentIndex < newIndex)
{
console.log(event);
console.log(currentIndex);
console.log('property_id' + property_id);
var form_id = "#form-step" + currentIndex;
console.log('Form ID:' + form_id);
var my_form = $(form_id);
console.log(my_form);
var url = $(form_id).attr('action');
console.log(url);
var form_data = my_form.serialize();
var submission = $.post(url, form_data);
if (currentIndex == 0) ///property form
{
submission.success(function(result) {
console.log(result);
property_id = result.property_id;
alert("ajax success property_id:" + result.property_id);
//$('#shopResultsContainer').html(result.ViewMarkup);
console.log('Property ID after post: ' + property_id);
document.getElementById('property_id').value = property_id;
console.log('Property ID field' + document.getElementById('property_id').value);
return true
});
submission.error(function() {
alert("ajax error");
return true
});
}
if (currentIndex == 1) ///Stripe Payment form
{
if (document.getElementById('subscribed').value == 1)
{
return true
}
else {
var skip = confirm("You have not subscribed to a data plan yet. Do you wish to continue?");
return skip;
}
}
}
return true
},
onFinishing: function (event, currentIndex)
{
return true
},
onFinished: function (event, currentIndex)
{
alert("Submitted!");
}
});
//if statement for existence of tag
}
////END IF STATEMENT BELOW
}
});
Любые указатели о том, как это исправить, будут высоко оценены.