Getting started with Ajax

rubyonrails-talk
1

Hi all, I’m starting with Ajax but I have a issue, should be a noobie issue but it makes me crazy hehe. Could anyone tell me what’s going on?. I’m following this guide http://guides.rubyonrails.org/working_with_javascript_in_rails.html, and with the following code my application does not recognize the action.

Hola Mundo con AJAX, version 2 Paint it red
2

I think the issue here is that you’re trying to use coffeescript inside a script tag.

My recommendation would be to put this inside a coffee file or translate to plain javascript.

My best,

Ian

3

Hello Alfredo,

The problem here is the script tag as you are using it without any attribute as type/language.

Please refer https://developer.mozilla.org/en/docs/Web/HTML/Element/script for more details. The script tag if not given type will be treated as JavaScript tag.

Hence in your case browser is considering that this script tag contains JavaScript code and giving such errors.

For using coffeescript in script tags you can refer http://forgivingworm.wordpress.com/2010/09/27/running-coffeescript-in-browser/

Thanks, Lauree Roberts Ruby on Rails Developer Allerin Technologies

4

Hello Lauree, I change the way to introduce Ajax on the application, I’m following the “Agile Web development for Rails 4.0”. This is the part of the part of the view related with the issue: <%= form_for(@comment) do |f| %> <% if @comment.errors.any? %>

<%= pluralize(@comment.errors.count, ‘error’) %> prohibited this comment from being saved:

    <% @comment.errors.full_messages.each do |msg| %>
  • <%= msg %>
    • <% end %>
r
<% end %>

<%= f.text_field :text , class:‘form-control’, required:‘’, placeholder: ‘What is your plan?’,style: ‘display:table-cell’%> <%= f.submit ‘Post’, class: ‘btn’, style: ‘display:table-cell’ %> <%= button_to ‘Post’, comments_path(comment_id: f), remote: true %>

<% end %> When ‘button_to’ is selected in the browser it goes to this action in the comments_controller.rb : def create @comment = Comment.new(comment_params) print 'ID of the user that already saved the comment: ’ + String(current_user.id) @comment.users_id = current_user.id respond_to do |format| if @comment.save format.html { redirect_to user_path(current_user.id) } format.js {} format.json { render action: ‘show’, status: :created, location: @comment } else format.html { render action: ‘new’ } format.json { render json: @comment.errors, status: :unprocessable_entity } end end end

But the line ‘format.js’ is not launching the file ‘create.js.erb’ that is in the same folder of the rest of the views of comments… When I check the log it creates the comment and redirect the page to “user_path” but never loads the js file.

Any idea?. I did try with the original app of the book and it works fine, so the problem is in my code.

Thanks & Best regards.

5

Hello Lauree,

I change the way to introduce Ajax on the application, I'm following the "Agile Web development for Rails 4.0".

This is the part of the part of the view related with the issue: <%= form_for(@comment) do |f| %>         <% if @comment.errors.any? %>             <div id="error_explanation">               <h2><%= pluralize(@comment.errors.count, 'error') %> prohibited this comment from being saved:</h2>

              <ul>                 <% @comment.errors.full_messages.each do |msg| %>                     <li><%= msg %></li>                 <% end %>               </ul> r             </div>         <% end %>       <p style= 'padding-top:10px;'>           <%= f.text_field :text , class:'form-control', required:'', placeholder: 'What is your plan?',style: 'display:table-cell'%>           <%= f.submit 'Post', class: 'btn', style: 'display:table-cell' %>           <%= button_to 'Post', comments_path(comment_id: f),                       remote: true %>       </p>

    <% end %>

When 'button_to' is selected in the browser it goes to this action in the comments_controller.rb :

def create     @comment = Comment.new(comment_params)     print 'ID of the user that already saved the comment: ' + String(current_user.id)     @comment.users_id = current_user.id

    respond_to do |format|       if @comment.save         format.html { redirect_to user_path(current_user.id) }         format.js {}         format.json { render action: 'show', status: :created, location: @comment }       else         format.html { render action: 'new' }         format.json { render json: @comment.errors, status: :unprocessable_entity }       end     end   end

But the line 'format.js' is not launching the file 'create.js.erb' that is in the same folder of the rest of the views of comments... When I check the log it creates the comment and redirect the page to "user_path" but never loads the js file.

Any idea?. I did try with the original app of the book and it works fine, so the problem is in my code.

Thanks & Best regards.

Try adding :remote => true to the form_for method call that defines the form. The issue, as I imagine it, is that the form is submitting when the button is pressed, and that will go to the .html handler, not the .js handler. You need to trap the entire form submission, not the click of one button, and redirect its action. That's what the rails_ujs script does when you add :remote => true to the form tag.

Walter

6

I can’t believe it , that was the error!. Thank you so much and sorry for the newbie question… :frowning:

7

