Forum: Ruby on Rails Headache with Ajax in Rails using jQuery

9e14f74ffa358d7d22ba59133daeca1e?d=identicon&s=25 Tommy Ng (tmyonline)
on 2013-05-28 01:23
Hello everyone, I'm a newbie at Ruby on Rails.  I spent nearly two days
of the Memorial Day weekend stumbling upon making Ajax working in Rails.
At this point, I'm so exhausted and hope that I can get some help to
move forward.  Initially, I tried the Ajax approach offered by Rails but
did not work, so I turned to jQuery.  Basically, I want to submit a
simple form as follows:

<%= form_tag("/main/contact", :method => "post", :id => "contactForm")
do %>
    Name: <%= text_field_tag(:name) %><br/>
    Message: <%= text_area_tag(:message) %>
    <%= submit_tag "Send" %>
<% end %>
<div id="result"></div>


And here's my Ajax code in jQuery:

$("#contactForm").submit(function(event) {

  /* stop form from submitting normally */
   event.preventDefault();

  /* clear result div */
   $("#result").html('');

  /* get values from elements on the page: */
   var values = $(this).serialize();

  /* Send the data using post and put the results in a div */
    $.ajax({
      url: "/main/contact",
      type: "post",
      data: values,
      success: function(){
        $("#result").html(response.name + "; " + response.message);
      },
      error:function(){
        $("#result").html('there is error while submit');
      }
    });
});


And here's my main controller:

def contact
    name    = params[:name]
    message = params[:message]
    respond_to do |format|
      format.html # contact.html.erb
      format.json {
        render :response => {:name => name, :message => message}
      }
    end
end


I just want to test to see if user's name and message can be submitted
successfully via Ajax, and if so, insert the submitted values (name &
message) in the <div id="result"></div>.  Would you please look through
and let me know where I did wrong.  I appreciate any help.  Thanks a
lot.
72a6d1c2016a6ec343248690d4a9eb52?d=identicon&s=25 unknown (Guest)
on 2013-05-28 03:16
(Received via mailing list)
what's kind of error you met? did you use firebug to trace?  It is
better
to use remote-form of rails.
http://www.alfajango.com/blog/rails-3-remote-links... is
valuable
to be read if you want to use rails-ujs way.
9e14f74ffa358d7d22ba59133daeca1e?d=identicon&s=25 Tommy Ng (tmyonline)
on 2013-05-28 04:46
Thanks "unknown".

Now that I already went down the jQuery path for Ajax, I would like to
stick with it for a while.  I'm most concerned about this portion of my
code above:

def contact
  name    = params[:name]
  message = params[:message]
  respond_to do |format|
    format.html # contact.html.erb
    format.json {
      render :response => {:name => name, :message => message}
    }
  end
end

Did I render :response in json correctly ?  Thanks.
5f94b9b346c2aa648a80bc259978e5bc?d=identicon&s=25 Colin Law (Guest)
on 2013-05-28 09:42
(Received via mailing list)
On 28 May 2013 03:46, Tommy Ng <lists@ruby-forum.com> wrote:
> Thanks "unknown".
>
> Now that I already went down the jQuery path for Ajax, I would like to
> stick with it for a while.  I'm most concerned about this portion of my
> code:

If you want to use Rails it is generally best to stick to the rails
conventions, that way you will find it easier to get help here.

Have a look at the Rails Guides on debugging, that will show you
techniques that you can use to debug your code.

