Sweetalert работает только если следуют typed.js - PullRequest
Новая
       14

Sweetalert работает только если следуют typed.js

0 голосов
/ 09 декабря 2018

Я пытаюсь установить sweetalert на моем сайте RoR, и я не смог заставить его работать , за исключением после запуска typed.js на той же странице сначала.

Я новичок в js, поэтому я очень признателен за любую помощь в понимании, почему.

Мой banner.js файл: 

import Typed from 'typed.js';
import swal from 'sweetalert';

function loadDynamicBannerText() {
  new Typed('#banner-typed-text', {
    strings: ["recipes", "food", "cooking"],
    typeSpeed: 100,
    loop: true
  });
}


function bindSweetAlertButtonDemo() {
  const swalButton = document.getElementById('sweet-alert-demo');
  if (swalButton) { // protect other pages
    swalButton.addEventListener('click', () => {
      swal({
        title: "A nice alert",
        text: "This is a great alert, isn't it?",
        icon: "success"
      });
    });
  }
}

export { loadDynamicBannerText, bindSweetAlertButtonDemo };

И мой application.js Файл: 

import "bootstrap";
import { loadDynamicBannerText, bindSweetAlertButtonDemo } from '../components/banner';
loadDynamicBannerText();
bindSweetAlertButtonDemo();

Если я вставлю следующий код в представление, как typed.js, так и sweetalert будут работать нормально: 

<span id="banner-typed-text"></span>
  <button id="sweet-alert-demo" class="btn btn-primary">Click me!</button>

Однако, если я удалю typed.js и только что подсластил, он не работает: 

<button id="sweet-alert-demo" class="btn btn-primary">Click me!</button>

В последнем случае я получаю следующую ошибку в консоли: 

Uncaught TypeError: Cannot read property 'tagName' of null
    at Initializer.load (typed.js:617)
    at new Typed (typed.js:92)
    at loadDynamicBannerText (banner.js:5)
    at Object.<anonymous> (application.js:3)
    at __webpack_require__ (bootstrap 407d6df1b8b8767e00f3:19)
    at bootstrap 407d6df1b8b8767e00f3:62
    at bootstrap 407d6df1b8b8767e00f3:62

I 'Я не уверен, что это актуально, но тело моего application.html.erb файла: 

<body class="background" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url('<%= image_path seemless_images.sample %>');">
    <%= render 'shared/flashes' %>
    <%= render 'shared/logo' unless defined? @logo_hide %>
    <%= render 'shared/search' unless defined? @search_bar_hide %>
    <%= yield %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </body>

Может кто-нибудь объяснить мне, что происходит, и что означает эта ошибка?

Спасибо всем, кто может помочь!

...