Ajax Bad Request 400 Rails

Question

I'm getting bad request error 400 using Ajax on Rails. When i submit my form I have a string to send as parameter from Jquery and i want to retrieve it from params[:assignee] so i can extract the string and save it through my controller. My controller:

    def create
    @task = Task.new(task_params)
    @task.user = current_user
    username = params.permit[:assignee]
    @task.assignee = username

    #set_category
    respond_to do |format|
      if @task.save
        format.html { redirect_to tasks_url, notice: 'Task was successfully created. '+task_params.inspect}

        #format.html { redirect_to @task, notice: 'Task was successfully created.' }
        format.json { render :show, status: :created, location: @task }
      else
        format.html { render :new }
        format.json { render json: @task.errors, status: :unprocessable_entity }
      end
    end
  end

def task_params
  params.require(:task).permit(:owner, :value, :completed, :category, :date, :assignee)

end

And this is my JS:

 $( "#new_task" ).submit(function() {
    alert("form: "+assignee);
  //event.preventDefault();
 $.ajax({
   url: "/tasks",
   type: "POST",
   data: {assignee},
   dataType: "json",
   success: function(data) {
       alert('successfully');
     },
    error: function(xhr, textStatus, error) {
     alert(xhr.statusText+""+textStatus+""+error);
  }
   });
});

assignee is an username selected in a jquery auto-complete form:

select: function(event, ui) {
    var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // add placeholder to get the comma-and-space at the end
    terms.push("");
    this.value = terms.join("");
    assignee=this.value;
    $('input[name=commit]').prop("disabled",false);

    return false;
}

My root is "task/" where you can see saved tasks and a form to create a new one. I searched a lot on the net and I tried them all. How can I do? Thanks so much

Answer 1

400 Bad Request - The server cannot or will not process the request due to an apparent client error (eg, malformed request syntax , too large size, invalid request message framing, or deceptive request routing).

wiki

Change the ajax code to:

$.ajax({
   url: "/tasks",
   type: "POST",
   dataType: "json",
   headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), // Optional
      'Content-Type': 'application/json'
   },
   data: JSON.stringify({ assignee: assignee }),
   success: function(data) {
       alert('successfully');
   },
   error: function(xhr, textStatus, error) {
     alert(xhr.statusText+""+textStatus+""+error);
   }
});

{assignee} that's a not valid JSON object it should be {assignee: assignee} Also you should add a valid headers, The 'Content-Type' and ( X-CSRF-TOKEN optional)

Answer 2

Solved!

    $( "#new_task" ).submit(function(event) {
    alert("form: "+assignee);
    var value = $('#new_task').find('input[name="task[value]"]').val();
event.preventDefault();
 $.ajax({
   url: "/tasks",
   type: "post",
   contentType: "application/json",

   data: JSON.stringify({ assignee: assignee, value: value }),
   success: function(data) {
       alert('successfully');
   },
   error: function(xhr, textStatus, error) {
     alert(xhr.statusText+" "+textStatus+" "+error);
   }
});

});

event.preventDefault(); --> without this, the form is submitted twice.

var value = $('#new_task').find('input[name="task[value]"]').val(); --> without this, i could lose my form value because of "post tasks" that reminds to task#create