Rails UJS cannot render image_pack_tag

Question

It looks trivial, but rails cannot parse this .js.erb file properly:

$('.username-content').fadeOut('slow', function() {
  var div = $("\
    <div class='username-content'>\
      <%= t('onboarding_username_done') %>\
      <div class='row'>\
          <div class='col-md-6 offset-md-3'>\
            <%= image_pack_tag('badge-prety.gif', class: 'rounded') %>\
            <button type='button' class='btn btn-primary mt-3 username'><%= t('next') %></button>\
          </div>\
      </div>\
    </div>\
  ").hide();
  $(this).replaceWith(div);
  $('.username-content').fadeIn('slow');
});

I got a probably a rendering problem:

Not sure how to proceed. Any clue?

Answer 1

The best way is to use a partial for this, example: Create a partial named username_content inside partials folder with the html content, and replace you code with:

$('.username-content').fadeOut('slow', function() {
  $(this).replaceWith("<%= j render 'partials/username_content' %>");
  $('.username-content').fadeIn('slow');
});

https://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-escape_javascript