27 Sep 2011, 17:51
Generic-user-small

Javier Q (7 posts)

Hello,

I have a problem with Task F before posting here I have searched for some help here but I didn’t find any The problem… well it’s not a problem because everything workafter doing what the book says until iteration F3, but I there’s no AJAX, it refreshes in order to show the cart items when I see the source in the browser I can’t find the create.js.rjs but found this:

link href=”/assets/scaffold.css” media=”screen” rel=”stylesheet” type=”text/css” /> link href=”/assets/depot.css?body=1” media=”all” rel=”stylesheet” type=”text/css” /> script src=”/assets/default.js” type=”text/javascript”></script>

As I said it works, but not as it should

Hope someone may have found a solution

28 Sep 2011, 01:06
Samr_small_pragsmall

Sam Ruby (584 posts)

Check app/views/layouts/application.html.erb. In Rails 3.0 applications, one would typically find a line that looks like the following:

<%= javascript_include_tag :defaults %>

In Rails 3.1, what you want to have instead:

<%= javascript_include_tag "application" %>
28 Sep 2011, 03:18
Generic-user-small

Javier Q (7 posts)

Thanks for your reply Well now it doesn’t refresh everytime I click on the button “Add to cart” but if I want to display the cart I have to refresh it myself… And in the console where I started the server (rails server) I found this

Processing by LineItemsController#create as JS Parameters: {“product_id”=>”3”, “authenticity_token”=>”ZRvOUrF6E7pu688qrqTmxFHkdcTxgViPxcIzXi+QQJI=”} Cart Load (0.2ms) SELECT “carts”.* FROM “carts” WHERE “carts”.”id” = ? LIMIT 1 [[“id”, 22]] Product Load (0.3ms) SELECT “products”.* FROM “products” WHERE “products”.”id” = ? ORDER BY title LIMIT 1 [[“id”, “3”]] LineItem Load (0.4ms) SELECT “line_items”.* FROM “line_items” WHERE “line_items”.”cart_id” = 22 AND “line_items”.”product_id” = 3 LIMIT 1 (0.4ms) UPDATE “line_items” SET “updated_at” = ‘2011-09-28 03:09:58.704949’, “quantity” = 3 WHERE “line_items”.”id” = 57 Completed 500 Internal Server Error in 223ms

ActionView::MissingTemplate (Missing template line_items/create, application/create with {:locale=>[:en, :en], :formats=>[:js, :html], :handlers=>[:builder, :erb, :coffee]}. Searched in: * “[PATH_TO]/rdepot/app/views” ):

And that’s only the beginning because the rest has this pattern

Started GET “/assets/depot.css?body=1” for 127.0.0.1 at Tue Sep 27 22:10:01 -0500 2011 Served asset /depot.css - 304 Not Modified (0ms)

maybe there’s something I missing

28 Sep 2011, 06:28
Samr_small_pragsmall

Sam Ruby (584 posts)

Missing Template? Check to make sure that app/views/line_items/create.js.erb is present.

Served asset – 304 Not Modified is good news.

28 Sep 2011, 12:35
Generic-user-small

Javier Q (7 posts)

Well in the book said create.js.rjs , and I’ve changed but it’s the same when I click on the button it’s not refreshing, but the cart it’s not showing the products. It only shows them when I press F5 … This is what appears in terminal when I hit F5

Started GET “/” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Processing by StoreController#index as HTML Product Load (0.3ms) SELECT “products”.* FROM “products” ORDER BY title Cart Load (0.3ms) SELECT “carts”.* FROM “carts” WHERE “carts”.”id” = ? LIMIT 1 [[“id”, 27]] Rendered store/index.html.erb within layouts/application (12.6ms) LineItem Load (0.3ms) SELECT “line_items”.* FROM “line_items” WHERE “line_items”.”cart_id” = 27 Product Load (0.3ms) SELECT “products”.* FROM “products” WHERE “products”.”id” = 2 ORDER BY title LIMIT 1 Product Load (0.3ms) SELECT “products”.* FROM “products” WHERE “products”.”id” = 3 ORDER BY title LIMIT 1 Rendered line_items/_line_item.html.erb (8.5ms) Rendered carts/_cart.html.erb (33.9ms) Completed 200 OK in 209ms (Views: 175.1ms | ActiveRecord: 3.6ms)

Started GET “/assets/depot.css?body=1” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Served asset /depot.css - 304 Not Modified (0ms)

Started GET “/assets/line_items.js?body=1” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Served asset /line_items.js - 304 Not Modified (0ms)

Started GET “/assets/carts.js?body=1” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Served asset /carts.js - 304 Not Modified (0ms)

