Bootstrap dropdown item binding with Ajax source

Question

I have Bootstrap dropdown button, I want get data when user click this dropdown button instead of I need load country list at page loading time, here is my code;

<div class="btn-group">
<input class="text-box single-line" data-val="true" data-val-required="The Country field   is required." id="Country" name="Country" type="text" value="US" />
<a class="btn dropdown-toggle country" id="country" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu countrys" role="menu" aria-labelledby="dropdownMenu">
   //store country list
</ul>
</div>

I click dropdown button, it can't trigger jquery work, it seems Bootstrap don't allow custom dropdown function.

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

Bootstrap allows almost anything you can imagine. Are you getting any errors in the console? — isherwood, Mar 15 '13 at 16:55
no, I use firefox set break, it seems bootstrap disable client event. — Ericyu67, Mar 15 '13 at 18:22

score 2 · Answer 1 · edited Jul 04 '14 at 07:24

2

You can try to add the ajax request inside the dropdown-open event. something like this:

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

show.bs.dropdow-- This event fires immediately when the show instance method is called. The toggling anchor element is available as the relatedTarget property of the event.

edited Jul 04 '14 at 07:24

Sam

7,252
16
46
65

answered Jul 04 '14 at 07:06

Cristi Marian

443
8
18

Bootstrap dropdown item binding with Ajax source

1 Answers1