CODEWITHSUNDEEP
datatablesrendersweetalert2
Huy Nguyen
Huy Nguyen

Reputation: 27

sweetalert2 confirm delete when render returning a link in Datatables

I am using Datatable and doing my Remove by rendering returning a link. I wanted to do my Remove by confirm with SweetAlert2 however, it was not able to work as expected.

How do I use sweetalert, I cannot assign an id for returning render a link

Upvotes: 0

Views: 964

Answers (1)

andrewJames
andrewJames

Reputation: 21902

I am not sure where you are getting stuck.

Here is my version:

I am using SweetAlert 2:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>

I have the following render function in my DataTable:

{
  render: function (data) {
    return '<a id="del" href="/your/example/here/' + data + '">Remove</a>';
  }
}

This is a simplified version of your code, just as a demonstration.

I have the following click handler:

$('#del').on('click', function( event ) {
  event.preventDefault(); // don't forget to prevent the default event
  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) {
      Swal.fire(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      )
    }
  });
});

This generates a table with links.

When I click on any link, I get the following pop-up alert:

enter image description here

I have not handled anything relating to actually using the link to delete a resource. I leave that up to you, as a follow-on task, after you get the alert working.

You did not really explain what the specific problem is that you are facing, except to say "it's not working".

If you have new, additional, problems after this then you can open a new question - but please try to provide sufficient details, including error messages from your browser's console and an easy-to-recreate problem description with related code.

Upvotes: 1

Related Questions