Fire javascript ajax partial after each load using rails

Question

I have a menu item that fires ajax that returns javascript partial that is a bootstrap modal. The problem I am having is when a user clicks the menu item the first time, the modal opens as expected. The user closes the modal and tries to open it again, it doesn't open (although the ajax fires again from backend).

Consider the following code (using bootstrap 4):

Menu.html.erb:

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
    <%= link_to user_profile_path(current_user.user_profile.id), remote: true, class: "dropdown-item" do %>
        <%= fa_icon "id-card", text: "Profile Settings" %>
    <% end %>
</div>
...
<div id="user_profile"></div>

user_profile/show.js.erb (ajax js partial):

$("#user_profile").replaceWith("<%= j render "user_profile" %>");

user_profile/_user_profile.html.erb (bootstrap modal):

<script>
    $('#user_profile_modal').modal('show');
</script>

<%= form_with model: @user_profile do |f| %>
    <div class="modal fade" id="user_profile_modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
        ...
        </div>
    </div>
<% end %>

Is there a way to fire the the modal('show'); each time the modal is fired from the backend? By the way, this is just one of 3 modals that get loaded this way on the page.

Thanks again!

Sean · Accepted Answer · 2018-10-14 20:08:04Z

2

After trying a few things, simply replacing the replaceWith with html in the user_profile/show.js.erb will cause the ajax to fire each time.

Old:

$("#user_profile").replaceWith("<%= j render "user_profile" %>");

New:

$("#user_profile").html("<%= j render "user_profile" %>");

The reason for this is because the replaceWith is replacing the element in the parent, and thus not firing again because the element has already been replaced the first time.

Hope that helps anyone in the future!

answered Oct 14, 2018 at 20:08

Sean

2,5978 gold badges33 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fire javascript ajax partial after each load using rails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related