Question posted in
You can find the official documentation here.

Jquery ajax – How to ask for confirmation in toastr before deletion

I’m working in PHP LARAVEL , what i want is a toastr to delete an item from database.
So when the button is clicked to delete, the toastr should ask “Are you sure to delete?” in ajax.
If selected “OK” the data should be deleted, if selected “Cancel” the data should not be deleted.
How to accomplish this?

Below is my ajax code:

//to unfollow feed
    $('#following').click(function (e) {

        e.preventDefault();
        var formData = $("#unfollowFeed").serialize();
        $('.error-msg').html('');
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: baseUrl + 'unfollow',
            type: 'POST',
            data: formData,
            success: function (data) {
                var id=$('#feed_id').val();
                $("#feedId li[feed-id=" + id + "]").remove();    //to remove <li> of removed feed from sidebar.
                toastr.error('The feed was removed.'); 
                $('#follow').show();
                $('#following').hide();

            }

        });
    });

This is my view part:

<a href style="{{ $status == 0 ? 'display:none;' : '' }}" class=" btn btn-sm btn-primary following" id="following" >{{ __('Following') }}</a>

Can anyone help me with this?

Tags:

3

Answers


  1. 0 
    <!DOCTYPE html>
<html>
<body>

<p>Example: Click the button to display a confirm box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  var r = confirm("Press a button!");
  if (r == true) {
    txt = "You pressed OK!";
  } else {
    txt = "You pressed Cancel!";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

    You can use the inbuilt confirm box:

     $('#following').click(function (e) {
var response = confirm("Are you sure to delete?");
  if (response == true) {

        e.preventDefault();
        var formData = $("#unfollowFeed").serialize();
        $('.error-msg').html('');
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: baseUrl + 'unfollow',
            type: 'POST',
            data: formData,
            success: function (data) {
                var id=$('#feed_id').val();
                $("#feedId li[feed-id=" + id + "]").remove();    //to remove <li> of removed feed from sidebar.
                toastr.error('The feed was removed.'); 
                $('#follow').show();
                $('#following').hide();

            }

        });

  } else {
    /* do anything on Pressed cancel*/
  }

    });
    Login or Signup to reply.
  2. 0

    You can use Sweetalert of bootstrap

    $('#following').click(function (e) {

        e.preventDefault();
        var formData = $("#unfollowFeed").serialize();
        $('.error-msg').html('');
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        }, function() {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + 'unfollow',
                type: 'POST',
                data: formData,
                success: function (data) {
                    var id=$('#feed_id').val();
                    $("#feedId li[feed-id=" + id + "]").remove();    //to remove <li> of removed feed from sidebar.
                    toastr.error('The feed was removed.'); 
                    $('#follow').show();
                    $('#following').hide();

                }

            });
        });
    });
    Login or Signup to reply.
  3. 0

    You can use sweetalert for this purpose.

    Sweet alert docs

    Add this cdn <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    then 

    <script>
   $('#following').click(function (e) {

    e.preventDefault();
      swal({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover this imaginary 
               file!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willDelete) => {
     if (willDelete) {

      ajaxcall(); //calling ajax function
      swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
 });

});

function ajaxcall()
{
  $('.error-msg').html('');
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: baseUrl + 'unfollow',
        type: 'POST',
        data: formData,
        success: function (data) {
            var id=$('#feed_id').val();
            $("#feedId li[feed-id=" + id + "]").remove();    //to remove <li> of removed feed from sidebar.
            toastr.error('The feed was removed.'); 
            $('#follow').show();
            $('#following').hide();

        }

    });
}

</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search