title: AJAX Post request via API - error occurred while parsing request parameters
body: <p>I'm trying to use AJAX to do a POST request via API. For some reason I run into this error:  <strong>"error occurred while parsing request parameters".</strong></p>
  
  <p>From my understanding, this error occured because of the json parsing when I pass the url attribute into the POST request.</p>
  
  <p>I've read various stackoverflow post around the internet, and seems like using the following should work:</p>
  
  <pre><code>data: { todo: { user_id: userId, body: todoBody } },
  datatype : 'json',
  </code></pre>
  
  <p>I've also tried using this as well and it doesn't work</p>
  
  <pre><code>data: { "todo": { "user_id": userId, "body": todoBody } },
  datatype : 'json',
  </code></pre>
  
  <p>I hope someone can help guide me to the right direction :)</p>
  
  <p>The following is the full code:</p>
  
  <p><strong>index.html.erb</strong></p>
  
  <pre><code>&lt;div class='new-todo'&gt;
      &lt;%= form_for todo, remote: true do |f| %&gt;
  
        &lt;div class="form-group"&gt;
          &lt;%= f.label :body, 'Todo Item' %&gt;
          &lt;%= f.text_area :body, rows: 4, class: 'form-control', placeholder: "Enter todo item" %&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;%= f.submit "Create", class: 'btn btn-success', data: { user_id: current_user.id, user_token: current_user.auth_token} %&gt;
        &lt;/div&gt;
  
      &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Api.js</strong></p>
  
  <pre><code> var superlist = {};
  
  superlist.setupDeleteHandlers = function() {
  
    $(document).ready(function(){
  
  
      $('.new-todo').submit(function(event) {
        var userId = $('.btn-success').attr("data-user-id");
        var userToken = $('.btn-success').attr("data-user-token");
        var todoBody = $('#todo_body').val();
        var data = {"todo": {"user_id": userId, "body":todoBody}};
        console.log("test", userId, userToken, todoBody, data);
        $.ajax({
          type : "POST",
          url : "/api/users/"+userId+"/todos",
          data: { "todo": { "user_id": userId, "body": todoBody } },
          datatype : 'json',
          contentType: "application/json; charset=utf-8",
          beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization", userToken);
          },
          success : function() {
            alert('Item successfully created!'); 
          },
          error : function(error) {
          }
        });
      });
  
    });
  
  };
  </code></pre>