How do i use csrf_token in an external javascript file

I am using datatables to update a record on the db, I use an external javascript file to append the form to the modal section on my blade file. I want to be able to update the record from the external javascript file but I keep getting internal server error. I am using the csrf_token from the meta tag which I have tried placing in the external js file and also in the blade file.

External JS File

                    '<div class="form-group">' +
                    '<label class="col-sm-2 control-label">Distributor Name</label>' +
                    '<div class="col-sm-10">' +
                    '<input type="hidden" id="id" name="id" value="' + $('<div/>').text(data[0]).html() + '">' +
                    '<input class="form-control" type="text" id="name" name="name" value="' + $('<div/>').text(data[1]).html() + '">' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group">' +
                    '<label class="col-sm-2 control-label">Distributor Address</label>' +
                    '<div class="col-sm-10">' +
                    '<textarea class="form-control" type="text" name="address" id="address">' + $('<div/>').text(data[2]).html() + '</textarea>' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group">' +
                    '<button type="submit" class="btn btn-primary">Update</button>' +
                    '</div>' +
                    '</form>' +
                    '<meta name="_token" content="{!! csrf_token() !!}" />';

                $('.row-name', $dlg).html(data[1]);

                $('.modal-body', $dlg).html(html);

                var frm = $('#form');
                //alert(index);

                frm.on('submit', function(ev) {
                  $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                  });
                  ev.preventDefault();
                  //alert(index);
                  var index = $('#id').val();
                  var name = $('#name').val();
                  var address = $('#address').val();

                  console.log(getBaseURL);
                  //alert(name);
                  $.ajax({
                      type: "POST",
                      url: getBaseURL + '/distributor/edit/'+index,
                      data: {name: name, address: address},
                      success: function( msg ) {
                          //$("#ajaxResponse").append("<div>"+msg+"</div>");
                          //location.reload();
                          sessionData = msg.sessionData;

                          $('#form').trigger("reset");
                      }
                  });
                });```

Snapey

9 years ago

Level 122

can you put three backticks ``` before and after your code

Snapey

9 years ago

Level 122

What error are you getting? 500 does not really tell us anything?

CalmArms

9 years ago

Level 1

I get internal server error 500 when I try to post the record to the database using javascript. I have read from other searches that the internal server error is due to the csrf_token not submitted.

topvillas

9 years ago

Level 46

It might be due to a missing token.

A 500 error doesn't tell us anything. What message are you getting?

Snapey

9 years ago

Level 122

Check the Laravel log files if you don't know how to use the browser developer tools.

silverxjohn

9 years ago

Level 5

In your master layout page:

<html lang="en">
<head>
<title>@yield('title')</title>

<!-- Add this meta tag -->
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>

<body>
    <!-- Code omitted -->
</body>

<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
</script>
</html>

This way, you don't need to worry about setting csrf code anywhere in your ajax.

Please or to participate in this conversation.