Javascript not working after rendering partial rails

Question

<% if @questions_counter == 2 %>
  <% if @finish_btn == 0 %>
    $("#initial-question-frame").fadeOut('fast');
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question})) %>").fadeIn();
  <% else %>
    $("#initial-question-frame").fadeOut('fast');
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question})) %>").fadeIn();
    $("#process-question-submit").fadeOut();
    $("#finish-test-button").fadeIn();
  <% end %>

The problem is, when @finish_btn = 1,

#process-question-submit is not fading out, nor the #finish-test-button fades in

Note: that both buttons are inside the rendered partial above.

Nitin Srivastava · Accepted Answer · 2016-01-23 05:50:28Z

This is because, render a partial just insert the HTML to the view before javascript run by the browser. In that case, DOM event handler goes to inactive.

To resolved this, just bind your DOM inside the document and it will keep your handler still active even after ajax call.

<% if @questions_counter == 2 %>
  <% if @finish_btn == 0 %>
    $("#initial-question-frame").fadeOut('fast');
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question})) %>").fadeIn();
  <% else %>
    $("#initial-question-frame").fadeOut('fast');
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question})) %>").fadeIn();

    $(document).ready(function() {
      $("#process-question-submit").fadeOut();
      $("#finish-test-button").fadeIn();
    });
  <% end %>
<% end %>

NM Pennypacker · Accepted Answer · 2016-01-16 17:58:47Z

0

Have you tried this?

var _question = "<%= j render(:partial => 'question', :locals => {:question => @question}) %>";
$('#next-question-frame').empty();
$('#next-question-frame').append(_question);
$("#process-question-submit").fadeOut();
$("#finish-test-button").fadeIn();

Your Javascript should work, so it seems the partial might not be rendering properly. If this doesn't work, you might try troubleshooting by just getting the partial to show first with #finish-test-button {display: block;} to make sure it's showing up.

If none of that works, try putting the Javascript to fade in the button inside the partial.

answered Jan 16, 2016 at 17:58

NM Pennypacker

6,99211 gold badges38 silver badges41 bronze badges

1 Comment

Petros Kyriakou Over a year ago

actually the partial does get rendered its just the jquery does not work after that. and this is on subsequent partial renderings, because i call the partial rendering many times each time changing the @question variable.Will try those though thanks

Collectives™ on Stack Overflow

Javascript not working after rendering partial rails

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related