Started GET “/assets/jquery.js?body=1” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Served asset /jquery.js - 304 Not Modified (0ms)

Started GET “/assets/jquery_ujs.js?body=1” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Served asset /jquery_ujs.js - 304 Not Modified (0ms)

Started GET “/assets/store.js?body=1” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Served asset /store.js - 304 Not Modified (0ms)

Started GET “/assets/products.js?body=1” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Served asset /products.js - 304 Not Modified (0ms)

Started GET “/assets/application.js?body=1” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Served asset /application.js - 304 Not Modified (1ms)

Started GET “/assets/logo.png” for 127.0.0.1 at Wed Sep 28 07:30:32 -0500 2011 Served asset /logo.png - 304 Not Modified (0ms)

And this is what I have in create.js.erb

//$(‘#cart’).html(“<%=j render @cart %>”); page.replace_html(‘cart’, render(@cart))

page[:current_item].visual_effect :highlight, :startcolor => “#88ff88”, :endcolor => “#114411”

The first line is commented because what appears in the book is the second (I found the first line over the internet)

28 Sep 2011, 12:44
Samr_small_pragsmall

Sam Ruby (584 posts)

The line you have commented out is what you need for Rails 3.1. The line you don’t have commented out is for Rails 3.0. The AJAX chapter had to be significantly changed in order to work with Rails 3.1.

28 Sep 2011, 13:24
Generic-user-small

Javier Q (7 posts)

well it keeps doing the same… It is not working as it should, I’m using ruby 1.8.7 is it ok?

28 Sep 2011, 13:57
Samr_small_pragsmall

Sam Ruby (584 posts)

1.8.7 is fine. I don’t see create.js being served, so that’s the problem. Perhaps you mixed Rails 3.0 and Rails 3.1 configuration someplace, but I can’t tell from the information you have provided.

You can download the complete source, which includes both the rails30 and rails31 versions. I also have published complete running scenarios with various versions of Rails and Ruby. Perhaps you can use this information to compare what you have to what is known to work?

28 Sep 2011, 19:44
Generic-user-small

Vsevolod (2 posts)

I have the same issue and I haven’t find the solution yet. You can see my code hear https://github.com/vsorlov/depot

28 Sep 2011, 19:52
Generic-user-small

Vsevolod (2 posts)

Already solved it. I was wrong in using symbols “#” to comment in create.js. Javier Q, you should rename create.js.rjs to create.js.erb.

29 Sep 2011, 01:53
Samr_small_pragsmall

Sam Ruby (584 posts)

Another thing I should have mentioned: if you have the P1.0 printing of the book and are trying to do the AJAX chapter using Rails 3.1, peek ahead to chapter 26.4 to see the JQuery equivalents for each of the RJS statements that you find.

29 Sep 2011, 03:34
Generic-user-small

Javier Q (7 posts)

Yes I made that changes yesterday, but then I had the same problems I really don’t know what I did but it’s now working, I copied the assessts directory of the sourcecode to my directory and after that the AJAX works I don’t really know why because I’ve compared the files on each directory and were the same, maybe it’s because I now have ruby 1.9.2, but thanks for your help and I may have another questions in another occassion.

Thanks :)

28 Dec 2011, 11:27
Screen shot 2011-12-28 at 9.42.55 am_pragsmall

E M (5 posts)

I am having similar issues following “Agile Web Dev with Rails” and Rails 3.1.3.

After change the js.rjs file to js.erb, and the contents:

