0

I want to use Sweetalert2 to confirm wether you want to delete a record or not. If you press "DELETE" and there's an error, show another sweetalert popup. If there's no error, redirect to homepage.

All I did was prevent the default submission of the form and make an ajax request when "delete" is pressed (so result.isConfirmed is true). I've been trying to pass the CSRF token in data and headers too but I get this error all the time:

Uncaught (in promise) ReferenceError: bkF3gnRCrqiVjvKKLnP2kih90lYssXIINjIpLK8v is not defined

I'm not sure if that's doable and if so, how, but I would like to ask for some help. This is what I have so far:

*..prevent default and first sweetalert popup..*
.then((result) => {
if (result.isConfirmed) {
                    $.ajax({
                        type:'GET',
                        url:'{{ route("site.destroy", $record->id) }}',
                        headers: ('X-CSRF-Token', {{ csrf_token() }}),
                        error: ()=>{
                            Swal.fire(
                                'Something went wrong!',
                                'record was not deleted.',
                                'error')
                        }
*..end..*
Paul T.
  • 4,703
  • 11
  • 25
  • 29
ADHDisDEV
  • 414
  • 4
  • 14
  • 1
    The error says your JS is finding a big garbage string it doesn't expect. Look at your code, where is such a string? There's only one place - your CSRF token. So what's funny about that? It is missing quotes! But you've also got brackets around the headers, and a comma separating the key/value, a quick look at [the docs](https://api.jquery.com/jquery.ajax/) and a search for [an example](https://stackoverflow.com/questions/3258645/pass-request-headers-in-a-jquery-ajax-get-call) show that is incorrect. `headers: {"X-CSRF-Token": "{{ csrf_token() }}"}`. I'm voting to close as a typo. – Don't Panic Feb 11 '23 at 22:47
  • If I use the code piece you sent, it throws `405` error instead, so I'm guessing it won't get the csrf token? I'm not sure if that's the right way to do it tho. – ADHDisDEV Feb 11 '23 at 23:24
  • Did you check what 405 means? It seems you have moved on to a new problem, you have no route set up for this request. Check your browser devtools, you'll see a) if the request really happens; b) if the right header is included; c) the server response. If you have concerns about how you're sending CSRF (it looks fine to me), there are thousands of examples here on SO, copy one! :-) – Don't Panic Feb 11 '23 at 23:34
  • I do have a route set-up for that request, since all I want to do is add Sweetalert2 inbetween the form submission and the record deletion. – ADHDisDEV Feb 11 '23 at 23:58
  • I'm also using Laravel's "Route", so using "route("site.destroy", $record->id)" actually gives you the URL: `localhost:8000/destroy/0000` where 0000 is the $record->id provided. (0000 is not an actual id, just an example) – ADHDisDEV Feb 11 '23 at 23:59
  • And what is the route you have set up, in `web.php`? What does `php artisan route:list` show? – Don't Panic Feb 12 '23 at 00:42

1 Answers1

0

Here is the solution,

  • you have syntax error (try to use header as key-value pair).
  • Try this way.

JavaScript code

$.ajax({
    type: 'GET',
    url: '{{ route("site.destroy", $record->id) }}',
    headers: {
        'X-CSRF-Token': '{{ csrf_token() }}'
    },
    error: () => {
        Swal.fire(
            'Something went wrong!',
            'record was not deleted.',
            'error'
        );
    }
});

Hope you will fix the issue :)

Pathum Bandara
  • 343
  • 2
  • 3
  • 12
  • Why do you think this is necessary? Passing CSRF as a header is perfectly fine, it is even in the docs: https://laravel.com/docs/9.x/csrf#csrf-x-csrf-token – Don't Panic Feb 12 '23 at 02:26
  • you are correct brother. If this is not the issue we can try to access csrf token using key-value pair. not as a tuple. I will edit my answer. Thanks. – Pathum Bandara Feb 12 '23 at 02:33