Question

I have a show and hide div that shows and hides comments when clicked. By default before it’s clicked it shows a message count plus some down arrows e.g.

“55 Comments [down arrows]”

and when clicked it changes to:

“Hide comments [up arrows]”

I use this code for displaying the amount of comments by default and the arrow (users/new):

    <span class="commentsCount"><%= pluralize(m.comments.count, 'comment') %></span>
    <span class="commentArrows"><%= image_tag 'view_all_comments.png' %> </span>

I use JQuery to help achieve the changes (users/load_comments.js.erb):

$('.postHolder').off().on('ajax:success', '.view_all_comments', function(){

    var postContent = $(this).parents('.post_content'),
        commentContainer = postContent.find('.comment_container'),
        getComments = "<%= j render 'users/partials/show_all_comments' %>";
        commentContainer.slice(0, -2).remove();

// The next 2 lines replace the comment count with "Hide comments" and up arrows"

          postContent.find('.commentsCount').html("Hide comments");
          postContent.find(".commentArrows img").prop("src", "/assets/up_arrows.png");

             postContent.find('.comment_container:first').before(getComments);
});

Now the important part is when Hide comments is clicked again. I need it to revert back to showing comments count. I can revert the arrows back to original arrows but the text I don’t see a way of reverting back to the comments account because I can’t access rails helpers and my instance variables etc inside my assets/javascripts/users.js file.

Here is the code (assets/javascripts/users.js:

    // for showing and hiding comments

        $('.expandComments').click(function() {

        var showAllCommentsSubmit = $(this).find('.showAllCommentsSubmit'),
            postContent = $(this).parents('.post_content'),
            commentContainer = postContent.find('.comment_container');


            if ($(this).hasClass('visible')) {
                postContent.find(".comment_container").slice(0, -1).hide();
                postContent.find(".commentArrows img").prop("src", "/assets/view_all_comments.png");

//Here is where I need the code to replace the "Hide comments" text.

            }  else {


                if (showAllCommentsSubmit.is(':disabled')) {
                    postContent.find(".comment_container").show();
                    postContent.find(".commentArrows img").prop("src", "/assets/hide_comments.png");

                } else {
                    showAllCommentsSubmit.trigger('submit');
                    showAllCommentsSubmit.prop({disabled: true});
                    postContent.find(".commentArrows img").prop("src", "/assets/comments-loader.gif");
                }
            }

            $(this).toggleClass('visible');

        });

Since I don’t think it’s possible to use embedded ruby / rails helpers in the assets javascript files how would I be able to achieve what I’m trying to achieve.

Is there some way to display some html on top of other html then remove it when it’s not needed any more and have the html underneath revealed again?

I’m sure there are some other solutions I can come up with such as bring some css into play.. having a div hide and show but I haven’t figured how I’d do that exactly. Wondering if there is a quick solution.

Answer 1

You can use Rails helpers in asset code. You essentially just need to rename your asset from users.js to users.js.erb, and Rails will preprocess it with ERb before emitting the content as JavaScript.

Check out the Rails guide on preprocessing in the asset pipeline for details.