I'm following the Beginning Rails 3, Updated book from Apress 2010. The problem I'm having is with loading a Template dynamically with Ajax using the jQuery adapter. Everything works but it appears to be rendering three times on the page.
Here is how I dynamically load it when the user clicks the "new comment" link.
views/articles/show.html.erb
<%= link_to "new comment",
new_article_comment_path(#article, :format => :js),
:remote => true,
:id => 'new_comment_link' %>
Then I render it as such.
views/comments/new.js.erb
$("<%= escape_javascript render :file => 'comments/new'," +
" :formats => [:html], :handlers => [:erb] %>")
.insertAfter('#comments');
Then I see this in the log.
Started GET "/articles/1/comments/new.js" for 127.0.0.1 at 2013-01-18 14:51:05 -0600
Processing by CommentsController#new as JS
Parameters: {"article_id"=>"1"}
Article Load (0.2ms) SELECT "articles".* FROM "articles" WHERE "articles"."id" = ? LIMIT 1 [["id", "1"]]
Rendered comments/new.html.erb (53.8ms)
Rendered comments/new.js.erb (54.6ms)
Completed 200 OK in 57ms (Views: 55.9ms | ActiveRecord: 0.2ms)
Notice it renders my erb and the js file? Somehow that ends up with showing up three times on my page.
Any clues on how to fix this? I'm using Rails 3.2.9, rails.js (latest), and jquery-1.9.0.
Thanks!
Solved it!
Turns out I was adding rails.js and jquery.js TWICE!
Here is the skinny: assets/javascripts/application.js is crucial for including javascript files into your app. Basically whatever gets defined there gets pushed out to the page. You simply need to make sure that it gets defined at least once in the app as such.
views/layouts/application.html.erb
<%= javascript_include_tag "application" %>
And that's it! The Ajax jQuery adapter should just work. Becareful not to add any additional files to the javascript folder as those will get pushed out as well and that's exactly what you don't want. Basically I was defining the adapter both through application.html.erb and manually by downloading both files. Hopefully this will help a lost poor soul somewhere along the way.
Happy Hacking.
Related
I'm just trying to learn a bit of jQuery with Rails at the moment. I'm following the example here:
Ideas on simple 'Hello World' Rails-Ajax Example?
My view looks like this:
/views/main/ajax_msg.erb
<div id="div_msg">
<%= link_to "Wow",
{:controller=>"main" , :action=>'ajax_msg' , :id=>'1'},
:remote => true,
:class => 'link1',
:update => "div_hello",
:id => 'link1'
%>
</div>
<div id="div_hello">
</div>
My controller looks like this:
/controllers/main_controller.rb
def ajax_msg
#msg1 = "Buenos Dias!"
respond_to do|format|
format.html
format.js
format.json
end
end
My javascript file looks like this:
/views/main/ajax_msg.js
jQuery('#div_hello').html("<%= #msg1 %>");
My /views/layouts/application.html.erb begins like this...
<!DOCTYPE html>
<html>
<head>
<title>SomeApp</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
My application.js contains...
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .
My console log shows me this:
Started GET "/main/ajax_msg?id=1" for 127.0.0.1 at 2013-07-09 21:44:57 +0100
Processing by MainController#ajax_msg as JS
Parameters: {"id"=>"1"}
Rendered main/ajax_msg.js within layouts/application (1.0ms)
Completed 200 OK in 19ms (Views: 19.0ms | ActiveRecord: 0.0ms)
I have tried many different combos by looking at other people's problems on related issues but nothing seems to work. I have tried the following:
- using $ instead of jQuery in the javascript file
- putting the javascript in application.js
- switching the order between stylesheet_link_tag and javascript_include_tag
Am I missing something quite basic here?
Thanks.
Try renaming /views/main/ajax_msg.js to /views/main/ajax_msg.js.erb so that file can handle embedded Ruby?
For debugging and to make sure it's rendering embedded ruby you can just try doing any other string in there:
jQuery('#div_hello').html("<%= puts 'blah' %>");
I think that is the problem.
1) File should be called js.erb, because, obvioulsy, if you are using Ruby variable inside, it should be extended ruby
2) From Jquery API:
Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
That means, that string should be wrapped with tags, if you are trying to set page element.
Try:
$('#div_hello').text("<%= #msg1 %>")
Also, if this doesn't work, try to escape javascript:
$('#div_hello').text("<%= j #msg1 %>")
I'm using Rails 2.3.8.
In my application.rhtml I have:
<%= javascript_include_tag "jquery.js"%>
And in my index.rhtml which uses application.rhtml for a layout I have:
<div id="search_residential"> <%= link_to "Residential",
"javascript:residentialSearchForm()", :onclick=> remote_function(:url => {:propertyType => 'residential', :controller => 'site', :action => 'searchform'}, :update => 'search_form', :method => :get)%></div>`
In my partial that should be rendered I have:
<%logger.debug "Residential Form Partial Rendered"%>
When I click the link my log outputs:
Processing SiteController#searchform (for 127.0.0.1 at 2012-10-05 11:11:02) [GET]
Parameters: {"controller"=>"site", "propertyType"=>"residential", "action"=>"searchform", "authenticity_token"=>"Iw3ID/4Lh5IReUwOnhhSUXfn2IIVUnYpqG1N7DE4BHg="}
Rendering site/searchform
Residential Form Partial Rendered
Rendered site/searchbar/_search_residential (5.2ms)
Rendered site/searchbar/_search_form (5.9ms)
Completed in 9ms (View: 7, DB: 0) | 200 OK [http://localhost/site/searchform?propertyType=residential&authenticity_token=Iw3ID%2F4Lh5IReUwOnhhSUXfn2IIVUnYpqG1N7DE4BHg%3D]
But nothing is shown on the website. If I remove the include for jQuery then the partial is rendered.
remote_function is a prototype helper and depends on prototype.js
Jquery would be conflicting at the $ namespace. Its advisable to not use prototype helpers.
Or You should initialize jquery in a noConflict mode.
This is an issue I have been working around for some time now thinking I would eventually stumble on an explaination. I have not and it's now becoming a little more problematic for me.
I used rails-generate-scaffold to create a simple (users and posts) application. This was done after installing jquery and jquery-ui. I added actions "login" and "auth" to the users controller. Login.html.erb contains some javascript that sends .ajax request to the users#auth action passing the login information (email and password) as parameters.
The the template auth.js.erb exists. The "auth" action responds to format.js. The request looks normal, but rails processes the request with the "show" action rather than the "auth" action.
In other words, a request to userscontrollers#auth (via .ajax) is being processed by userscontroller#show (as JS).
The problem goes away if I remove the "resources :users" route that scaffold added (the correct action is then called). But without this route other useful scaffold stuff becomes unuseable (like users#new).
From Gemfile: gem 'jquery-rails', '>=0.2.6'
Installed jQuery with: rails generate jquery:install --ui
From ../layouts/application.html.erb
<head>
<title>Tab1</title>
<%= stylesheet_link_tag :all %>
<%= stylesheet_link_tag 'jquery-ui-1.8.16.custom.css' %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'jquery.min.js' %>
<%= javascript_include_tag 'jquery.min.js', 'jquery-ui.min.js' %>
<%= csrf_meta_tag %>
</head>
Here is ./log/development.log to shows the request and the response.
Started GET "/users/auth/?email=steve&password=[FILTERED]&_=1326063255777" for 24.11.242.181 at 2012-01-08 17:53:45 -0500
Processing by UsersController#show as JS
Parameters: {"email"=>"steve", "password"=>"[FILTERED]", "_"=>"1326063255777", "id"=>"auth"}
^[[1m^[[36mUser Load (0.2ms)^[[0m ^[[1mSELECT `users`.* FROM `users` WHERE `users`.`id` = 0 LIMIT 1^[[0m
Completed 404 Not Found in 6ms
ActiveRecord::RecordNotFound (Couldn't find User with ID=auth):
app/controllers/users_controller.rb:43:in `show'
Suggests that the request --> GET "/users/auth/?email ... is being processed by UsersController#show as JS
Thanks
I have a form_tag that works fine using html, but when I use ajax with the remote => true I am getting this error:-
My terminal log shows:-
Started GET "/" for 127.0.0.1 at 2010-11-01 01:19:49 +0000
Processing by HomepagesController#index as HTML
Homepage Load (0.6ms) SELECT "homepages".* FROM "homepages"
Rendered homepages/index.html.erb within layouts/application (23.0ms)
Completed 200 OK in 40ms (Views: 27.3ms | ActiveRecord: 0.6ms)
Error during failsafe response: incompatible encoding regexp match (UTF-8 regexp with ASCII-8BIT string)
* then a load of cleaner.rb stuff
then:-
Started GET "/homepages?utf8=%E2%9C%93&search=hom" for 127.0.0.1 at 2010-11-01 01:19:56 +0000
Processing by HomepagesController#index as JS
Parameters: {"utf8"=>"✓", "search"=>"hom"}
Homepage Load (0.5ms) SELECT "homepages".* FROM "homepages" WHERE (section LIKE '%hom%')
Rendered homepages/index.js.erb (2.9ms)
Completed in 19ms
In my index.js.erb I have:-
$("testsearch").update("<%= escape_javascript(render(#homepages))%>");
and in my Controller I have:-
def index
#homepages = Homepage.search(params[:search])
respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => #homepages }
format.js { render :layout => false }
end
in my view I have:-
which prints #homepages using a table using <% #homepages.each do |homepage| %> which is not being updated.
Anyone have any ideas as to why I get this error.
I have cracked it by going onto an IRC chat room (irc.freenode.net RubyonRails) and a ProjectZen (human being somewhere out there in the ether) helped me to get it working.
Apparently what was happening was that I was following Ryan Bates who does many extremely good Railcast videos, but he builds on previous Railcast. Therefore in his 205 Railscast, which deals with Ajax calls, he did not mention that you must have:-
format.js in the action in the controller.
His xxxx.searchxxxxx needs to be created in the controller or model.
And that when I did :-
<%= render(#homepages)%> <!-- (in his case <%= render(#products)%>) -->
The render was looking for a partial called "_homepage" (not "homepages") (I did not even have a partial therefore I got the UTF8 to ASCII error).
And then in "_homepage" I would add my code to render the results.
What I have now done in my index.html.erb is to put <%= render(#homepages)%>, in the (div id = testsearch) in place of the code I use to render #homepages and then place that code in a partial "_homepage". Now I can use "_homepage" for the html and the Ajax call.
At the moment I have a slight problem in that it is rendering all the data in the"#homepages" as many times as the number of records. At the moment I do not know why, but at least the Ajax call is working.
I'm diving into Ruby on Rails and I'm experiencing a weird bug, using Rails 3.0.1 and Ruby 1.8.7. Using the generated scaffold code, my "Show" action is getting called when I'm expecting my "Destroy" action to get called. Here's the code...
routes.rb
webappdotcom::Application.routes.draw do
resources :projects
root :to => "home#index"
end
index.html.erb
<td><%= link_to 'Destroy', project, :confirm => 'Are you sure?', :method => :delete %></td>
actual HTML code that is rendered in browser
<td>Destroy</td>
server output when I click on the "Destroy" link
Started GET "/projects/12" for 127.0.0.1 at Wed Oct 20 23:39:37 -0500 2010
Processing by ProjectsController#show as HTML
Parameters: {"id"=>"12"}
Project Load (0.1ms) SELECT "projects".* FROM "projects" WHERE ("projects"."id" = 12) LIMIT 1
Rendered projects/show.html.erb within layouts/application (9.0ms)
Completed 200 OK in 77ms (Views: 13.3ms | ActiveRecord: 0.1ms)
You can see the "ProjectsController#show" action is being called, but I want the "Destroy" action to be called. Also, I noticed the browser isn't displaying the confirmation message "Are you sure?" either. Any ideas what could be causing this or what I'm missing?
Thanks so much!
This is because Rails 3 changed the way it uses javascript in forms. It used to add an onclick method to the link, but that goes against unobtrusive javascript. Now it just sets some tag attributes, and hooks into it with javascript in another file.
That page's layout (which is probably application.html.erb unless you've changed it) needs to have this line in the head section:
<%= javascript_include_tag :defaults %>
If this line is missing from your layout, that's the problem. Another possible cause could be if you've added the jQuery library to your app without adding the rails-specific jQuery library. Let me know how this works.
This may help you link_to with :method=>:delete not working ( Rails 3 ). Although in that article the edit is getting called instead. But the solution should work for show as well.