JavaScript всплывающее окно с сообщением об ошибке в Rails

Question

Я работаю над своим первым приложением Rails, и теперь я зашел так далеко, что мне нужно интегрировать JS в мое приложение Rails - в представлении. В основном я sh хочу показать всплывающее окно, если пользователь не заполняет все поля в регистрационной форме. Поскольку я создал свое приложение с помощью devise, у меня уже есть _error_messages. html .erb, как показано ниже.

<% if resource.errors.any? %>
  <div id="error_explanation">
    <h2>
      <%= I18n.t("errors.messages.not_saved",
                 count: resource.errors.count,
                 resource: resource.class.model_name.human.downcase)
       %>
    </h2>
    <ul>
      <% resource.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

В основном в форме просто перечислены все ошибки, то есть поля, которые не были заполнены. Я пытался интегрировать скрипт непосредственно в документ, но это не сработало.

 <script>
      function myFunction() {
        alert("I am an alert box!");
      }
 </script>

Как мне это сделать? Спасибо

Answer 1

1. Добавить в вашу форму remote: true атрибут;

<%= form_for @model, remote: true do |f| %>
    your fields here
<% end %>

В действии вашего контроллера сделайте что-то вроде этого:

  def create
    @model = ::Model.new(model_params)
    if @model.save
      *your default successful code here*
    else
      respond_to do |format|
        format.js do
          render template: 'model/failed_modal.js.erb',
                 layout: false,
                 locals: { error_messages: @modal.errors } // *or your way to send error messages to view template
        end
      end
    end

Создайте файл с именем failed_modal.js.erb в каталоге views/model (рядом с другими вашими представлениями new, create et c.)

В вашем new вид (или где находится ваша форма создания) место модальное (всплывающее окно или все, что вы хотите отобразить пользователю). Примерно так:

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="modal-body">
      // errors will display here with javascript code
    </div>
  </div>
</div>

Добавьте немного стиля в ваш модал (я нашел его здесь ):

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

Добавить возможность скрыть модальные (и стереть текущие ошибки), нажав на значок закрытия или в область вокруг модальных:

document.addEventListener("DOMContentLoaded", function() {
  var span = document.getElementsByClassName("close")[0];
  var modal = document.getElementById("myModal");
  var modalBody = document.querySelector(".modal-body");

  span.onclick = function() {
    modal.style.display = "none";
    modalBody.innerHTML = "";
  };

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
      modalBody.innerHTML = "";
    }
  };
});

И последнее, но не менее важное: добавьте js код вашей пустой failed_modal.js.erb к pu sh ошибкам в ваше модальное (всплывающее) окно:

var errors = <%= error_messages.to_json.html_safe %>; //pass errors from controller action and read them in js

var errorForm = document.querySelector('#myModal'); //select our modal node;

Object.keys(errors).forEach(function(prop) {
  var modalBody = error_form.querySelector('.modal-body');
  var errElement = document.createElement('div');
  errElement.classList.add('alert');
  errElement.classList.add('alert-danger');
  errElement.innerText = prop + ':' + errors[prop][0];
  modalBody.appendChild(errElement)
}) // iterate through errors hash keys (object in js) to add them into modal body.

errorForm.style.display = "block";  // change display: none to display: block to show our modal with errors

К этому времени ваши ошибки будет выглядеть ужасно, вот так:

Но я уверен, что вы справитесь с этим и настроите его так, как вам нравится. Надеюсь, это поможет вам.

PS Для пункта 6 вы можете поместить этот код в новый файл, назвать его как хотите и поместить в каталог assets/javascripts. По умолчанию ваш application.js должен иметь строку //= require_tree ., которая загружает все ваши js файлы в этом каталоге. Ура!