RJS error: TypeError: null value....

...or TypeError: object has no properties for FireFox, and a [object Error} in IE when using “respond_to { |format| format.js }”

Hello,

So far great book but this error has stopped me and I cannot move forward (I tried). I have read all of the posts here, double checked my code, checked all of the troubleshooting tips on page 132, experimented a little and still cannot get a clue as to what’s wrong. Please help because I must get past this.

Symptoms:
I click on an Add to Cart Item and get an RJS error dialog box followed by another dialog box with the portion of the code below within the try block.

try {
Element.update(“cart”, ”\n\u003Ch1\u003EYour Pragmatic Cart\u003C/h1\u003E\n\u003Cdiv class=\”cart-title\”\u003EYour Cart\u003C/div\u003E\n\u003Ctable\u003E\n\t\n\t\u003Ctr\u003E\n\n\t\u003Ctd\u003E1\u0026times;\u003C/td\u003E\n\t\u003Ctd\u003EPragmatic Project Automation\u003C/td\u003E\n\t\u003Ctd class=\”item-price\”\u003E$29.95\u003C/td\u003E\n\u003C/tr\u003E\n\n\t\u003Ctr id=\”current_item\”\u003E\n\n\t\u003Ctd\u003E1\u0026times;\u003C/td\u003E\n\t\u003Ctd\u003EMy Cat Picture\u003C/td\u003E\n\t\u003Ctd class=\”item-price\”\u003E$0.01\u003C/td\u003E\n\u003C/tr\u003E\n\n\t\u003Ctr class=\”total-line\”\u003E\n\t\t\u003Ctd colspan=\”2\”\u003ETotal\u003C/td\u003E\n\t\t\u003Ctd class=\”total-cell\”\u003E$29.96\n\t\u003C/tr\u003E\n\u003C/table\u003E\n\n\n\n\u003Cform method=\”post\” action=\”/store/empty_cart\” class=\”button-to\”\u003E\u003Cdiv\u003E\u003Cinput type=\”submit\” value=\”Empty Cart\” /\u003E\u003Cinput name=\”authenticity_token\” type=\”hidden\” value=\”c32e382c02901e70877453742461b3f550effce9\” /\u003E\u003C/div\u003E\u003C/form\u003E\n”);
$(“current_item”).visualEffect(“highlight”, {“endcolor”: ”#114411”, “startcolor”: ”#88ff88”});
} catch (e) { alert(‘RJS error:\n\n’ + e.toString()); alert(‘Element.update(\”cart\”, \”\\n\\u003Ch1\\u003EYour Pragmatic Cart\\u003C/h1\\u003E\\n\\u003Cdiv class=\\\”cart-title\\\”\\u003EYour Cart\\u003C/div\\u003E\\n\\u003Ctable\\u003E\\n\\t\\n\\t\\u003Ctr\\u003E\\n\\n\\t\\u003Ctd\\u003E1\\u0026times;\\u003C/td\\u003E\\n\\t\\u003Ctd\\u003EPragmatic Project Automation\\u003C/td\\u003E\\n\\t\\u003Ctd class=\\\”item-price\\\”\\u003E$29.95\\u003C/td\\u003E\\n\\u003C/tr\\u003E\\n\\n\\t\\u003Ctr id=\\\”current_item\\\”\\u003E\\n\\n\\t\\u003Ctd\\u003E1\\u0026times;\\u003C/td\\u003E\\n\\t\\u003Ctd\\u003EMy Cat Picture\\u003C/td\\u003E\\n\\t\\u003Ctd class=\\\”item-price\\\”\\u003E$0.01\\u003C/td\\u003E\\n\\u003C/tr\\u003E\\n\\n\\t\\u003Ctr class=\\\”total-line\\\”\\u003E\\n\\t\\t\\u003Ctd colspan=\\\”2\\\”\\u003ETotal\\u003C/td\\u003E\\n\\t\\t\\u003Ctd class=\\\”total-cell\\\”\\u003E$29.96\\n\\t\\u003C/tr\\u003E\\n\\u003C/table\\u003E\\n\\n\\n\\n\\u003Cform method=\\\”post\\\” action=\\\”/store/empty_cart\\\” class=\\\”button-to\\\”\\u003E\\u003Cdiv\\u003E\\u003Cinput type=\\\”submit\\\” value=\\\”Empty Cart\\\” /\\u003E\\u003Cinput name=\\\”authenticity_token\\\” type=\\\”hidden\\\” value=\\\”c32e382c02901e70877453742461b3f550effce9\\\” /\\u003E\\u003C/div\\u003E\\u003C/form\\u003E\\n\”);\n$(\”current_item\”).visualEffect(\”highlight\”, {\”endcolor\”: \”#114411\”, \”startcolor\”: \”#88ff88\”});’); throw e }

I was able to get this try block above by clicking on the images. It returns a page and not a dialog box.

If I comment out the “respond_to { |format| format.js }” line in the add_to_cart method (see store_controller.rb) then use “redirect_to_index” in it’s place, clicking the image returns to me expected functionality on the page with the following output added to the development.log file:

Processing StoreController#add_to_cart (for 127.0.0.1 at 2008-06-24 14:50:13) [GET] Session ID: 8cff562dcdfcd4fb9787f48188e1afb4 Parameters: {“action”=>”add_to_cart”, “id”=>”1”, “controller”=>”store”} Product Columns (0.015000) SHOW FIELDS FROM `products` Product Load (0.000000) SELECT * FROM `products` WHERE (`products`.`id` = 1) 
Redirected to http://localhost:3000/store
Completed in 0.01500 (66 reqs/sec) | DB: 0.01500 (100%) | 302 Found [http://localhost/store/add_to_cart/1]

Processing StoreController#index (for 127.0.0.1 at 2008-06-24 14:50:14) [GET] Session ID: 8cff562dcdfcd4fb9787f48188e1afb4 Parameters: {“action”=>”index”, “controller”=>”store”} Product Load (0.000000) SELECT * FROM `products` ORDER BY title
Rendering template within layouts/store
Rendering store/index Product Columns (0.000000) SHOW FIELDS FROM `products`
Rendered store/_cart_item (0.00000)
Rendered store/_cart_item (0.00000)
Rendered store/_cart (0.00000)
Completed in 0.01500 (66 reqs/sec) | Rendering: 0.01500 (100%) | DB: 0.00000 (0%) | 200 OK [http://localhost/store]

Clicking on the “Add to Cart” button produces the same output in the log but the completion times vary. The cart does not update however until I hit F5.

Note:
No error messages are displayed unless I use the “respond_to { |format| format.js }” line.
The cart updates if I hit F5.

The output from the log file reads:

Processing StoreController#add_to_cart (for 127.0.0.1 at 2008-06-24 15:06:26) [POST] Session ID: 8cff562dcdfcd4fb9787f48188e1afb4 Parameters: {“commit”=>”Add to Cart”, “authenticity_token”=>”c32e382c02901e70877453742461b3f550effce9”, “action”=>”add_to_cart”, “id”=>”3”, “controller”=>”store”} Product Columns (0.000000) SHOW FIELDS FROM `products` Product Load (0.016000) SELECT * FROM `products` WHERE (`products`.`id` = 3) 
Rendering store/add_to_cart
Rendered store/_cart_item (0.00000)
Rendered store/_cart_item (0.00000)
Rendered store/_cart_item (0.00000)
Rendered store/_cart (0.00000)
Completed in 0.01600 (62 reqs/sec) | Rendering: 0.00000 (0%) | DB: 0.01600 (100%) | 200 OK [http://localhost/store/add_to_cart/3]

Thank you in advance for helping me.

Regards,
Bill

  def add_to_cart
      begin
    product = Product.find(params[:id])
      rescue ActiveRecord::RecordNotFound
          logger.error("Attempt to access invalid product #{params[:id]}")
    redirect_to_index("Invalid Product")
      else
    @cart = find_cart
    @current_item = @cart.add_product(product)
    respond_to { |format| format.js }
    #redirect_to_index
      end
    end

  def add_product(product)
      current_item = @items.find {|item| item.product == product}
      if current_item
      current_item.increment_quantity
      else
      current_item = CartItem.new(product)
      @items << current_item
      end
      current_item
  end

Well, this is just a stab in the dark as I found your cry for help whilst I was trying to fathom out the same error message.

I was getting the RJS alert popup telling me

RJS error: 
TypeError: element is null

but Firebug was showing me nothing was wrong with the content. I tried checking through the escaped characters and they all matched up.

It turned out the RJS template was set to update a div in one of my views which had been labelled with a CLASS, rather than an ID.

<div class="filter"> 

<% form_remote_tag( :url => { :action => :find_near }) do  %>

  <ul>
       <li><div class="required">Make *<%= car_make_select(@make) %></div></li>
         <li><label for="make">Model </label><%= car_model_select(@make, @model) %></li>
         <li>Price from <%= text_field_tag :minprice, @minprice , :size => 3 %> to <%= text_field_tag :maxprice, @maxprice, :size =>3 %> </li>
         <li>colour <%= car_colour_select(@car_colour) %></li>
         <li>gearbox <%= car_gearbox_select(@car_gearbox) %></li>
         <li>location <%= text_field_tag(:car_location, @car_location) %> </li>
     </ul>
     <hr/>
     <%= submit_tag 'Search' %>
   <%= submit_tag 'Clear' %>
 <% end %>

   </div>

I changed it to

div id=”filter” 

and all was ajax-y heaven

Thank you Ben,

I tried your solution by changing the class= to id= in _cart.html.erb. I really didn’t see any other file where it would makes sense to try it. The result is that the cart title was not bold. The product id does get passed to the add_to_cart function so otherwise the app is fine. It does update the cart correctly by adding the item but does not render without hitting an F5 (refresh). The “Empty Cart” button works as expected and does not throw the RJS error.

Regards,
Bill