sweetalert delete confirm laravel

Question

I have a problem in laravel for confirming the post delete by sweetalert

<script>
        !function ($) {
        "use strict";
        var SweetAlert = function () {
        };
        //examples 
        SweetAlert.prototype.init = function () {

            $('.sa-remove').click(function () {
                swal({
                    title: "are u sure?",
                    text: "lorem lorem lorem",
                    type: "error",
                    showCancelButton: true,
                    confirmButtonClass: 'btn-danger waves-effect waves-light',
                    confirmButtonText: "Delete",
                    cancelButtonText: "Cancel",
                    closeOnConfirm: true,
                    closeOnCancel: true
                },
                function(){
                    window.location.href = "{{ route('panel.posts.remove',$post->id) }}";
                });
            });
        },
        //init
        $.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert
}(window.jQuery),

//initializing 
    function ($) {
        "use strict";
        $.SweetAlert.init()
    }(window.jQuery);
</script>    

But I have a foreach in the view and it just passes last foreach post id and when I want to delete for example second post in the table, last one deletes!

this is the table:

             <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Body</th>
                    <th>Author</th>
                    <th>Operations</th>
                </tr>
            </thead>
            <tbody>
                @foreach($posts as $post)
                <tr>
                    <td>{{ $post->id }}</td>
                    <td>{{ $post->title }}</td>
                    <td>{{ $post->body }}</td>
                    <td>{{ $post->user->name }}</td>
                    <td>
                         <a href="#" class="sa-remove"><button class="wave-effect btn btn-danger btn-bordred wave-light"><i class="fa fa-times"></i></button></a>
                    </td> 
                </tr>
                @endforeach
            </tbody>

and I'm new in this of course!

Answer 1

You are deleting the wrong modal object.First you should add a data attribute to the link button

 <a href="#" data-id="{{$post->id}}" class="sa-remove"><button class="wave-effect btn btn-danger btn-bordred wave-light"><i class="fa fa-times"></i></button></a> code here

Then in your javascript code retrieve the attribute value and change the url.

 $('.sa-remove').click(function () {
            var postId = $(this).data('id'); 
            swal({
                title: "are u sure?",
                text: "lorem lorem lorem",
                type: "error",
                showCancelButton: true,
                confirmButtonClass: 'btn-danger waves-effect waves-light',
                confirmButtonText: "Delete",
                cancelButtonText: "Cancel",
                closeOnConfirm: true,
                closeOnCancel: true
            },
            function(){
                window.location.href = "your-url/" + postId;
            }); here

Answer 2

If you working with mulitple records you can use this fully dynamic code:

<a href="{{ route('users.destroy', $entity->id) }}"
    class="confirmation"
    data-title="Delete User"
    data-text="Are you sure want to delete this user? ">
     <i class="icon-trash"></i>
</a>

From data attributes you can get dynamic url and title for the sweetalear box. and then just pass this information into Javascript.

jQuery(document).on('click', '.confirmation', function (e) {
    e.preventDefault(); // Prevent the href from redirecting directly
    var linkURL = $(this).attr("href");
    var _title = $(this).attr("data-title");
    var _text = $(this).attr("data-text");
    warnBeforeRedirect(linkURL, _text, _title);
});

Make function to then confirm and redirect user to delete method:

function warnBeforeRedirect(linkURL, _text, _title) {
    swal({
        title: _title,
        text: _text,
        type: 'warning',
        showCancelButton: true,
        html: true,
    }, function () {
        var form = $('<form>', {
            'method': 'POST',
            'action': linkURL
        });

        var hiddenInput = $('<input>', {
            'name': '_method',
            'type': 'hidden',
            'value': 'DELETE'
        });

        hiddenToken = $('<input>', {
            'name': '_token',
            'type': 'hidden',
            'value': jQuery('meta[name="csrf-token"]').attr('content')
        });

        form.append(hiddenInput).append(hiddenToken).appendTo('body').submit();
    });
}

If you are using Laravel DELETE Route then you need to pass token into hidden as well. So I created form and append it with Body tag with some hidden variables. then just submit it.

Hope its helpful for you. Good Luck.

Answer 3

The problem is in your url, you are not dinamically selecting the id of the model that needs to be deleted, that's because in your javascript on your url you just printed $post->id, which is something you shouldn't do as mixing php and js like that is bad practice...

So in order to solve your problem you should set your href properly, either insert it directly on your href attribute or by not mixing php with js ,e.g: selecting the $post->id with a JS selector not php, you are trying to print php onto the javascript dinamically which doesn't make any sense. The php code you have inside js will run ONCE that's why it's printing the last id instead of the element you clicked...

You should be trying to do something like... :

function(){
                window.location.href =  // select post id with js here;
            });

But what I would do is to set the href on your foreach so you already have set up and ready to post to the route you need so this would make more sense

<a href="/your-delete-route/{{$post->id}}" class="sa-remove"><button class="wave-effect btn btn-danger btn-bordred wave-light"><i class="fa fa-times"></i></button></a>