Rails - как перерисовать bootstrap popover после ajax вызова? - PullRequest
Новая
       4

Rails - как перерисовать bootstrap popover после ajax вызова?

0 голосов
/ 12 апреля 2020

Я создаю функцию уведомлений для моего сайта. См. Изображение ниже с тремя уведомлениями о том, как оно выглядит:

notifications_feature

Когда пользователь нажимает на уведомление, выполняется вызов ajax и уведомление помечены как прочитанные в контроллере. Затем я обновляю количество уведомлений (справа от значка колокольчика на картинке), чтобы оно стало на единицу меньше. Я также хочу, чтобы всплывающее окно повторно отображалось, и поскольку оно отображает только непрочитанные уведомления, оно будет обновляться правильно и интуитивно. Однако, это не обновление вообще. Вот мой код: 

$(document).ready(function(){
  $("#notificationsBell").popover({
    'title' : $('.notifications-title-header').html(),
    'html' : true,
    'placement' : 'left',
    'content' : $(".notifications-list").html()
  });
});

$('#notificationsBell').off("click").on("click", function() {
  $("#notificationsBell").popover('toggle');
})

$('body').on("click", ".popover-body .notif-popup-container", function() {

  // 1. get correct id for clicked notification
  var notifId = $(this).attr("id");
  $('#' + notifId).remove();

  // 2. Update the notification to be read and show update
  $.post(
    "/notifications/read",
    { notif_id: notifId },
  ).done(function(data) {
    $('#notifUnreadCount').html(data.unread_notifs);
    $('.popover-body').html("<%= j render 'notifications/partials/popover_notifications' %>");
  })

})
<li class="dropdown notif-drop notifications-bell">

  <%= link_to "javascript:void(0);", class: "dropdown-toggle", id: "notificationsBell" do %>
    <i class="fa fa-bell dropdown-toggle" aria-hidden="true"></i>
    <span id="notifUnreadCount">
      <%= Notification.unread_count(current_user) %>
    </span>
  <% end %>

  <div style="display:none" class="notifications-title-header" data-id="sup">
    <p class="notifications-title">
      Notifications
      <span class="see-all-notifs"><u><%= link_to "See all", notifications_path %></u></span>
    </p>
  </div>
  
  <div style="display:none" class="notifications-list"> # this is what I need to re-render
    <%= render 'notifications/partials/popover_notifications' %>
  </div>

</li>

Обратите внимание на атрибут display: none для элемента html, который передается в опцию «content» поповера bootstrap, я думаю, что он может иметь что-то делать с этим. Этот особый случай также объясняет, почему другие ответы мне не подходят. Любое понимание приветствуется!

...