Delete warning

Published 2 weeks ago by MrLukman

hey guys i wanna ask how to display a delete warning with sweet alert

here's my blade

 <form id="inbox" action ="{{ action('[email protected]', $inbox->id) }}" method="post">

                    {{csrf_field()}}
                    <input name = "_method" type="hidden" value="DELETE"/>
                    <button id ="delete" type = "submit" class = "btn btn-danger btn-xs" value= "Delete"/>
                      
                    </button>


<script>
 $('button.btn btn-danger btn-xs').on('click', function()
{

  // Display SweetAlert

   swal("Are you sure?", {
  icon: "warning",
  dangerMode: true,
  buttons: true,
}),

 //On clicking 'Yes, I am sure to delete'

 function(){  
      $(this).closest('#inbox').submit();
    }

}
   
</script>

the problem is when i press the delete button the item just deleted right away. thanks for the help

Best Answer (As Selected By MrLukman)
skliche

Is that function even executed? Try

swal("Are you sure?", {
    icon: "warning",
    dangerMode: true,
    buttons: true
}).then(function(value) {
    if (value) {
        $(this).closest('#inbox').submit();
    }
});

Instead of submitting the form you might want to use something like axios.

ejdelmonico

You should use a promise so you can perform the delete submit after the swal is done.

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  confirmButtonClass: 'btn btn-success',
  cancelButtonClass: 'btn btn-danger',
  buttonsStyling: false,
  reverseButtons: true
}).then((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  } else if (
    // Read more about handling dismissals
    result.dismiss === swal.DismissReason.cancel
  ) {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})
LielZ

@ejdelmonico Thanks, help me too (:

MrLukman

@ejdelmonico my problem is the warning just dont appear, when i press delete button the item just deleted right away, without even a warning. fyi my swal in other pages woks just fine, so i have to figure out how to trigger the warning first when i press the delete button. sorry for my bad english, and thanks again

Snapey
Snapey
2 weeks ago (842,895 XP)

You are not selecting the button correctly in j query.

Classes have to start with a period

As you have an ID use that

$('#delete').on('click', function()

{

skliche
skliche
2 weeks ago (134,230 XP)

@MrLukman If you really want to bind using the classes, I think you have to use

$('button.btn.btn-danger.btn-xs')

But you are still submitting the form so you won't see the alert. Try something like

$('button.btn.btn-danger.btn-xs').on('click', function(event)
{
    event.preventDefault();

    // display the alert

But you should really bind using the ID (#delete), not the classes.

hanif-king

As a good suggestion try to use javascript/jquery and ajax request for deleting a record. it will provide for you two best functions.

1 . it provides for you options for delete /yes or delete/ no

  1. it provides for you a returns message after your button delete/success done like you can inform you client that the jobs was successfully completed. for more about ajax request it's easy to understand and simple and you can find example of ajax request here:
    <div class="record" id="record-1">
                        <a href="?delete=1" class="delete">Delete</a>
                        <strong>Database Item 1</strong>
    </div>
        <div class="record" id="record-2">
                        <a href="?delete=2" class="delete">Delete</a>
                        <strong>Database Item 2</strong>
      </div>
        
</div>
$(document).ready(function() {
    $('a.delete').click(function(e) {  //your buttong 
        e.preventDefault();
        var parent = $(this).parent();
              var r = confirm("Press a button!");
              if (r == true) {
                
// here is your ajax request 

$.ajax({
            type: 'get',                  // likewise you can have post method
            url: '{{route("yourDeletetRouteName")}}',
            data: 'deleteRowRef' : parent.attr('id'),
            beforeSend: function() {
                
                                     //if you have some images to show somthing like loading.... or a .swf image to indicate something is in process. here you can do it.
            },
            success: function() {
                alert('task was complete successfully ! ');
            }
        });
    });
});



               } 
        
MrLukman

okay guys @Snapey @skliche so now i managed to display the warning, but when i press okay, the item is not deleted. here's my code.

<script>
 $('#delete').on('click', function(){
  event.preventDefault();
  swal("Are you sure?", {
   icon: "warning",
   dangerMode: true,
   buttons: true,
 }),
  function(){   
    $("#myform_id").submit();
  };

});
</script>

thanks again for the help

skliche
skliche
1 week ago (134,230 XP)

Is that function even executed? Try

swal("Are you sure?", {
    icon: "warning",
    dangerMode: true,
    buttons: true
}).then(function(value) {
    if (value) {
        $(this).closest('#inbox').submit();
    }
});

Instead of submitting the form you might want to use something like axios.

MrLukman

@skliche thanks man that's really works, you're the real mvp. Btw fyi

i dont know why but in firefox i have to add this code

<script>
 var self = $(this);

//display swal
</script>

below event.preventdefault(); in order to make it work. But anyway thanks again :)

skliche
skliche
1 week ago (134,230 XP)

Glad it worked.

Yes, that makes sense, otherwise this might be interpreted as the swal instance.

Please sign in or create an account to participate in this conversation.