Sweet alert 2 в Ruby on Rails 7

Традиционные окна предупреждений выглядят так скучно. Мы также не применяем к ним стиль. Существует множество способов изменить стиль этого. Итак, в этой статье мы поговорим об одной из лучших JS-библиотек «Sweet Alert 2».

Sweet Alert — это библиотека JavaScript, которая используется для того, чтобы сделать окна предупреждений и всплывающие сообщения более стильными, элегантными и привлекательными.

2. Интеграция Sweet Alert с Ruby on Rails

Мы будем использовать Rails 7.0.4 и Ruby 3.1.0.

Предположим, у нас есть простое приложение crud rails, которое было создано вручную или создано вручную.

Чтобы использовать sweetalert, мы собираемся использовать новую функцию importmap в Rails 7.
Итак, давайте закрепим «Sweet Alert» с помощью importmap.

bin/importmap pin sweetalert2

Теперь нам нужно импортировать это в application.js. Итак, добавьте следующие строки в application.js

import Swal from 'sweetalert2';
window.Swal = Swal;

Sweetalert настроен. Теперь вы можете использовать SweetAlert.

3. Sweet Alert 2 в качестве окна оповещения

Мы можем изменить окно предупреждения по умолчанию и добавить вместо него «Sweet Alert».

<button onclick= "defaultAlertBtn()"> Default Alert </button>
<button onclick= "sweetAlertBtn()"> Sweet Alert </button>

Теперь добавьте скрипт,

<script>
  function defaultAlertBtn() {
    alert("Button has been clicked")
  }
  function sweetAlertBtn() {
    Swal.fire({
      icon: 'success',
      title: 'Button has been clicked',
    })
  }
</script>

Скриншоты:

4. Sweet Alert 2 с кнопкой уничтожения

Нам нужно получить подтверждение от пользователя, прежде чем удалять какие-либо данные. Итак, для этого нам нужно написать код Javascript.

Создайте файл delete_confirmation_dialog.js в папке javascript. и добавьте в него следующий код. приложение/javascript/delete_confirmation_dialog.js

window.addEventListener(('turbo:load'), () => {
  document.addEventListener('submit', (event) => {
    if (event.target && event.target.className === 'delete-alertbox') {
      event.preventDefault()
      Swal.fire({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!'
      })
        .then((result) => {
          if (result.isConfirmed) {
            document.querySelector('.delete-alertbox').submit()
          }
        })
        .catch(event.preventDefault())
    }
  })
})

Затем включите этот файл в application.html.erb. В результате мы можем использовать этот код JavaScript на любой странице приложения.

<%= javascript_include_tag "delete_confirmation_dialog" %>

Наконец, измените кнопку уничтожения/удаления.

<%= button_to "Delete", some_path, method: :delete, form_class: 'delete-alertbox'%>

Скриншот:

5. AJAX-вызов с Sweet Alert 2

Вы также можете использовать это сладкое оповещение в вызовах AJAX.

$.ajax({
  url: "/some_path",
  type: "post",
  data: { book_id: book.id },
  success: function (data) {
    Swal.fire({
      icon: 'success',
      title: 'AJAX call occurred successfully.',
      timer: 3000
    })
  },
  error: function (data) { },
});

Скриншот: