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>
