Ajax example from "Agile Web Dev w/Rails" not working right

rubyonrails-talk
1

I'm a complete novice when it comes to web development, but I'm going through the examples in the 2nd edition of the Agile Web Development With Rails book and have hit a snag.

I've added the AJAX code to update the shopping cart immediately upon pressing Add To Cart on one of the line items. However, as soon as I click Add To Cart a download menu pops up. It does not seem to matter if I actually download the file or if I cancel -- I can refresh the page and the shopping cart does indeed get updated.

The name of the file to be downloaded is a large number (e.g. 300000000 ) that seems to be tied to the item I select. The downloaded file contents is as follows:

try { Element.update("cart", "<div class=\"cart-title\">Your Cart</div>\n<table>\n \n <tr id=\"current_item\">\n\n <td>4&times;</td>\n <td>Pragmatic Unit Testing (C#)</td>\n <td class=\"item-price\">$111.00</td>\n</tr>\n \n <tr class=\"total-line\">\n <td colspan=\"2\">Total</td>\n <td class=\"total-cell\">$111.00</td>\n </tr>\n</table>\n\n<form method=\"post\" action=\"/store/empty_cart\" class=\"button-to\"><div><input type=\"submit\" value=\"Empty cart\" /></div></form>"); $("current_item").visualEffect("highlight", {"startcolor": "#88ff88", "endcolor": "#114411"}); } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.update(\"cart\", \"<div class=\\"cart-title\\">Your Cart</div>\n<table>\n \n <tr id=\\"current_item\\">\n\n <td>4&times;</td>\n <td>Pragmatic Unit Testing (C#)</td>\n <td class=\\"item-price\\">$111.00</td>\n</tr>\n \n <tr class=\\"total-line\\">\n <td colspan=\\"2\\">Total</td>\n <td class=\\"total-cell\\">$111.00</td>\n </tr>\n</table>\n\n<form method=\\"post\\" action=\\"/store/empty_cart\\" class=\\"button-to\\"><div><input type=\\"submit\\" value=\\"Empty cart\\" /></div></form>\");\n$(\"current_item\").visualEffect(\"highlight\", {\"startcolor\": \"#88ff88\", \"endcolor\": \"#114411\"});'); throw e }

Any idea what is happening here, and more importantly, how to fix it?

I should mention that even though the book recommends downloading the Edge Rails version, I am using the current version that comes with InstantRails. I suppose that could have something to do with it.

2

You should update to the latest version of Rails. From the Instant Rails main menu selection “Rails Applications > Open Ruby Console Window”, and then execute the command:

gem install rails --include-dependencies

You may also need to update the rails files in your rails app from the console by moving in to its directory and running the command “rails .”

Curt

3

Curt - Updating didn't seem to have an effect.

I followed your suggestion to update Rails, first with "gem install rails --include-dependencies" and then "rails ." from the C:\InstantRails\rails_apps\depot directory.

I let it replace every file that it asked about. Then I restarted everything.

I ran from both IE and from FireFox, with the only difference being that in FireFox I don't get a download box but I get a page with the downloaded code (see original post for code). I can hit the back button and then the refresh button and I do see that the cart has been updated but the AJAX part of it isn't working.

I did a search on this group and the WEB but didn't find where others have ran into this. It is quite likely that I've not followed the instructions exactly, but I would have expected to find where someone else has done the same thing. I'd hate to think I was uniquely dense.

I may see about trying Edge Rails -- it is just that the InstantRails approach was sooo easy.

4

My guess is that you haven't included the javascript libraries in your layout.

Dave

5

Dave Thomas wrote:

My guess is that you haven't included the javascript libraries in your layout.

The first few lines of ..\depot\app\views\layouts\store.rhtml contains: <html> <head>   <title>Pragprog Books Online Store</title>   <%= stylesheet_link_tag "depot", :media => "all" %>   <%= javascript_include_tag :defaults %> </head>

Is that what you are talking about? I also looked at the WEBrick output and the development.log file but don't see anything obvious, although I don't know what it SHOULD say so there may be clues that I am missing.

I verified that scripting is enabled in the browser options. There is a reference on pg 117 of the PDF to a more detailed AJAX debugging section (sec.debug.ajax) but I haven't found it.

6

The fact that you're seeing the JavaScript code created by the RJS template in the browser window means that the original page is failing to handle the response correctly.

If you have the javascript libraries included in the layout, then another possibility is that you aren't using 'form_remote_tag' to submit the request. Check back in your index.rhtml file.

Also: if you download the application from our site, does that version run OK? If so, then there's probably a simple typo somewhere in your application. If it doesn't run, then we're looking at some kind of configuration issue.

Cheers

Dave Thomas

7

If you have the javascript libraries included in the layout, then another possibility is that you aren't using 'form_remote_tag' to submit the request. Check back in your index.rhtml file.

SUCCESS!! The index.rhtml file was the problem. Thanks.

I have a follow-up question, if I may: After I corrected the index.rhtml file, I got the following error when I loaded the store page:

undefined method `sum' for :Array

I found where someone had made an errata entry (pg 121) about this and suggested an alternative to the cart.rb code for the total_items and total_price methods. You replied in the errata that he should update rails. I assume this means to the EDGE rails version. Correct?

I am still running the InstantRails version because it was so easy to get running, so I used his alternative code which did work. Should I just bite the bullit and install the edge version? If I do, can I install it into the InstantRails directories or is it more complicated than that?

8

If you want to use the new sum-ability of arrays, you’ll need Edge. There are instructions on installing it in the Rails in Depth chapter. There’s also a beta gems version of the first release candidate of 1.2, but I’ve never tried installing it under Instant Rails.

Hopefully 1.2 will go live soon, and these versioning issues will evaporate. Until then, I really don’t have much choice–I have to document what will become 1.2 in the book.

Cheers

Dave

9

Dave Thomas wrote:

If you have the javascript libraries included in the layout, then another possibility is that you aren't using 'form_remote_tag' to submit the request. Check back in your index.rhtml file.

I had the same problem as bradjpeek, so I had a look here, and found that I was using the link in the images that I coded, instead of the button with the 'form_remote_tag' stuff.

Using the button it works fine, but using the 'link_to' from the image it crashes in the way bradjpeek posted.

Now I wonder how to make the image link work with the 'form_remote_tag'. Let's code some ruby :slight_smile:

Cheers

10

Hi Dave,

If you have the javascript libraries included in the layout, then another possibility is that you aren't using 'form_remote_tag' to submit the request. Check back in your index.rhtml file.

I have same problem. I use Ubuntu 7.1.0 and firefox 3. when I run

ruby script/server I saw...

** Mongrel available at 0.0.0.0:3000

when click on 'Add To Cart' I saw firefox pop up error dialog box with this.

RJS error: TypeError: $(element) is null

When I click on OK button on this dialog box Firefox show next error dialog box with this.

Element.update("cart", "<div class=\"cart-title\">Your Cart</div>\n<table>\n \n <tr id=\"current_item\" >\n\n <td>6&times;</td>\n <td>Pragmatic Project Automation</td>\n <td class=\"item-price\" >$179.70</td>\n</tr>\n <tr>\n \n <td>2&times;</td>\n <td>Pragmatic Unit Testing (C#)</td>\n <td class=\"item-price\" >$55.50</td>\n</tr>\n \n <tr class=\"total-line\">\n <td colspan=\"2\">Total</td>\n <td class=\"total-cell\">$235.20</td>\n </tr>\n</table>\n\n<form action=\"/store/empty_cart\" method=\"post\" onsubmit=\"new Ajax.Request('/store/empty_cart', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;\">\n <input name=\"commit\" type=\"submit\" value=\"Empty cart\" />\n</form>\n\n"); $("current_item").visualEffect("highlight", {startcolor: "#88ff88", endcolor: "#114411"});

Note that in my index.rhtml I have this

    <% form_remote_tag :url => { :action => :add_to_cart, :id => product } do %>       <%= submit_tag "Add to Cart" %>     <% end %>

And in my layout store.rhtml I have this.

<head>   <%= stylesheet_link_tag "depot", :media => "all" %>   <%= javascript_include_tag :defaults %> </head>

I use the code of the 2nd edition of the book and It has been working like a charm from iteration A1 to D1. Only this AJAX code has issue.

Thanks for your suggestion!

Tom Doan