CODEWITHSUNDEEP
phpajaxlaravelpatch
Ben
Ben

Reputation: 11208

Laravel 5 patch request via ajax

I have a list of comments with a post and I want a user to be able to edit their post if they want to. In the list there's a edit button (if the post belongs to the user logged in) and when clicked an ajax-request is made and a view is returned. This view contains the form to edit the comment and is preloaded with the comment-details. To this point all works well.

Now here's the part where I'm running into an unclear problem. When I want to submit the form, using a PATCH request, it fails with an error 500. The structure looks like this:

Using the Network inspector in Chrome I'm able to click the error. In there it tells me there's a token mismatch? I'm not modifying any tokens, just using the default form. The form code is below:

{!! Form::model($comment, ['method' => 'PATCH', 'route' => ['posts.editComment', $comment->post_id, $comment->id], 'id' => 'editComment' . $comment->id]) !!}
    <div class="comment-edit">
        {!! Form::textarea('comment', null, ['class' => 'form-control', 'style' => 'height: 80px;']) !!}
    </div>
    <div class="comment-edit-buttons text-right">
        {!! Form::button(trans('general.cancel'), ['class' => 'btn btn-default btn-sm cancelEditComment', 'data-postId' => $comment->post_id] ) !!}
        {!! Form::button(trans('general.edit'), ['class' => 'btn btn-primary btn-sm  editComment', 'data-postId' => $comment->post_id, 'data-commentId' => $comment->id] ) !!}
    </div>
{!! Form::close() !!}

Which translates to the browser like:

<form method="POST" action="http://www.domain.com/posts/29/comments/12/edit" accept-charset="UTF-8" id="editComment12">
    <input name="_method" type="hidden" value="PATCH">
    <input name="_token" type="hidden" value="generated token value">
    <div class="comment-edit">
        <textarea class="form-control" style="height: 80px;" name="comment" cols="50" rows="10">nieuwe comment</textarea>
    </div>
    <div class="comment-edit-buttons text-right">
        <button class="btn btn-default btn-sm cancelEditComment" data-postId="29" type="button">Annuleren</button>
        <button class="btn btn-primary btn-sm  editComment" data-postId="29" data-commentId="12" type="button">Bewerken</button>
    </div>
</form>

I'm not really sure where to look? Is there a special way to send PATCH request using ajax?

Upvotes: 1

Views: 1730

Answers (1)

Azeame
Azeame

Reputation: 2401

Your problem has to do with the encryption of the csfr_token, in your blade file add the following:

$encrypter = app('Illuminate\Encryption\Encrypter');
$encrypted_token = $encrypter->encrypt(csrf_token());

then add the following field to your form:

<input id="token" type="hidden" value="{{$encrypted_token}}">

and finally be sure to add the original csfr token to the headers as follows:

<script>
.....
var $_token = $('#token').val();
....
$.ajax({
                type: 'post',
                cache: false,
                headers: { 'X-XSRF-TOKEN' : $_token }, 
                url: 'the_url_to_controller_thru_route/' + some_parameters_if_needed,
                //contentType: "application/json; charset=utf-8",
                //dataType: 'json',
                data: {comment_id: 873}, //assuming that you send some data like id of a comment to controller 
                                success: function(data) {
....
</script>

Ben, if you notice something wrong please edit my answer, it's best for this to be as accurate as possible.

Upvotes: 1

Related Questions