Can't get the Handlebars dropdown menu to appear

Hi, I followed the video exactly and still could not get the dropdown menu to appear. I downloaded the project files from the following video and I compared them side by side. After that I replaced my project files with the files from the following video and it still does not work. Please help! :D

Here is my code:

application.js

window.loadedActivities = [];

var addActivity = function(item) { var found = false; for (var i = 0; i < window.loadedActivities.length; i++) { if (window.loadedActivities[i].id == item.id) { var found = true; } }

if (!found) { window.loadedActivities.push(item); }

return item; }

var renderActivities = function() { var source = $('#activities-template').html(); var template = Handlebars.compile(source); var html = template({activities: window.loadedActivities}); var $activityFeedLink = $('li#activity-feed');

$activityFeedLink.addClass('dropdown');

$activityFeedLink.html(html); $activityFeedLink.find('a.dropdown-toggle').dropdown(); }

var pollActivity = function() { $.ajax({ url: Routes.activities_path({format: 'json', since: window.lastFetch}), type: "GET", dataType: "json", success: function(data) { window.lastFetch = Math.floor((new Date).getTime() / 1000); if (data.length > 0) { for (var i = 0; i < data.length; i++) { addActivity(data[i]); } renderActivities(); } } }); }

// window.pollInterval = window.setInterval( pollActivity, 5000 );

application.html.erb

<script id="activities-template" type="text/x-handlebars-template"> <a class="dropdown-toggle" href="#">Activity Feed</a> <ul class="dropdown-menu"> {{#each activities}} <li><a href="#">{{this.user_id}} {{this.action}} a {{this.targetable_type}}.</a></li> {{/each}} </ul> </script>