Rails-在Ajax之后使用部分更新Bootstrap Popover内容 [英] Rails - update bootstrap popover content with partial after ajax

问题描述

我正在使用Bootstrap Popover构建通知功能.当用户单击通知时，它将通过ajax调用将该通知标记为已读.在ajax成功的基础上，我想用更新的版本替换popover的内容.这是我到目前为止的内容:

I'm building out a notifications feature using bootstrap popover. When a user clicks on a notification, it will mark that notification as read through an ajax call. On ajax success, I want to replace the content of the popover with the updated version. Here's what I have so far:

$(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 class="media n-media notif-popup-container notif-display" id=<%= notif.id %> >
          <b><p><%= notif.notify_type %></p></b>
          <span class="n-date trans-timestamp dateTime" data-momentiz="(<%= notif.momentize %>)"></span>
          <p><%= notif.message %></p>
        </div>
    <% end %>
<% end %>

此内容通过部分显示.但是，这就是问题所在.尽管我希望ajax成功回调中的部分内容在ajax成功时呈现，但它最近了解到部分呈现首先由服务器完成(甚至在运行任何js之前)，然后生成结果传回javascript.

This content is displayed via a partial. However, this is where the issue arises. Though I expected the partial in the ajax success callback to be rendered at the time of the ajax success, it recently learned that the rendering of the partial is done first by the server (before any js is even run), then the result of that is passed back to the javascript.

如此有效，两个部分均在页面加载时呈现，这意味着在ajax成功之后，我无法再通过部分呈现动态地动态设置弹出内容.

So effectively, both partials render on page load, which means I can no longer dynamically set the popover content through the partial rendering dynamically after ajax success.

我的问题是，有没有一种解决方法，可以让我动态呈现部分内容，而不是在页面加载时将其填充到js中?或者，如果不是，则可能是完全不同的方法-我愿意接受任何想法.谢谢.

My question is, is there a way around this that would allow me to dynamically render the partial instead of it being populated into the js on page load? Or if not, possibly a completely different approach -- I am open to any ideas. Thanks.

推荐答案

您可以像这样从控制器中获取部分代码:

You could fetch the partial from your controller like so:

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}
  end
end

然后附加 JS中的响应:

Then append the response in JS:

$('.notifications-list').append(resp)

这篇关于Rails-在Ajax之后使用部分更新Bootstrap Popover内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！