CODEWITHSUNDEEP
javascripttwitter-bootstrapdrop-down-menu
patman
patman

Reputation: 2840

twitter bootstrap dynamically add dropdown

I'm implementing a user notification system. When the page is loaded an AJAX request is made and if notifications exist, they are rendered into a <ul> which is hidden but should show up if the notification item is clicked.

I have a couple of working dropdowns with Bootstrap on my page, so that's not the problem.

The loading and creating of the elements works fine. They appear in the DOM if i check with Firebug.

// this is in the top bar
<a id="notifications" href="/user/profile/notifications" data-toggle="notifications-alert">Benachrichtigungen</a>

// and this appended to the end of body
<ul id="notifications-alert" class="notifications dropdown-menu" style="display: none;">
    <li class="event_new">[..]</li>
    <li class="event_new">[..]</li>
</ul>

I also initialize the dropdown() when i append set the data-toggle attribute. Like this:

$notifications.addAttr('data.toggle', 'notifications-alert')
              .dropdown();

I also tried with a manual trigger but still doesent work. 

$notifications.addAttr('data.toggle', 'notifications-alert')
              .click(function(e) { e.preventDefault(); $(this).dropdown('toggle'); })
              .dropdown();

Any ideas why it is not working?

@EDIT: my mistake, solved. See my answer for details.

Upvotes: 1

Views: 3119

Answers (1)

Aguardientico
Aguardientico

Reputation: 7779

All examples in twitter bootstrap shows both the link [tag a] and the dropdown [tag ul] together with the same parent. Maybe the easy solution is that you should add the ul after the a instead of adding the ul in the end of the body $('a selector').after(ul)

Upvotes: 1

Related Questions