page.replace_html(‘cart’, render(@cart)) to $(’#cart’).html(”<%=j render @cart %>”); ( also tried $(’#cart’).html(”<%=escape_javascript(render(@cart)) %>”); )

I seem to have success, at least when looking at the server output. However, the page displayed in the browser does not change, and I do not see the updated cart unless I do a refresh, or (obviously) take out the :remote=>true on the button_to function.

Doing a google search, I did not find any authoritative information on how rails 3.1 ajax might work differently from earlier versions. I know I probably could find it, but at this point, after working on this for two days I am hoping that someone here can point me in the right direction.

My rails version is 3.1.3, the ruby version is ruby 1.8.7 (2010-01-10 patchlevel 249) [universal-darwin11.0]. I’m using Safari on Mac OS X 10.7.2

Here is the output of my server log.

Started POST “/line_items?product_id=1” for 127.0.0.1 at Wed Dec 28 01:24:50 -1000 2011 Processing by LineItemsController#create as JS Parameters: {“product_id”=>”1”, “authenticity_token”=>”O8X5wlqwajVCJNiMntI4po+rmef/8hOU0ejeEZhj9pE=”} Cart Load (8.8ms) SELECT “carts”.* FROM “carts” WHERE “carts”.”id” = ? LIMIT 1 [[“id”, 31]] Product Load (0.4ms) SELECT “products”.* FROM “products” WHERE “products”.”id” = ? ORDER BY title LIMIT 1 [[“id”, “1”]] LineItem Load (0.3ms) SELECT “line_items”.* FROM “line_items” WHERE “line_items”.”cart_id” = 31 AND “line_items”.”product_id” = 1 LIMIT 1 SQL (5.1ms) INSERT INTO “line_items” (“cart_id”, “created_at”, “product_id”, “quantity”, “updated_at”) VALUES (?, ?, ?, ?, ?) [[“cart_id”, 31], [“created_at”, Wed, 28 Dec 2011 11:24:52 UTC +00:00], [“product_id”, 1], [“quantity”, 1], [“updated_at”, Wed, 28 Dec 2011 11:24:52 UTC +00:00]] LineItem Load (0.3ms) SELECT “line_items”.* FROM “line_items” WHERE “line_items”.”cart_id” = 31 Product Load (0.3ms) SELECT “products”.* FROM “products” WHERE “products”.”id” = 2 ORDER BY title LIMIT 1 Product Load (0.3ms) SELECT “products”.* FROM “products” WHERE “products”.”id” = 1 ORDER BY title LIMIT 1 Rendered line_items/_line_item.html.erb (12.5ms) Rendered carts/_cart.html.erb (21.3ms) Rendered line_items/create.js.erb (36.0ms) Completed 200 OK in 279ms (Views: 74.3ms | ActiveRecord: 16.8ms)

28 Dec 2011, 12:58
Samr_small_pragsmall

Sam Ruby (584 posts)

E M: I use Firefox (and Firebug), but you might be able to do the same things with Safari’s Web Inspector has most of the same functionality.

Based on what you have described, the button did send a “remote” request to the server, and the server produced a response.

The first thing to verify (view-source will suffice) is that your page has an element with an id of cart:

<div id="cart" style="display: none">

</code>

Next, enable Tools => Web Developer => Web Console, and issue your request. If there are any JavaScript errors, they will show up in the console. The console will also show when a POST request is issued, and what the HTTP response is.

If this doesn’t show the problem, enable Tools => Web Developer => Firebug => Open Firebug. Click on the Net tab, then XHR. Now issue the request again. You should see a POST line show up in Firebug. Click on the +, then click on response. What you should see should look something like:

$('#cart').html("<div class=\"cart_title\">Your Cart<\/div>\n...<\/div>\n");

</code>

28 Dec 2011, 19:41
Screen shot 2011-12-28 at 9.42.55 am_pragsmall

E M (5 posts)

Mr Ruby,

Thank you for your response to my issue. It is appreciated. Your book is a wonderful read, especially for those of us who are new to RoR.

I did as you instructed, and verified that a div with id=”cart was properly defined within the store’s index page. Other than the inlined style attribute, it is there (and I added the style=”display: none” attribute, though it should not matter for the functioning of the AJAX).

The web console shows no errors.

[09:20:14.448] POST http://localhost:3000/line_items?product_id=1 [HTTP/1.1 200 OK  283ms]

Lastly, the response displayed in the Firebug XHR tab seems to be the same form as you example. I am pasting the entire response, just incase someone can see an important difference that I might miss, or not understand. However, to my admittedly amateur eyes, it looks correct.

` $(’#cart’).html(”<div class="cart_title">Your Cart<\/div>\n<table border="0">\n <tr>\n <tr class="current_item">\n <td>3×<\/td>\n <td> Web Design for Developers<\/td>\n <td class="line_item_price">XXX$149.85<\/td>\n<\/tr>\n\n \n<\/div>\n\n<tr class="total_line">\n<td colspan="2">Total<\/td>\n<td class="total_cell">$149.85<\/td>\n<\/tr>\n<\/table>\n <form action="/carts/33" class="button_to" method="post"><div><input name="_method" type="hidden" value="delete" /><input data-confirm="Are you sure?" type="submit" value="Empty cart" /><input name="authenticity_token" type="hidden" value="D9Wdi2ppVR3vB8fLD0MQ3wKVgREE1FyZeq/aJ91A/8A=" /><\/div><\/form>”);

1 request

`

Any additional help or pointers is very much appreciated. I have a project that I would love to use RoR on, and even without AJAX, it would be a terrific fit. However, this would really be icing on the cake if I could update parts of the page dynamically as you illustrated in the “Add a Dash of AJAX” chapter.

Sincerely, E M

28 Dec 2011, 19:58
Samr_small_pragsmall

Sam Ruby (584 posts)

First, I will assume that the “1 request” is on the next line? If that were to be a part of the response, you would get a JavaScript error.

Looking at the response itself, I see “smart” quotes in places - backtics instead of apostrophe’s around #cart, and the first and last double quote on the call to html is a close quote. I don’t know if this was a part of the response or was mangled by this forum software. But in any case, try doing this again, then select and copy the entire response to the clipboard. Then select the console tab. At the bottom of the screen you should see three greater than signs. Paste the response there then hit enter.

If the response is correct, it should update the cart. If not, you should see the error. If you press the up-arrow key you should be able to retrieve the text, edit it, and press enter again. Once you get it working, change the code on your server to produce the response that works.

28 Dec 2011, 21:40
Screen shot 2011-12-28 at 9.42.55 am_pragsmall

E M (5 posts)

Mr Ruby,

Thank you for your help. The curly quotes were actually in my program(!). They were an unintented artifact of copying this code from another forum. After correcting the quotes in create.js.erb, the data still did not display. However, removing the style= “display:none” on the cart div allowed the cart to display.

Obviously, there is work I still need to do, but AJAX is working :)

