Rails: populating a bootstrap dropdown with ajax

Question

I currently have a drop-down list in which notifications will be displayed

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

The ul dropdown menu is empty, but when I click on the link I want to populate the menu with data from the rails.

I currently have this in notifications.js.erb

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

Normally, I would set the dropdown link to the remote one, but since I use the drop-down list of bootstraps, not a single request is sent to notifications.js.erb. How can I manually call the code there?

Answer 1

I would add JavaScript code to call:

 $(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" }); } }); }); 

You can also make it asynchronous and temporarily put the download icon in the menu ...