2016-11-22 2 views
1

Je reçois une erreur de requête 400 incorrecte en utilisant Ajax on Rails. Lorsque je soumets mon formulaire, j'ai une chaîne à envoyer en paramètre à partir de Jquery et je veux l'extraire de params [: assignataire] afin que je puisse extraire la chaîne et l'enregistrer à travers mon contrôleur. Mon contrôleur:Ajax Bad Request 400 Rails

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 

Et voici mon 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); 
    } 
    }); 
}); 

cessionnaire est un nom d'utilisateur sélectionné sous une forme auto-complétion jquery:

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; 
} 

Ma racine est « tâche/"où vous pouvez voir les tâches enregistrées et un formulaire pour en créer un nouveau. J'ai beaucoup cherché sur le net et je les ai tous essayés. Comment puis-je faire? Merci beaucoup

+0

ce que vous obtenez dans la console du navigateur? – inye

+0

L'erreur 404 signifie quel client est incapable de trouver un itinéraire. Vérifiez vos routes.rb. –

+0

Désolé, mon erreur! Il est 400. Console: http: // localhost: 3000/tasks/400 (Demande incorrecte) – ValeMarz

Répondre

3

400 Bad Request - Le serveur ne peut pas ou ne traitera pas la demande en raison d'une erreur de client apparente (par exemple, demande malformé syntaxe, trop grande taille , cadrage de message de demande invalide ou trompeuse demande de routage).

wiki

Modifier le code ajax à:

$.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} qui est un objet JSON pas valide, il doit être {assignee: assignee} Aussi, vous devez ajouter un en-tête valide, le 'Content-Type' et (X-CSRF-TOKEN en option

+0

ok maintenant aucune erreur dans la console du navigateur mais pourtant je ne peux pas voir le paramètre assigné (comme vous pouvez le voir j'ai "notice task_params.inspect" pour inspecter quels paramètres sont passés.) L'alerte montre l'erreur "erreur" – ValeMarz

+0

'assigné = this.value;' devrait soit 'var assigné = this.value;' vérifie aussi les paramètres avec 'params.inspect' car' assignataire' est en dehors de la clé 'tâche'. –

+0

J'ai initialisé var assigné en haut – ValeMarz

0

Résolu!

$("#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(); -> sans cela, le formulaire est soumis deux fois.

var value = $('#new_task').find('input[name="task[value]"]').val(); -> sans cela, je pourrais perdre ma valeur de forme à cause des « tâches de poste » qui rappelle à la tâche # créer