I’m having a new issue related with this. I have been searching the reason of it but I cannot fix it. I have this button: <%= button_to ‘Go to Gallery’, loading_gallery_path, remote: true %> And this is the controller function: def gallery respond_to do |format| format.html { redirect_to user_path(current_user.id) } format.js format.json { render action: ‘show’, status: :created, location: @comment } end end This is the code of the ‘gallery.js.erb’ => $(‘#user-comments’).html(“<%= escape_javascript render(:partial => ‘change.html.erb’) %>”); And this is the template that the browser is not rendering: <% print ‘CHANGING’ %>

Testing

In the log of the application I can see that this template is being opened by the browser but never rendered in the screen. Below is the log:

8

I’m having a new issue related with this. I have been searching the reason of it but I cannot fix it. I have this button: <%= button_to ‘Go to Gallery’, loading_gallery_path, remote: true %> And this is the controller function: def gallery respond_to do |format| format.html { redirect_to user_path(current_user.id) } format.js format.json { render action: ‘show’, status: :created, location: @comment } end end This is the code of the ‘gallery.js.erb’ => $(‘#user-comments’).html(“<%= escape_javascript render(:partial => ‘change.html.erb’) %>”); And this is the template that the browser is not rendering: <% print ‘CHANGING’ %>

Testing

In the log of the application I can see that this template is being opened by the browser but never rendered in the screen. Below is the log:

Started POST “/users/1/gallery” for 127.0.0.1 at 2014-05-06 13:15:39 +0200 Processing by UsersController#gallery as JS Parameters: {“authenticity_token”=>“MQ2R+gPxDpCjEVzNrTheQD40nDUblLnlONls5ahub8E=”, “id”=>“1”} CHANGING Rendered users/_change.html.erb (0.1ms) Rendered users/gallery.js.erb within layouts/user-layout.html.erb (2.6ms) Completed 200 OK in 87ms (Views: 85.3ms | ActiveRecord: 0.0ms)

I can’t believe it , that was the error!. Thank you so much and sorry for the newbie question… :frowning:

Hello Lauree,

I change the way to introduce Ajax on the application, I’m following the “Agile Web development for Rails 4.0”.

This is the part of the part of the view related with the issue: <%= form_for(@comment) do |f| %>

    <% if @comment.errors.any? %>

        <div id="error_explanation">

          <h2><%= pluralize(@comment.errors.count, 'error') %> prohibited this comment from being saved:</h2>

          <ul>

            <% @comment.errors.full_messages.each do |msg| %>

                <li><%= msg %></li>

            <% end %>

          </ul>                                               r

        </div>

    <% end %>

  <p style= 'padding-top:10px;'>

      <%= f.text_field :text , class:'form-control', required:'', placeholder: 'What is your plan?',style:   'display:table-cell'%>

      <%= f.submit 'Post', class: 'btn', style: 'display:table-cell'   %>

      <%= button_to 'Post', comments_path(comment_id: f),

                  remote: true %>

  </p>

<% end %>

When ‘button_to’ is selected in the browser it goes to this action in the comments_controller.rb :

def create

@comment = Comment.new(comment_params)

print 'ID of the user that already saved the comment: ' + String([current_user.id](http://current_user.id))

@comment.users_id = [current_user.id](http://current_user.id)

respond_to do |format|

  if @comment.save

    format.html { redirect_to user_path([current_user.id](http://current_user.id)) }

    format.js {}

    format.json { render action: 'show', status: :created, location: @comment }

  else

    format.html { render action: 'new' }

    format.json { render json: @comment.errors, status: :unprocessable_entity }

  end

end

end

But the line ‘format.js’ is not launching the file ‘create.js.erb’ that is in the same folder of the rest of the views of comments… When I check the log it creates the comment and redirect the page to “user_path” but never loads the js file.

Any idea?. I did try with the original app of the book and it works fine, so the problem is in my code.

Thanks & Best regards.

Try adding :remote => true to the form_for method call that defines the form. The issue, as I imagine it, is that the form is submitting when the button is pressed, and that will go to the .html handler, not the .js handler. You need to trap the entire form submission, not the click of one button, and redirect its action. That’s what the rails_ujs script does when you add :remote => true to the form tag.

Walter

Hello Alfredo,

The problem here is the script tag as you are using it without any attribute as type/language.

Please refer https://developer.mozilla.org/en/docs/Web/HTML/Element/script for more details. The script tag if not given type will be treated as JavaScript tag.

Hence in your case browser is considering that this script tag contains JavaScript code and giving such errors.

For using coffeescript in script tags you can refer http://forgivingworm.wordpress.com/2010/09/27/running-coffeescript-in-browser/

Thanks,

Lauree Roberts

Ruby on Rails Developer

Allerin Technologies

Hi all,

I’m starting with Ajax but I have a issue, should be a noobie issue but it makes me crazy hehe. Could anyone tell me what’s going on?.

I’m following this guide http://guides.rubyonrails.org/working_with_javascript_in_rails.html, and with the following code my application does not recognize the action.

Hola Mundo con AJAX, version 2
Paint it red

– 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-ta...@googlegroups.com.

To post to this group, send email to rubyonra...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/4fbbcf42-b784-4a77-93c4-cbc59bda2175%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

9

Please someone? I really need this. :frowning:

Regards.

10

not sure because I need more info, but try changing the format line to the following:

format.js { render layout: false }

11

Hello Alfredo,

Your button_to tag is creating the form on the page which is sending post type request. When you are retrieving in controller action the request type should be ‘get’.

Please use link_to helper as follows:

= button_tag(link_to('Go to Gallery', loading_gallery_path, remote: true))

This will create a button tag with an anchor tag init.

When clicked on this link an remote request with will be sent controller action and your response js.erb will be rendered properly.

There may be an possibility that you rendered code is having any error while execution. Please debug the response in that case.

12

You had right.

Thank you so much.