How to customize popup window from data: [confirm: Are you sure]?

Phoenix Forum Questions / Help
,
1

Hi guys!

I have delete button something like this…
ve delete button something like this…

<%= button to: recipient_path(@conn, :delete, recipient.id), method: "delete",  data: [confirm: Are you sure],  class: "btn btn-danger delete-each-button" do %>
 <i class="material-icons icon-button">close</i>Delete
<% end %>

and as you all know, it shows me a pop up window for confirm. but it is not pretty.
So I want to customize it with sweetalert2 javascript library.
But I don’t know how i can cancel the event and re-trigger the event.

I was doing something like this…

 var buttons = document.querySelectorAll('.delete-each-button');
  if(buttons.length !== 0) {
    buttons.forEach(function(button) {
      button.addEventListener('click', function(e){
        e.preventDefault();
         // sweetalert2 code..
        window.swal({
          title: 'Are you sure?',
          text:  'Remove contacts from Recipients List.',
          showCancelButton: true,
          confirmButtonColor: '#f44336',
          cancelButtonColor:  '#333333',
          confirmButtonText: 'Yes, Delete it!'
        }).then((result) => {
          if(result.value) {
            $(this).trigger('click');
          }
        })
      })
    })
  }

this code didn’t prevent default delete action with e.preventDefault();
How can I do this?

2

To change the behaviour of phoenix.js you need to run the latest version (2.12.) of phoenix_html: https://hexdocs.pm/phoenix_html/Phoenix.HTML.Link.html#link/2-overriding-the-default-confirm-behaviour

1 Like
3

Thanks for the link and I read it but I don’t understand very well…

I re-write javascript like this…

var buttons = document.querySelectorAll('.delete-each-button');
if(buttons.length !== 0) {
  buttons.forEach(function(button) {
    button.addEventListener('phoenix.link.click', function (e) {
      e.stopPropagation();
      console.log("Hello!");
      window.swal({
        title: 'Are you sure?',
        text:  'Remove contacts from Recipients List.',
        showCancelButton: true,
        confirmButtonColor: '#f44336',
        cancelButtonColor:  '#333333',
        confirmButtonText: 'Yes, Delete it!'
      }).then((result) => {
        if(result.value) {
         // $(this).trigger('click');
        }
      })
      
    }, false);
  })
}

I am expecting stop default behaviour from this code e.stopPropagation(); as doc says.
But when I click delete button, it shows new pop up window from my code, but it executes right after.
it doens’t my answer… hmm

what am I missing?

4

Updated link: Phoenix.Component — Phoenix LiveView v0.20.3