CODEWITHSUNDEEP
ruby-on-railsajaxruby-on-rails-3jquery
Kellogs
Kellogs

Reputation: 471

Rails: Jquery Ajax issue with slidetoggle

I have a comment section that is apart of a micropost and I am trying to click a button within the micropost so that the comment section which is displayed as none in the CSS slides and shows. The problem is that all 10 micropost's comment button opens the most recent micropost when it should be opening it's own comment section of the micropost. I am unsure how to change the javascript around along with the HTML to make the comment button dynamic to it's own micropost. Here is what I am working with, any help is much appreciated. Thank you.

JS

$(".CommentTitle").click(function(){
    $("#CommentContainer").slideToggle("slow", function(){ 
        $(".CommentTitle").html($(this).is(":hidden") ? "Comments" : "Comments");  
    });
});

HTML

<div class='Actions'>
<div class='CommentButton'>
<span class='CommentIcon'></span>
<span class='CommentNum'>5</span>
<span class='CommentTitle'>Comments</span>
</div>
</div>

<div id='CommentContainer' class='<%= micropost.id%>'>
<div class='Comment'>
<%=render "comments/form" %>
</div>
<div id='comments'>
<%=render @micropost.comments %>
</div>
</div>

Upvotes: 1

Views: 525

Answers (2)

Jamie Penney
Jamie Penney

Reputation: 9522

Change your HTML so that you don't have duplicate IDs on your CommentContainer elements. That is why jQuery is only finding the first one - you are creating invalid HTML.

Assuming you have one Comment button per micropost, you should add the micropost id as a data attribute to the Title, and retrieve that to find the correct CommentContainer. Each comment container should include the ID of the micropost it belongs to in it's ID.

HTML:

<div class='Actions'>
    <div class='CommentButton'>
        <span class='CommentIcon'></span>
        <span class='CommentNum'>5</span>
        <span class='CommentTitle' data-micropost='<%= micropost.id %>'>Comments</span>
    </div>
</div>

<div id='CommentContainer-<%= micropost.id%>' class='CommentContainer'>
    <div class='Comment'>
        <%=render "comments/form" %>
    </div>
    <div id='comments'>
        <%=render @micropost.comments %>
    </div>
</div>

Javscript:

$(".CommentTitle").click(function(){
    var title = this;
    var postID = $(this).data('micropost');
    $("#CommentContainer-" + postID).slideToggle("slow", function(){ 
        $(".CommentTitle", title).html($(this).is(":hidden") ? "Comments" : "Comments");  
    }); 
});

Change your CSS to hide .CommentContainer instead of #CommentContainer

Upvotes: 1

Jamie Penney
Jamie Penney

Reputation: 9522

$(".CommentTitle").click(function(){
    $("#CommentContainer", this.parent()).slideToggle("slow", function(){ 
        $(".CommentTitle", this).html($(this).is(":hidden") ? "Comments" : "Comments");  
    }); 
});

You can add a context to a jQuery selector, so that it will only match below that element. In this instance, I've added this.parent() to the container selector so it will only match #CommentContainer inside the clicked container, and this to the title selector so it will match the title within the current container.

This assumes your micropost HTML looks something like this:

<div id='#CommentContainer'>
  <span class='CommentTitle'>Some clickable title</span>
  <p>data here</p>
</div>

The element types don't matter, just that CommentTitle is a direct child of CommentContainer.

Upvotes: 1

Related Questions