thr3ads.net - Rails - Headache with Ajax in Rails using jQuery [May 2013]

If this information is useful, please help other people find it:
Share via:

Tommy Ng

2013-May-27 23:23 UTC

Headache with Ajax in Rails using jQuery

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.  I have tried nearly everything I found on Google but
still not successful.  Initially, I tried the Ajax approach offered by
Rails but did not work, so I turned to jQuery for Ajax.  Basically, I
want to submit a form using Ajax:

<%= 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:

<script type="text/javascript">
$("#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(){
        alert("success");
        $("#result").html(data);
      },
      error:function(){
        alert("failure");
        $("#result").html(''there is error while
submit'');
      }
    });
});
</script>


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 :data => {:name => name, :message => message}
      }
    end
end


At this point, 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.

-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/d2c91d52ab5ed68bcb1f1e7bb7a8adb7%40ruby-forum.com?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.

cooker.kang-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

2013-May-28 01:14 UTC

head link

Re: Headache with Ajax in Rails using jQuery

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-and-forms/ is valuable 
to be read if you want to use rails-ujs way.

On Tuesday, May 28, 2013 7:23:00 AM UTC+8, Ruby-Forum.com User
wrote:>
> 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.  I have tried nearly everything I found on Google but 
> still not successful.  Initially, I tried the Ajax approach offered by 
> Rails but did not work, so I turned to jQuery for Ajax.  Basically, I 
> want to submit a form using Ajax: 
>
> <%= 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: 
>
> <script type="text/javascript"> 
> $("#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(){ 
>         alert("success"); 
>         $("#result").html(data); 
>       }, 
>       error:function(){ 
>         alert("failure"); 
>         $("#result").html(''there is error while
submit'');
>       } 
>     }); 
> }); 
> </script> 
>
>
> 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 :data => {:name => name, :message => message} 
>       } 
>     end 
> end 
>
>
> At this point, 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. 
>
> -- 
> Posted via http://www.ruby-forum.com/. 
>
-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/f01ab19c-d46b-4395-a614-e5fff1c4e5d2%40googlegroups.com?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.

Tommy Ng

2013-May-28 02:46 UTC

head link

Re: Headache with Ajax in Rails using jQuery

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:

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.

-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/14109904ee7616333bf4c5a05c49fa02%40ruby-forum.com?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.

Juan Ricardo Viamonte Gutierrez

2013-May-28 04:30 UTC

head link

Re: Re: Headache with Ajax in Rails using jQuery

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.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/CAEhrt%2BbmvxiD-57%2BeATAU%3DpzGz05zRqTW-RbSfmrqo%2Bu8U21qQ%40mail.gmail.com?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.

Colin Law

2013-May-28 07:40 UTC

head link

Re: Re: Headache with Ajax in Rails using jQuery

On 28 May 2013 03:46, Tommy Ng
<lists-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org>
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
>
> 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.
>
> --
> Posted via http://www.ruby-forum.com/.
>
> --
> You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an
email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/14109904ee7616333bf4c5a05c49fa02%40ruby-forum.com?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/CAL%3D0gLsUgUYoN6KKA9CcB13HSXs4WR88ktLvfDPZRtMioopUTg%40mail.gmail.com?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.

masta Blasta

2013-May-28 14:25 UTC

head link

Re: Headache with Ajax in Rails using jQuery

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.

-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/493d74a810a78a1661bd621188666f87%40ruby-forum.com?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.

Tommy Ng

2013-May-29 00:59 UTC

head link

Re: Headache with Ajax in Rails using jQuery

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 XHMHttpRequest]
  + 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.

-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/9b6965181d7d036d486527f66c0cc672%40ruby-forum.com?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.

Apparently Analagous Threads

Search for more reasonably related threads

Rails - May 2013 - Headache with Ajax in Rails using jQuery

Headache with Ajax in Rails using jQuery

Re: Headache with Ajax in Rails using jQuery

Re: Headache with Ajax in Rails using jQuery

Re: Re: Headache with Ajax in Rails using jQuery

Re: Re: Headache with Ajax in Rails using jQuery

Re: Headache with Ajax in Rails using jQuery

Re: Headache with Ajax in Rails using jQuery

Apparently Analagous Threads