Getting started with Ajax

Alfredo Barrero

unread,

May 3, 2014, 2:24:32 PM5/3/14

to rubyonra...@googlegroups.com

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hola Mundo con AJAX, version 2</title>

<script>

      paintIt = (element, backgroundColor, textColor) ->       SHOW ERROS LIKE 'unresolved variable or type element'
              element.style.backgroundColor = backgroundColor
      if textColor?
              element.style.color = textColor

</script>

</head>
<body><a href="#" onclick="paintIt(this, '#990000')">Paint it red</a></body>
</html>

Benjamin Iandavid Rodriguez

unread,

May 3, 2014, 3:47:02 PM5/3/14

to rubyonra...@googlegroups.com

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

--
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/3bac38e2-4346-4f15-b04e-0fa4ef945979%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Lauree Roberts

unread,

May 5, 2014, 12:57:32 AM5/5/14

to rubyonra...@googlegroups.com

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

Alfredo Barrero

unread,

May 5, 2014, 7:22:58 AM5/5/14

to rubyonra...@googlegroups.com

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.

Walter Lee Davis

unread,

May 5, 2014, 7:47:28 AM5/5/14

to rubyonra...@googlegroups.com

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

> --
> 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.

Alfredo Barrero

unread,

May 5, 2014, 8:05:03 AM5/5/14

to rubyonra...@googlegroups.com

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

Alfredo Barrero

unread,

May 6, 2014, 7:19:30 AM5/6/14

to rubyonra...@googlegroups.com

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' %><p>Testing<p>

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:

Alfredo Barrero

unread,

May 6, 2014, 7:20:39 AM5/6/14

to rubyonra...@googlegroups.com

El martes, 6 de mayo de 2014 13:19:30 UTC+2, Alfredo Barrero escribió:

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' %><p>Testing<p>

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)

Alfredo Barrero

unread,

May 7, 2014, 5:47:38 AM5/7/14

to rubyonra...@googlegroups.com

Please someone? I really need this. :(

Regards.

mike2r

unread,

May 7, 2014, 12:05:08 PM5/7/14

to rubyonra...@googlegroups.com

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

format.js { render layout: false }

Lauree Roberts

unread,

May 8, 2014, 12:28:22 AM5/8/14

to rubyonra...@googlegroups.com

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.

Thanks & Regards,

Lauree

Ruby on Rails Developer

Allerin Technologies

--
You received this message because you are subscribed to a topic in the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/rubyonrails-talk/gju5JdKqU_k/unsubscribe.
To unsubscribe from this group and all its topics, 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/770b752c-2c6a-4d20-b50c-f7b420417601%40googlegroups.com.

Alfredo Barrero

unread,

May 12, 2014, 12:49:13 PM5/12/14

to rubyonra...@googlegroups.com

You had right.

Thank you so much.

Reply all

Reply to author

Forward