Question

我在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

我在页面脚本中：

<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>

此页面是部分嵌套在另一个部分中的部分。还有一种观点认为，在使用Google Places API的该函数之前，有一部分是局部的，但是在改变之前（不确定是什么），我俩都可以正常工作，并且我说在该函数上得到$ 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)
        {
          // Allways 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 
  }


});

任何有关如何解决此问题的指针将不胜感激。

Answer 1

正如罗克韦尔所指出的，这里的问题与脚本的位置有关。将它们移到标头，以便它们在相关脚本解决此问题之前加载。

ReferenceError：未定义$-以前可以正常工作，但现在坏了-Rails 5

1 个答案: