AJAX/Javascript Error Ruby on Rails

Question

Ok so here is where I am at. I have three different things here and I am very close to getting it to work.

I have a form with a checkbox = value of 1 that collects a "vote" for a "post" and sends it to the database with the post_id. This works great.

I have a partial template that rendors that particular posts votes back underneath the form.

I have set up AJAX such that when the vote is submitted it shows it to the <%= render :partial => @post.votes.

The database is receiving the vote, the partial is displaying them, but when the javascripts runs I get the following error:

RJS error:

TypeError: Result of expression '((position == 'before' || position == 'after')
        ? element.parentNode : element)' [null] is not an object.

And then:

Element.insert("votes", { top: "<div class=\"vote\" id=\"vote_44\">\n\n\n\t\t1\n\n\n\n\t\n\t\n\t</div>\n\t\n" });
$("vote_44").visualEffect("highlight");
$("vote").reset();

Here is a screenshot. alt text http://bwgblog.com/screen.png

Here is the rest of the code for reference. BTW, I am new to all programming so sorry if this seems simple.

votes_controller.rb

class VotesController < ApplicationController

  def create
    @post = Post.find(params[:post_id])
    @vote = @post.votes.create!(params[:vote])

    respond_to do |format|
       format.html { redirect_to @post}
       format.js
     end
  end
end

The remote form and partial are located in the /posts/show.html.erb. You'll see the comments piece I have set up at the top and that all works great. There is some divs because this portion is styled already. My hunch is the error is somewhere in this page.

<div id="backto"<%= link_to 'Back to all BattleCries', posts_path %></div>
<%= render :partial => @post %><br/>


<p5>Add a Comment</p5>
<div id="belt">
    <div id="belttext">
<% remote_form_for [@post, Comment.new] do |f| %>
    <p>
        <%= f.text_area ( :body, :class => "commentarea") %>
    </p>
    <%= f.submit "Add Comment"%>
<% end %>
</div>
<div id="beltbottom">
</div>
</div><br/>
<br/><p5>Comment Stream </p5> 
<div id="comments">
    <%= render :partial => @post.comments %>

</div>

<p>
<% remote_form_for [@post, Vote.new] do |f| %>
    <p>
        <%= f.label :vote %>
        <%= f.check_box :vote %>
    </p>
    <%= f.submit "Vote" %>
<% end %>

    <%= render :partial => @post.votes %>

</p>

Here is the votes partial in /votes/_vote.html.erb:

<% div_for vote do %>
        <%= h(vote.vote) %> 
    <% end %>

Here is the /votes/create.js.rjs file:

page.insert_html :top, :votes, :partial => @vote
page[@vote].visual_effect :highlight
page[:vote].reset

Lastly here is my /layouts/posts.html.erb file, I don't think the error is in here because the comments AJAX works fine with this wrapper.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Posts: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  <% auto_discovery_link_tag :atom, formatted_posts_path(:atom) %>
  <%= javascript_include_tag :all %>
<script type="text/javascript">
function toggleLayer( whichLayer )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>
</head>
<body>
    <div id="stage">
        <div id="leftbar">
        </div>
        <div id="middlebar">
            <div id="topmiddle">
            </div>
            <div id="middlecontent">
                <div id="middlecontenttext">
                    <p style="color: green"><%= flash[:notice] %></p>
                    <%= yield %>

                </div>
            </div>

        </div>
        <div id="rightbar">
            <div id="rightbarband">
                <p5>Most<br/>Commented<br/>Battlecries</p5>
                <p>This is where these will go.</p><br/><br/>
                <p5>Search BattleCries</p5>
                <input = "submit"><br/>
                <br/><br/>          
                <p5>Get the Wristband</p5>
                <img src="../images/wristband.png" width="208" height="79" alt="Wristband">
                <p>Tell us the title of your Life BattleCry and we will print it on a reminder wristband. Click here and be done in 60 seconds.</p>
                <br/><br/>
                <p5>Get the <br/>T-Shirt</p5>
                <img src="../images/logoshirt.png" width="208" height="42" alt="Logoshirt">
                <p>this is where an image and also some very interesting text about the sweet wristband will go</p>
                <br/><br/>

                <p></p>
            </div>

        </div>

    </div>
</body>
</html>

Answer 1

in the RJS template ( /votes/create.js.rjs ) you have the line:

page.insert_html :top, :votes, :partial => @vote

I think you might need a DIV with id='votes' in /posts/show.html.erb so that the javascript knows where to insert this HTML.

The docs for insert_html are here

AJAX/Javascript Error Ruby on Rails

Question

1 answers

solution1
2 ACCPTED 2009-11-19 19:12:42

AJAX/Javascript Error Ruby on Rails

Question

1 answers

solution1 2 ACCPTED 2009-11-19 19:12:42

solution1
2 ACCPTED 2009-11-19 19:12:42