Delete warning

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'
    )
  }
})

@ejdelmonico Thanks, help me too (:

@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

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()

{

@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.

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 ! ');
            }
        });
    });
});



               } 
        

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

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.

@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 :)

Glad it worked.

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