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