Activate AJAX action on button click inside dropdown menu without closing it

As you probably know, any action inside twitter bootstrap causes the dropdown to close, except for use cases:



Unfortunately it event.stopPropagation()

also stops the ajax request.
what i want to achieve is something like when you get a friend request on FB and you accept / reject inside the dropdown without closing it.
Can you help me?


source to share

1 answer

Just place the ajax call after the call event.stopPropagation


In this case, the click must be on the element $('.dropdown-menu > li > a')

. See example below.

/**** Ignore this command - just used to mock up an ajax response **/
  url: '/likethis',
  responseTime: 1000,
  responseText: {
    status: 'success',
    fbStatus: 'liked'

$('.dropdown-menu > li > a').click(function(event){
    $.ajax({ url: '/likethis',
              success: function() {
                 $('#likelink').html('<span class="glyphicon glyphicon-ok"></span> Liked!');

<script src=""></script>
<script src="//"></script>
<script src="//"></script>
<link href="//" rel="stylesheet"/>

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Like This <span class="caret"></span>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#" id="likelink">Like</a></li>

Run codeHide result



All Articles