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

Rails
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 D.
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\n

\n \n <tr id=“current_item”>\n\n \n \n $111.00\n\n \n \n \n $111.00\n \n
4×Pragmatic Unit Testing (C#)Total
\n\n
"); $("current_item").visualEffect("highlight", {"startcolor": "#88ff88", "endcolor": "#114411"}); } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.update(\"cart\", \"
Your Cart
\n\n \n \n\n \n \n $111.00\n\n \n \n \n $111.00\n \n
4×Pragmatic Unit Testing (C#)
Total
\n\n
\");\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

On 9/23/06, bradjpeek [email protected] wrote:

if I actually download the file or if I cancel – I can refresh the
class="item-price">$111.00\n\n \n <tr

4×\n Pragmatic Unit Testing (C#)\n <td

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.

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

On Sep 23, 2006, at 1:54 PM, bradjpeek wrote:

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.

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

Dave

5

Dave T. 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:

Pragprog Books Online Store <%= stylesheet_link_tag "depot", :media => "all" %> <%= javascript_include_tag :defaults %>

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

On Sep 24, 2006, at 1:46 AM, bradjpeek wrote:

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.

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

7

On Sep 24, 2006, at 20:31, bradjpeek wrote:

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?

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

8

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?

9

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

depot> 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\n

\n \n <tr id=“current_item” >\n\n \n \n $179.70\n\n \n \n \n \n $55.50\n\n \n \n \n $235.20\n \n
6×Pragmatic Project Automation
2×Pragmatic Unit Testing (C#)
Total
\n\n\n \n\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.

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

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

10

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