Thank you for you help, and your excellent book.

E M

22 Jan 2012, 18:42
Avatar_rasterboy_pragsmall

Cube Websites (1 post)

Hello,

I just wanted to share after having worked through this superb book, and then stumbling to a point where I was pulling my hair out trying to find out what the hell I was doing wrong.

Anyway, the first issue I had was:

ActionView::MissingTemplate (Missing template line_items/create, application/create with {:handlers=>[:erb, :builder, :coffee], :formats=>[:js, :html], :locale=>[:en, :en]}. Searched in:
  * "F:/Ruby/depot/app/views"
):

Which is solved by changing the extension of .rjs to .erb

The next issue I had was absolutely nothing happening when I clicked the button, but if I refreshed the page the cart would update.

I inspected the request with Firebug, and saw that it was posting to the server, and the response was my exact JavaScript code. This was because the contents of the JavaScript file were in Prototype, and Rails 3.1 uses jQuery.

To solve this I went to Chapter 26.4 and found the jQuery equivalent of the code, which is:

$('#cart').html("<%= escape_javascript(render(@cart)) %>");

Hope this helps someone else. I’m coming from a PHP background and the fact that Rails even offers this functionality out of the box is a massive win for Rails :D

26 Feb 2012, 16:11
Generic-user-small

Rich Ward (1 post)

Just wanted to add one comment on this. First, I appreciate everyone’s helpful suggestions here on this issue. For me, the Add to Cart action worked, the cart just didn’t reload. I tried all the suggestions and did not find success. There isn’t much code to review, so I must have gone over it all 4 or 5 times and I know I had this feature working when I did the depot app using a previous edition of this book with Ruby 1.87. So, I didn’t think it was browser related. I didn’t see any errors or helpful info in the log.

It turns out that I had a simple typo in create.js.erb. Where it should be html, I had typed hmtl. Simple mistake, but easily overlooked when reviewing code for more substantive errors.

So, if nothing else works for you, check your spelling on all the simple stuff, too. I almost didn’t post this, but if it saves somebody else an hour or so then I guess it is worth some embarrassment for me. :-)

26 Aug 2012, 09:06
Mathayus_pragsmall

Daniel-Yan (2 posts)

Followed by E M ,if I remove the style= “display:none” on the cart div like you, the cart does display,and the AJAX is working too,but the cart still displaying when empty,I don’t know why ?

29 Jan 2013, 02:01
Generic-user-small

Gabriel Gtz (1 post)

I tried all the above solutions and ajax worked after all the changes you suggested plus leavin my app/layouts/application.html.erb with this lines

<%= stylesheet_link_tag “application” %> <%= javascript_include_tag “application” %> <%= csrf_meta_tag %>

instead of

<%= stylesheet_link_tag “scaffold” %> <%= stylesheet_link_tag “depot”, :media => “all” %> <%= javascript_include_tag :defaults %> <%= csrf_meta_tags %> i don’t know how or why but this (I repeat) worked.

great book!!

02 Feb 2013, 14:19
3721_pragsmall

Huaming Shen (1 post)

After I have change the create.js.erb.A new problem comes. After I clicked the button ‘Add to Cart’,the cart in side shows two items,and after I relod the page, it shows one item. It happened when I add a new product to cart. Can someone help me?

  You must be logged in to comment