个人中心
gpt4 book ai didi

JQuery 在表单提交时中断

转载 作者：行者123 更新时间：2023-12-01 04:34:57 25 4
gpt4 key购买 nike

我正在尝试创建一个基本的电子邮件注册表单，该表单在成功保存电子邮件后显示引导模式。为了简单起见，我没有通过 AJAX 执行此操作(即我正在重新加载页面)。问题是，成功重定向后，我在控制台中收到以下错误:

readyException.js:6 Uncaught TypeError: $(...).modal is not a function
    at HTMLDocument.<anonymous> (<anonymous>:3:34)
    at mightThrow (deferred.js:97)
    at process (deferred.js:139)

这是它提示的简单脚本，位于 index.html.erb :

$(document).ready(function(){
  $('#successModal').modal("show");
});

JQuery 最初肯定正在加载/工作，因为我有另一个 JQuery 片段 - 通过 Slick 的轮播(请参阅 jquery-slick-rails ) - 它首先工作，但然后在重新加载时中断。这是该脚本，位于 application.js :

$( document ).ready(function() {
    $('#carousel').slick({
        vertical: true,
        autoplay: true,
        autoplaySpeed: 2000,
        speed: 300
    });
});

我注意到的一件事是，重新加载时<head>文件以不同的顺序加载。我在其他地方读到 JQuery 必须在 Bootstrap 之前加载，所以我想知道这是否是问题的一部分。

这是之前的: enter image description here

这是之后: enter image description here

编辑1:

现在，我已添加 JS 来直接调用模式到我的 index.html.erb 中文件。这是它，以及表格的条纹版本:

<%= form_with scope: :subscriber, url: "/subscribe", method: 'post' do |f| %>
    <%= f.text_field :email, class: "form-control form-text" %>
    <%= f.submit "Subscribe", class: "btn btn-lg btn-outline-success btn-styling form-text width-100"%>

    <% if params[:subscribed] %> /* Note: This gets passed back if 'subscribe' is successful' */
        <%= render "success-modal" %>
        <script>
            $(document).ready(function(){
                $('#successModal').modal("show");
            });
        </script>
    <% end %>

<% end %>

这是_success_modal.html.erb我试图渲染的部分:

<div class="modal" id="successModal" tabindex="-1"  role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body text-center mx-auto">
        <div class="row justify-content-center mt-3">
          <i class="far fa-check-circle fa-2x green"></i>
          <p class="my-3">You're on the list!</p>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

编辑2:

我将脚本从我的 View 移至 application.js.erb ，但模态仍然没有显示。我是否应该尝试使用其他逻辑来(a)用模态渲染部分，以及(b)显示模态？

$(document).on('turbolinks:load', function() {
    $('#carousel').slick({
        vertical: true,
        autoplay: true,
        autoplaySpeed: 2000,
        speed: 300
    });

    <% if params[:subscribed] %>
        <%= render "success-modal" %>
        $('#successModal').modal("show");
    <% end %>
});

我的index.html.erb中的这个片段 View 由上面的 JQuery Slick 代码片段控制，每次我重定向时它都会中断。

<div class="text-center" id="heading-text">
    <h1><b>Static header</b> of
        <span id=carousel>
            <span>Rotating header 1</span>
            <span>Rotating header 2</span>
            <span>Rotating header 3</span>
        </span>
    </h1>
</div>

这是我的 Pages 的精简版 Controller ，以防万一:

def subscribe
  redirect_to root_path(subscribed: :true)
end

编辑3:

在此处添加了存储库的精简版本:https://github.com/sp1ns1r/jquery-test .

编辑4:

进行@BenTrewern建议的更改后，我现在遇到以下问题:

Webpacker can't find application in /Users/user/thepursuit/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "entrypoints": {
    "src/style": {
      "js": [
        "/packs/js/src/style-cb7dd812ab53ccfcc3e1.js"
      ],
      "js.map": [
        "/packs/js/src/style-cb7dd812ab53ccfcc3e1.js.map"
      ]
    }
  },
  "src/style.js": "/packs/js/src/style-cb7dd812ab53ccfcc3e1.js",
  "src/style.js.map": "/packs/js/src/style-cb7dd812ab53ccfcc3e1.js.map"
}

它在我的 <head> 中提示这一点:<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

最佳答案

在您的 _head.html.erb 部分中，您有:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css' %>
<%= stylesheet_link_tag 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css' %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>

所以你的 slick-carousel 是在你的 javascript 包之后加载的。

您最好将 slick-carousel 添加到您的包中:

yarn add slick-carousel

并在您的 application.js.erb 中要求它:

...
require("channels")
require("slick-carousel")

然后你需要将你的 css 添加到你的包中。我为获得类似的工作所做的工作如下:

添加 app/javascript/packs/src/application.scss 文件:

@import '~slick-carousel/slick/slick';
@import '~slick-carousel/slick/slick-theme';

然后将 scss 文件导入到 application.js.erb 文件中:

import './src/application.scss';

然后从 _head.html.erb 部分中删除 slick-carousel 引用。

关于JQuery 在表单提交时中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59404291/

25 4 0
文章推荐： python - 使用 BeautifulSoup 更新 HTML 文件
文章推荐： python - 使用 Flask-Uploads 拒绝超过一定数量的文件？
文章推荐： python - 在 python 中我应该使用 try 还是 If ，为什么？
文章推荐： Python正则表达式报告字符串存在的行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com