将 SweetAlert2 添加到 update.js.erb答案

【问题标题】：Adding SweetAlert2 to update.js.erb将 SweetAlert2 添加到 update.js.erb
【发布时间】：2019-09-08 21:52:07
【问题描述】：

我一直在开发我的 rails 应用程序 - 我对 Rails 比较陌生，并试图熟悉 javascript。所以，我刚刚通过 Webpacker 添加了 SweetAlert2，它运行良好。我有一个通过 Javascript 提交的表单，它也可以工作。

这是我的控制器操作：

def update
    @user = @card.user
    day = Date.today
    if @card.update(card_params)
      respond_to do |format|
        format.js {}
    end
  end
end

因此，当执行此操作并提交表单时，我正在从我在 application.js 中导入的 index.js 文件中调用一个 JS 函数。

Index.js：

import swal from 'sweetalert2'
import Rails from '@rails/ujs'

$(function() {
    $('#vollkostForm').submit(function(){
            swal.fire({
                title: "Bestellung abgeschlossen!",
                text: "Die Mahlzeit wurde erfolgreich bestellt",
                type: "success"
            });
        $('#vollkostModal').modal('hide');
    });
});

这工作正常，警报正在显示。但是我想要实现的（因为这应该只在表单提交成功的情况下运行），是这个函数在对应的update.js.erb文件中，属于format.js {}块。

我尝试了所有方法，但不知道如何将此 SweetAlert 库导入 update.js.erb。

我总是收到“swal 未定义”的错误消息 - 如果我只使用类似 alert("Hello!") 之类的东西，这可以正常工作。

我只是无法使用或导入第三方插件来正常工作。

感谢您的建议！ :)

【问题讨论】：

标签： javascript ruby-on-rails ruby erb

【解决方案1】：

您的表单在哪个页面上？它在索引页面上吗？如果是这样，那么您的 JavaScript 代码将需要位于 index.js 而不是 update.js。在表单已经提交之后，您不能让您的 JavaScript 代码检查表单是否已提交。

这能回答你的问题吗？

【讨论】：

嘿，Index.js 只是我的 SweetAlert 等其他代码所在的文件。它位于 Javascript/packs 目录中，因此与我的操作无关。这个名字有点误导，对不起。在 update.js.erb 我只想调用 swal.fire 方法，然后 nur 它告诉我 swal 没有定义。如果我尝试像在 Index.js 中那样导入它，不幸的是它不起作用。
正如我所说：问题不在于没有执行 update.js.erb 中的代码 - 例如警报确实有效。只是我需要导入的第三方库不需要

【解决方案2】：

您可以创建一个函数并将其保存在 application.js 等通用文件中，并在需要时调用该函数。因此，您不需要在任何地方都导入 sweetalert2。

function popupSweetAlert(title, text, type) {
  swal.fire({
    title: title,
    text: text,
    type: type
  });
}

希望对你有帮助。

【讨论】：