JQuery ajax and controller method
I have this controller method:
def create
render plain: params[:article].inspect
#@article = Article.new(article_params)
#@article = Article.create(article_params)
#if @article.save
# redirect_to @article
#else
# render 'new'
#end
end
And this jquery ajax request:
function ajaxsend() {
$.ajax({
url: "/articles",
type: "POST",
data: { "article": { "title": "acme", "text": "text of the article" } },
success: function(resp){ }
});
}
But after I click the button that launches e jquery ajax I get nothing. I am expecting rendering but nothing happens, not even an error in the console. What am I doing wrong? I don't understand how I can send jQuery ajax data to the controller. Any help? I am new to rail design rubies. Ruby version: 2.1.2; Rails version: 4.1.5;
Edit1:
This works well when I do it the traditional way in the form:
Result:
Edit2:
The WEBrick server prints this when I click the button:
Started POST "/articles" for 127.0.0.1 at 2014-09-14 09:43:36 +0100
Processing by ArticlesController#create as */*
Parameters: {"article"=>{"title"=>"acme", "text"=>"123 Carrot Street"}}
Rendered text template (0.0ms)
Completed 200 OK in 1ms (Views: 0.4ms | ActiveRecord: 0.0ms)
Everything seems to be in order. Why is nothing happening in the browser? Why isn't rendering in create method working? Any help?
WEBrick's answer when I fill out the form and click Create Article:
Started POST "/articles" for 127.0.0.1 at 2014-09-14 09:52:21 +0100
Processing by ArticlesController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"o8bzaGFcWGaHFFEbgZsfx5bWiHDAIaX3j4xXh3XkTwc=", "article"=>{"title"=>"mmmmm", "text"=>"mmmmm"}, "commit"=>"Create Article"}
Rendered text template (0.0ms)
Completed 200 OK in 1ms (Views: 0.4ms | ActiveRecord: 0.0ms)
Edit3:
I've also tried like this:
$.post("/articles", { "article": { "title": "Title1Ar", "text": "text of the article" } }, alert("callback"), "json").error(alert("error handler"));
This is in WEBrick:
Started POST "/articles" for 127.0.0.1 at 2014-09-15 09:19:49 +0100
Processing by ArticlesController#create as JSON
Parameters: {"article"=>{"title"=>"firsttitle", "text"=>"text of the article"}}
Rendered text template (0.0ms)
Completed 200 OK in 1ms (Views: 0.5ms | ActiveRecord: 0.0ms)
but nothing happens again in the browser. Any help?
source to share
I am making ajax call like this, you can try:
$("#test-ajax-controller").on("click", function() {
request = void 0;
request = $.ajax({
url: "/articles/create/?title=acme&text=123 Carrot Street"
});
request.done(function(data, textStatus, jqXHR) {
console.log(data);
});
request.error(function(jqXHR, textStatus, errorThrown) {
alert("AJAX Error:" + textStatus);
});
});
And in your controller, you should respond in JSON
respond_to do |format|
format.json { render json: @your_return_object }
end
Everything seems to be in order. Why is nothing happening in the browser?
Since you haven't created any functions to handle the response.
Whenever you send Ajax requests, you will always get a response. This answer is what you need to consider when writing your javascript. I'll walk you through the immediate fix in detail, followed by a more systemic fix that will set you in a better way:
Ajax
As per your current setup, you will want to get the data back using the following:
#app/assets/javascripts/application.js
function ajaxsend() {
$.ajax({
url: "/articles",
type: "POST",
data: { "article": { "title": "acme", "text": "123 Carrot Street" } },
success: function(resp){
alert("Data");
}
});
}
The "warning" in this case is what will create the effects you want. To make this work correctly, you will have to use your own code (I don't know what you are trying to achieve).
It should also be noted that you will have to bind this code ajax
to an event in your JS:
#app/assets/javascripts/application.js
$(document).on("submit", "form", function() {
$.ajax({
url: $(this).attr("action"),
type: "POST",
data: $(this).serialize(),
success: function(resp){
alert("Data");
}
});
});
UJS
With Rails, we are very fortunate that the Rails UJS driver , which provides a number of functionality for our Rails applications, will be able to reference implicitly (IE without having to store the defining functions).
You can see the Rails UJS Ajax function here
In particular, you can do this:
#app/views/articles/new.html.erb
<%= form_for @article, remote: true do |f| %>
#app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
respond_to :js, :json, :html
def create
@article = Article.new article_params
@article.save
respond_with @article
end
private
def article_params
params.require(:article).permit(:title, :text)
end
end
#app/assets/javascripts/application.js
$(document).on("ajax:success", "form", function(status, data, xhr){
alert("DATA RECEIVED");
});
source to share