CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajax
user4932805
user4932805

Reputation:

JavaScript Challenge--Rails Button Iteration

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

Answers (1)

Pavan
Pavan

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

Related Questions