CODEWITHSUNDEEP
jquerydatatablessweetalert
67Stefano
67Stefano

Reputation: 53

Remove row in data table with SweetAlert confirmation

I'm trying to remove a row by pressing the delete icon, but I first want a SweetAlert confirmation window.

My code:

$(document).ready(function() {
      //$( 'button[data-target="#delete"' ).click(function() {
      $('##ads-overview tbody').on('click', 'button[data-target="#delete"', function() {
        swal({
          title: "Weet u het zeker?",
          text: "Deze actie is niet meer te herstellen",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Ja, ik weet het zeker!",
          cancelButtonText: "Annuleren",
          closeOnConfirm: false,
          closeOnCancel: false
        }, function(isConfirm) {
          if (isConfirm) {
            swal("Verwijderd!", "De advertentie is succesvol verwijderd", "success");,

            function() {
              table.row($(this).parents('tr')).remove().draw();
            }
          }
          } else {
            swal("Geanulleerd", "De advertentie is niet verwijderd", "error");
          }
        });
      });
    });

https://jsfiddle.net/6n3zsfd5/

The alert window is not appearing. What am I doing wrong?

Upvotes: 1

Views: 5712

Answers (1)

Nate Barbettini
Nate Barbettini

Reputation: 53600

Working version: https://jsfiddle.net/6n3zsfd5/5/

$(document).ready(function () {
      var table = $('#ads-overview').DataTable();

      $('#ads-overview tbody').on('click', 'button[data-target="#delete"]', function () {
          var btn = this;

          swal({
              title: "Weet u het zeker?",
              text: "Deze actie is niet meer te herstellen",
              showCancelButton: true,
              confirmButtonColor: "#DD6B55",
              confirmButtonText: "Ja, ik weet het zeker!",
              cancelButtonText: "Annuleren",
              closeOnConfirm: false,
              closeOnCancel: false
          }, function (isConfirm) {
              if (isConfirm) {
                  swal("Verwijderd!", "De advertentie is succesvol verwijderd", "success");
                  table.row($(btn).parents('tr')).remove().draw(false);
              } else {
                  swal("Geanulleerd", "De advertentie is niet verwijderd", "error");
              }
          });
      });
});

There wasn't anything wrong with how you were calling SweetAlert. There were a few syntax errors in your code and problems with how you were setting up the DataTable. (thanks to Gyrocode.com for spotting that!)

For the syntax errors, open up your Developer Tools window or Javascript Console to see the errors that are thrown when the page loads. That will lead you right to the offending lines.

Specific code fixes:

You need to initialize the DataTable:

var table = $('#ads-overview').DataTable();

You don't need two hashes at the beginning of this line, but you do need a closing bracket after "delete":

$('##ads-overview tbody').on('click', 'button[data-target="#delete"', function(...
...^..............................................................^

There was a stray comma at the end of this line:

swal("Verwijderd!", "De advertentie is succesvol verwijderd", "success");,

This doesn't really make sense:

function() {
    table.row($(this).parents('tr')).remove().draw();
}

There shouldn't be any need to wrap it in a function; just call the method.

That should get everything all fixed up. The JSFiddle at the top of this answer includes all of these fixes.

Upvotes: 3

Related Questions