CoffeeScript not working when appending content through ajax

Question

Hello I'm working with rails and have been trying to make ajax requests when submiting forms for comments so the result is appended to the list of comments. I've got it to work thanks to this video: https://www.youtube.com/watch?v=K-sns5tNdTY .

Later I decided to add answers to my comments, which I implemented with a new model and made a button with coffeescript on each comment to show the answers and a form for a new answer to that specific comment (the default css state is hidden). And then append the answers the same way I've done with the comments. It was kind of a pain in the ass but got it to work.

Now the problem I have is that when adding a comment, the "Responder" button on the appended comment refreshes the page instead of working like it does for the other comments (showing the section that is hidden).

This is how I render the comments and the form (sorry for it being in spanish):

<div id="seccion-comentarios" class="border-element-sm-div" style="overflow: hidden">
                    <h3 style="width: 500px">Comentarios</h3>
                        <div id="comentarios">
                            <%= render @comentarios %>
                        </div>
                    <% if @comentarios.count <= 0 %>
                        <p style="font-style: italic; color: grey; margin-left: 10px"> Aún no hay comentarios. Haz uno!</p>
                    <% end %>
                    <% if usuario_signed_in? %>
                    <div style="overflow: auto">
                        <%= render :partial => 'comentarios/form' %>
                    </div>
                    <% end %>
                </div>

This is the form for my comments (views/comentarios/form):

<%= form_for @comentario , remote: true do |f| %>

    <%= f.hidden_field :favor_id, value: @favor.id%>

            <%= f.label :texto, "Escribe un comentario:" %>
            <br/>
            <%= f.text_area :texto, required: true,class: "form-control", style: "width: 99%; max-width: 99%"%>

        <div style="float: right; padding-top: 10px; margin-right: 1%">
            <%= f.submit "Comentar", :class=>'btn btn-primary'%>
        </div>

<% end %>

And this is the create.js.erb for that inside views/comentarios

$('#comentarios').append($("<%= j render @comentario %>").hide().fadeIn(500));
$('#comentario_texto').val("");

Then for each comment I render this (views/comentarios/_comentario.html.erb) :

            <div class="border-gau-sm" style="overflow: auto">
                <div>
                    Here comes the info of my comment
                </div>
                <div style="float: right; margin-top: -10px; margin-bottom: -2px;">
                    <a class= "respuestas-link btn btn-primary btn-xs" data-section-id="respuestas-seccion-<%=comentario.id%>" href="#">
                        Respuestas
                        <span class="caret" style=""></span>
                    </a>
                </div>
                <section id="respuestas-seccion-<%=comentario.id%>" style="display: none">
                    <br/>
                    <div>
                        Here's what I want to show
                    </div>
                </section>
            </div>

Finally the coffeescript that get the answers (#respuestas-seccion) to show is this:

$(document).on 'turbolinks:load', ->
  $('.respuestas-link').click (event) ->
    event.preventDefault()
    commentSectionId = $(this).data('sectionId')
    $('#' + commentSectionId).fadeToggle()

I've tried setting the default state of the answer section to be visible as to see if it was rendered correctly (removing the display:nonein this line: <section id="respuestas-seccion-<%=comentario.id%>" style="display: none"> in _comentarios.html.erb ). It turned out it was, and I am able to post an answer. But the button that toggles that section, is still reloading the page. Maybe it has something to do with the $(document).on 'turbolinks:load', -> in the coffeescript? Any ideas?

Thanks for your time and hope I could explain myself so you can help!

score 0 · Answer 1 · edited May 23 '17 at 12:30

Changed the CoffeeScript to :

$(document).on 'turbolinks:load', ->
  $('#comentarios').on 'click' , '.respuestas-link' , (event) ->
    event.preventDefault()
    commentSectionId = $(this).data('sectionId')
    $('#' + commentSectionId).fadeToggle()

As I got from this question: Jquery click event not working after append method , which is very similar but doesn't use create.js.erb which kind of confuses me. Also couldn't find it before posting this question.

CoffeeScript not working when appending content through ajax

1 Answers1