Сладкое оповещение - невозможно добавить успешное сладкое оповещение к простой отправке формы - PullRequest
Новая
       10

Сладкое оповещение - невозможно добавить успешное сладкое оповещение к простой отправке формы

0 голосов
/ 24 сентября 2018

**

function bindSweetAlertButtonDemo() {
  const swalButton = document.getElementById('sweet-alert-demo');
  if (swalButton) { // protect other pages
    swalButton.addEventListener('click', () => {
      swal({
        title: "Nice",
        text: "You've added a task. Click on it for more details",
        icon: "success"

      });

 event.preventDefault()


    });
  }
}
<div>
  <%= simple_form_for [ @task] do |f| %>
   <%= f.input :name %>
   <%= f.input :description %>
   <%= f.submit :submit, class: "btn btn-danger" ,id: "sweet-alert-demo" %>
  <% end %>

</div>

Я попытался создать форму с кнопкой отправки, чтобы добавить задачу на страницу индекса.На представлении я хочу успех сладкого оповещения.однако оповещение сначала исчезло через миллисекунды, но это было устранено с помощью protectdefault ().Но теперь отправка больше не работает.есть идеи?(Я импортировал вещи правильно, просто не добавил их во фрагмент)

1 Ответ

0 голосов
/ 24 сентября 2018

Вам необходимо определить event.Вы можете использовать swal .then для отправки формы, если пользователь нажал Ok. 

swalButton.addEventListener('click', (event) => {
  swal({
    title: "Nice",
    text: "You've added a task. Click on it for more details",
    icon: "success"

  });
 event.preventDefault()
});

Демо: 

const swalButton = document.getElementById('sweet-alert-demo'), form = document.querySelector('form');
function bindSweetAlertButtonDemo() {
  if (swalButton) { // protect other pages
    swalButton.addEventListener('click', (event) => {
      swal({
        title: "Nice",
        text: "You've added a task. Click on it for more details",
        icon: "success"

      }).then(function(value){
        if(value!=null){
        form.submit();
        }
      });
        event.preventDefault();
    });
  }
}
bindSweetAlertButtonDemo();
<script src="https://unpkg.com/sweetalert@2.1.0/dist/sweetalert.min.js"></script>
<div>
<form>
<input type="text" name="name" placeholder="Name"><br/>
<input type="description" name="description" placeholder="Description"><br/>
<button id="sweet-alert-demo">Submit</button>
</form>
</div>
...