title: Problems getting success or done response in $.ajax when using vue.js in Laravel
body: <p>I have this simple form where the user should only type text inside a textarea. When the user clicks on the submit button, inside the javascript, I make a call with vue and ajax to insert that text into the database. </p>
  
  <p>My problem is that, right after the user clicks on submit, I want the textarea to be cleared, but after the text has been saved into the database, the text is still there. It persists. Since I am using vue.js and ajax, there is this .done (success) callback function I am waiting in order to proceed to clear the form.</p>
  
  <p>Or is there any other idea to clear the textarea, if the text was saved into the database?</p>
  
  <p>Here is my blade code of the form:</p>
  
  <pre><code>&lt;div class="row" id="timeline"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;form action="#" v-on:submit="postStatus"&gt;{{-- Name of the method in Vue.js --}}
              &lt;div class="form-group"&gt;
                  &lt;textarea class="form-control" rows="5" maxlength="140" autofocus placeholder="What are you upto?" required v-model="post" id="textareapost"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
              &lt;input type="submit" value="Post" class="form-control btn btn-info"&gt;
  
              {{ csrf_field() }}
  
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="col-md-8"&gt;
          Timeline
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my controller:</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers;
  
  use App\Post;
  use Illuminate\Http\Request;
  
  use App\Http\Requests;
  
  class PostController extends Controller
  {
      public function create(Request $request, Post $post)
      {
          //$request-&gt;body;
          //Remember, all we really need is the body. Because if create this post through
          //the User model, it'll automatically assign us a user_id
  
          //validation:
          $this-&gt;validate($request,[
              'body'  =&gt;  'required|max:140',
          ]);
          //die('Posted in the controller!: '.$request-&gt;body); //$request-&gt;get('body');
  
          //creating the post from the user, from the post that belongs to the user:
          $createdPost = $request-&gt;user()-&gt;posts()-&gt;create([
              'body'  =&gt;  $request-&gt;body,
          ]);
  
          //Now respond with the post that has been created:
          return response()-&gt;json($post-&gt;with('user')-&gt;find($createdPost-&gt;id));
      }
  }
  </code></pre>
  
  <p>And the javascript code so far:</p>
  
  <pre><code>var csrf_token = $('meta[name="csrf-token"]').attr('content');
      /*Event handling within vue*/
      //when we actually submit the form, we want to catch the action
      new Vue({
          el      : '#timeline',
          data    :   {
              post    : '',
              token   : csrf_token,
          },
          methods : {
              postStatus : function (e) {
                  e.preventDefault();
                  console.log('Posted: '+this.post+ '. Token: '+this.token);
                  var request = $.ajax({
                      url         :   '/posts',
                      method      :   "POST",
                      dataType    :   'json',
                      data        :   {
                          'body'  :   this.post,
                          '_token':   this.token,
                      }
                  }).done(function (msg) {
                      console.log('Data saved: '+msg);
                      this.post = '';/*Attempting to clear the form*/
                  }.bind(this));/*http://stackoverflow.com/a/26479602/1883256*/
  
                  request.done(function( msg ) {
                      console.log('Data saved: '+msg+'. Outside ...');
                      //$( "#log" ).html( msg );
                  });
  
                  request.fail(function( jqXHR, textStatus ) {
                      console.log( "Request failed: " + textStatus );
                  });
              }
          },
      });
  </code></pre>
  
  <p>After the the text has been saved, I never get the console.log text of the .done part, but I get the .fail message which says:</p>
  
  <blockquote>
    <p>Request failed: parsererror</p>
  </blockquote>
  
  <p>And the response from the controller is right the following:</p>
  
  <pre><code>&lt;?php{"id":29,"user_id":1,"body":"Sunday evening post","created_at":"2016-10-09 23:03:11","updated_at":"2016-10-09 23:03:11","user":{"id":1,"firstname":null,"lastname":null,"username":"pathros","email":"pathros@somemail.net","created_at":"2016-10-08 05:33:06","updated_at":"2016-10-08 18:57:19"}}
  </code></pre>
  
  <p>I noticed that the response adds <code>&lt;?php</code>. Is it maybe the Chrome's inspect elements tool?
  What am I missing?
  (Note: I am using jQuery 3.1.1 and Laravel 5.3)</p>