在同一頁面上使用jquery_ujs顯示評論

我正在開發我的Rails應用中的評論功能。我想在點擊發布按鈕後立即向用戶顯示評論。我有一個創建按鈕的表單，我想用JQuery_ujs顯示註釋。什麼是最好的辦法呢？在同一頁面上使用jquery_ujs顯示評論

這是創建comment動作：

def create_comment 
    params.permit! 
    @article = Article.find(params[:article][:id]) 
    @comment = Comment.create(params[:comment]) 
    @comment.article_id = @article.id 

    if @comment.save 
     render :text => 'created', :status => 202 and return 
    else 
     render :text => "not created", :status => 203 and return 
    end 
end

這是jQuery腳本：

$(document).ready(function(){ 
    $('#submit').click(function (e) { 


    e.preventDefault(); 

    var commentor =this.comment_commentor.val(); 
    var comment =this.comment_content.val(); 

    $.ajax({ 

     type: "POST", 
     url: '<%=create_comment_comment_index_path%>', 
     // send the last id to our rails app 
     data: { 
      commentor: commentor, 
      comment: content, 
     }, 

     complete: function(jqXHR, textStatus){ 
     if(jqXHR.status == "203"){ 
      //invalid 
     }else if(jqXHR.status == "202"){ 
      //valid 

      $('#comments').append("<div class='well'> 
    <p class='text-muted'>Added by <strong><%[email protected]%></strong> on <%= l(@comment.created_at, format: '%B, %d %Y %H:%M:%S') %> 
    </p> 
    <blockquote> 
    <p><%=comm.content%></p> 
    </blockquote> 
     </div>"); 
     } 
     } 
    }); 

}); 
});

我這是怎麼表現的評論：

<div id="comments"> 
<%@article.comments.each do |comm|%> 
<div class="well"> 
<p class="text-muted">Added by <strong><%=comm.commentor%></strong> on 
<%= l(comm.created_at, format: '%B, %d %Y %H:%M:%S') %></p> 
<blockquote> 
<p><%=comm.content%></p> 
</blockquote> 
</div> 
<%end%> 
</div>

形式創建評論：

<%= form_for(:comment, :url => create_comment_comment_index_path) do |f| %> 
    <input type="hidden" value="<%=params[:id]%>" name="article[id]"> 
    <div class="field"> 
    <%= f.text_field :commentor,:class=>"form-control", :required=>"true"%> 
    </div> 
    <br> 
<div class="field"> 
    <%= f.text_area :content,:class=>"form-control", :required=>"true"%> 
</div> 
<br> 
<div class="actions"> 
    <%= f.submit "create",:id=>"submit",:class=>"btn btn-lg btn-primary "%> 
</div> 
<% end %>

來源

2016-03-30 Joma

請出示你的HTML編輯 –

我的問題，我'不知道，如果代碼是好的，我尚未對其進行測試。 – Joma

你的方法是正確的。最好的方法是使用Ajax，然後在成功回調函數中，您可以傳遞服務器返回的數據。這裏有兩種選擇，你可以在服務器端生成新的註釋HTML，並將其作爲文本返回，然後將數據附加到元素或做你現在正在做的事情。你可以使用瀏覽器的控制檯來調試你的Javascript。 –

正如另一位用戶所評論的那樣，您確實有2個選擇，在回調中進行更新，或在UJS中進行更新。就我個人而言，當您使用回調方法時，我發現使用JSON響應更容易，但這僅僅是個人偏好。

如果您選擇與UJS一起使用，則不必變更太多。

調用創建爲你使用remote: true強制的JavaScript要求
改變當前視圖評論列表項從部分
渲染確保你的控制器可以應對現在
做js
然後添加你的ujs文件，例如create.js.erb
刪除您的jQuery腳本

評論部分看起來更像是：

<div id="comments"> 
    <%@article.comments.each do |comm|%> 
     <%= render comm %> 
    <%end%> 
</div>

然後你app/views/comments/_comment.html.erb會是這樣：

<div class="well"> 
    <p class="text-muted">Added by <strong><%=commment.commentor%></strong> on 
    <%= l(comment.created_at, format: '%B, %d %Y %H:%M:%S') %></p> 
    <blockquote> 
     <p><%=commment.content%></p> 
    </blockquote> 
</div>

這樣你UJS文件可以看起來像：

$('#comments').prepend('<%= j render("comment", comment: @comment) >'); 
$('form#new_comment').find("input[type=text], textarea").val("");

這會將新創建的評論添加到評論列表的頂部。

見示例應用程序：https://github.com/trh/rails_ujs_comments_example_app

來源

2016-03-30 18:18:34 trh

後，保持在同一頁上完美罰款。謝謝。 – Joma

在同一頁面上使用jquery_ujs顯示評論

回答

相關問題