Colin
10db1164f471223045c846f476cbc59f?d=identicon&s=25 masta Blasta (mastablasta)
on 2013-05-28 16:25
Tommy Ng wrote in post #1110326:
> Hello everyone, I'm a newbie at Ruby on Rails.  I spent nearly two days
> of the Memorial Day weekend stumbling upon making Ajax working in Rails.
> At this point, I'm so exhausted and hope that I can get some help to
> move forward.  Initially, I tried the Ajax approach offered by Rails but
> did not work, so I turned to jQuery.  Basically, I want to submit a
> simple form as follows:
>
> <%= form_tag("/main/contact", :method => "post", :id => "contactForm")
> do %>
>     Name: <%= text_field_tag(:name) %><br/>
>     Message: <%= text_area_tag(:message) %>
>     <%= submit_tag "Send" %>
> <% end %>
> <div id="result"></div>
>
>
> And here's my Ajax code in jQuery:
>
> $("#contactForm").submit(function(event) {
>
>   /* stop form from submitting normally */
>    event.preventDefault();
>
>   /* clear result div */
>    $("#result").html('');
>
>   /* get values from elements on the page: */
>    var values = $(this).serialize();
>
>   /* Send the data using post and put the results in a div */
>     $.ajax({
>       url: "/main/contact",
>       type: "post",
>       data: values,
>       success: function(){
>         $("#result").html(response.name + "; " + response.message);
>       },
>       error:function(){
>         $("#result").html('there is error while submit');
>       }
>     });
> });
>
>
> And here's my main controller:
>
> def contact
>     name    = params[:name]
>     message = params[:message]
>     respond_to do |format|
>       format.html # contact.html.erb
>       format.json {
>         render :response => {:name => name, :message => message}
>       }
>     end
> end
>
>
> I just want to test to see if user's name and message can be submitted
> successfully via Ajax, and if so, insert the submitted values (name &
> message) in the <div id="result"></div>.  Would you please look through
> and let me know where I did wrong.  I appreciate any help.  Thanks a
> lot.

You're not saying what the problem is. Is the request not getting to
server? Is the form data not being sent? Is the server not responding?
Where exactly are you failing?

Right off the bat i can see a problem here:
>$.ajax({
>      url: "/main/contact",
>      type: "post",
>      data: values,
>      success: function(){
>        $("#result").html(response.name + "; " + response.message);
>      },
>      error:function(){
>        $("#result").html('there is error while submit');
>      }
>    });

Your success callback function needs the response parameter. You're
trying to use it, but the variable is not available as a parameter. It
should look like this:

success: function(data, textStatus, jqXHR){
.....do stuff with 'data'
}

data is the json that's come back from server. jqXHR is something
similar to the full XHR response object.
9e14f74ffa358d7d22ba59133daeca1e?d=identicon&s=25 Tommy Ng (tmyonline)
on 2013-05-29 02:59
Thanks a lot everyone!  Masta, I did as you said:

...

var values = $("#contactForm").serialize();

$.ajax({
   url: "/main/contact",
   type: "post",
   data: values,
   success: function(data, textStatus, xhr){
      alert("textStatus: " + textStatus + "; xhr: " + xhr + "; data: " +
data);
      $("#result").html(data.message);
   }
});

Here's what I got based on the alert() above:
  + textStatus: success
  + xhr: [object XMLHttpRequest]
  + data: returned the source code of the current (contact) page (a
shock!) instead of the result in json that I expected.

Two possible issues: (1) I'm wondering if the ajax call made to the
server side to the contact action of the main controller, (2) whether
the result was rendered to json correctly by rails.  Thanks again
everyone.
99261f248d8e2079c3fe9b6b2ea3f95f?d=identicon&s=25 Juan Ricardo Viamonte Gutierrez (Guest)
on 2013-05-29 10:42
(Received via mailing list)
Hi Tommy: Fix you respond_to with this:

class MainController < ApplicationController

  def contact
    name      = params[:name]
    message = params[:message]
    respond_to do |format|
      format.html # contact.html.erb
      format.json { render :json => { :name => name, :message => message
} }
    end
  end
end

http://localhost:3000/main/contact.json

Use render :json instead render :response or render :data


--
Saludos.
Please log in before posting. Registration is free and takes only a minute.
Existing account

NEW: Do you have a Google/GoogleMail, Yahoo or Facebook account? No registration required!
Log in with Google account | Log in with Yahoo account | Log in with Facebook account
No account? Register here.