Reputation:
On my welcome#index
page, there's a button to write a new Comment
for an Article
, remotely (or should I say asynchronously), using AJAX.
It works perfectly except that when an article is iterated, using rails, the browser treats the JS button as the same button throughout all iterated elements (articles).
My guess is that JS iteration is required.
How does one solve this?
# welcome/index.html.haml
- @articles.each do |article|
= link_to "Comment", new_article_comment_path(article), class: "write-button", remote: true
= link_to "Close", root_path, class: "close-button", remote: true
= link_to "Commented", root_path, class: "written-button", remote: true
#comment-form{ :style => "display:none;" }
#comments/new.js.erb
$( '#comment-form' ).html('<%= j render ("form") %>');
$( '#comment-form' ).slideDown( "slow ");
$( '.write-button' ).hide();
$( '.close-button' ).show();
#comments/create.js.erb
$( '#comment-form' ).slideUp(350);
$( '.close-button' ).hide();
$( '.written-button' ).show();
#welcome.js
//slide up and return
$( '.close-button' ).hide();
$( '.close-button' ).on('click', function() {
$( '#comment-form' ).slideUp(350);
$( '.close-button' ).hide();
$( '.write-button' ).show();
});
Upvotes: 0
Views: 64
Reputation: 33552
If I understood correctly, you need to provide an id
for the comment-form
div which equals to the article.id
, so that the form
shows up for that respected article
.
%div{:id => "comment-form-#{article.id}", :style => "display:none;"}
And change the comments/new.js.erb
to below
#comments/new.js.erb
$( "#comment-form-<%= params[:article_id] %>").html('<%= j render ("form") %>');
$( "#comment-form-<%= params[:article_id] %>" ).slideDown( "slow ");
$( '.write-button' ).hide();
$( '.close-button' ).show();
Upvotes: 1