javascript - rails : Populating bootstrap dropdown with ajax

Question

我目前有一个将显示通知的下拉菜单

<li class="notifications dropdown"> 
  <a class="dropdown-toggle" id="dLabel" role="button" data-remote="true" data-toggle="dropdown" data-target="#" href="/notifications"><i class="icon-user"></i> Notifications</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  </ul>
</li>

ul 下拉列表是空的，但在单击链接时我想用来自 Rails 的数据填充菜单。

我目前在 notifications.js.erb 中有这个

$(".nav li.notifications .dropdown-menu").remove();
$(".nav li.notifications").append("<%= escape_javascript(render('users/notifications', notifications: @notifications)) %>");

通常我会将下 zipper 接设置为远程，但由于我使用的是 Bootstrap 的下拉列表，所以没有请求被发送到 notifications.js.erb。如何手动调用那里的代码？

Answer 1

我会添加 JavaScript 代码来进行调用:

$(document).ready(function() {
    $('#dLabel').click(function() {
        // Only call notifications when opening the dropdown
        if(!$(this).hasClass('open')) {
           $.ajax({
              type: "GET",
              url: "/notifications",
              async: false,
              dataType: "script"
           });
        }
    });
});

您也可以使其异步并暂时将加载图标放入菜单中...