繁体   English   中英

AJAX / Javascript错误Ruby on Rails

[英]AJAX/Javascript Error Ruby on Rails

好的,这就是我的位置。 我在这里有三件事,我已经很接近要开始工作了。

我有一个复选框=值1的表单,该表单收集“职位”的“票”并将其与post_id发送到数据库。 这很好。

我有一个部分模板,可以重新填写表单下方的特定帖子投票。

我设置了AJAX,以便在提交投票时将其显示到<%= render:partial => @ post.votes。

数据库正在接收表决,部分正在显示表决,但是当javascript运行时,出现以下错误:

RJS error:

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

接着:

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();

这是截图。 替代文字http://bwgblog.com/screen.png

这是其余的代码供参考。 顺便说一句,我是所有程序设计的新手,如果这看起来很简单,请对不起。

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

远程表单和部分表单位于/posts/show.html.erb中。 您会在顶部看到我设置的评论,并且一切正常。 有一些div,因为该部分已经设置样式。 我的直觉是该页面的某处有错误。

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

这是/votes/_vote.html.erb中的部分投票:

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

这是/votes/create.js.rjs文件:

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

最后,这是我的/layouts/posts.html.erb文件,我认为这里没有错误,因为注释AJAX在此包装器中正常工作。

<!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>

在RJS模板( /votes/create.js.rjs )中,您需要执行以下操作:

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

我认为您可能需要在/posts/show.html.erb使用id='votes'的DIV,以便javascript知道在何处插入此HTML。

insert_html的文档在这里

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM