Rails - 在 ajax 之后使用部分更新 bootstrap popover 内容

Question

我正在使用引导弹出窗口构建通知功能。当用户单击通知时，它会通过 ajax 调用将该通知标记为已读。在 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');

})

$(document).on("click", ".notif-popup-container", function() {

  // 1. get correct id for clicked notification

  var notifId = $(this).attr("id");

  // 2. Update the notification to be read and show update

  $.post(

    "/notifications/read",

    { notif_id: notifId },

  ).done(function(data) {

    $('#notifUnreadCount').html(data.unread_notifs);

    

  // 3. Replace html content of hidden div with updated notifications

  $('.notifications-list').html("<%= j (render partial: 'notifications/partials/test_partial') %>");

    

  // 4. Set popover content to be that div's html

  var popover = $('#notificationsBell').data('bs.popover');

  popover.config.content = $('.notifications-list').html();

})

# what is originally stored in the popover 

<div style="display:none" class="notifications-list">

  <%= render 'notifications/partials/popover_notifications' %>

</div>

# _popover_notifications.html.erb

# this is rendered twice, once above and once on ajax success

<% unread_notifications = Notification.unread_count(current_user) %>

<% if unread_notifications.eql? 0 %>

    No notifications to display! You are up to date.

<% else %>

    <% notifs = current_user.notifications.where(read_at: nil).order("created_at DESC") %>

    <% notifs.each do |notif| %>

        </div>

    <% end %>

<% end %>

此内容通过部分显示。然而，这就是问题出现的地方。虽然我期望ajax成功回调中的部分在ajax成功时渲染，但最近了解到部分的渲染首先由服务器完成（甚至在任何js运行之前），然后是结果被传回 javascript。

因此，两个部分都在页面加载时呈现，这意味着我无法再在 ajax 成功后通过部分渲染动态设置弹出窗口内容。

我的问题是，有没有办法解决这个问题，让我能够动态渲染部分内容，而不是在页面加载时将其填充到 js 中？或者如果没有，可能是一种完全不同的方法——我对任何想法持开放态度。谢谢。

Answer 1

您可以像这样从控制器中获取部分内容：class TestController < ApplicationController  def render_partial    notification_id = params[:notification_id]    # Fetch notification data    notification = Notification.find(notification_id)    # Return partial with new notification data    render partial: 'notifications/partials/test_partial', locals: {:notification => notification}  endend然后附加 JS 中的响应：$('.notifications-list').append(resp)