Associating a Bootstrap Element with an Ajax Attribute

Question

I have a Bootstrap dropdown list button, I want to get the data when the user clicks this button, instead of having to load the list of countries while the page is loading, 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 press the drop-down button, it cannot start jquery, it seems that Bootstrap does not allow to configure the drop-down list 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" }); } }); }); 

Answer 1

You can try adding an ajax request to the dropdown event. something like that:

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

show.bs.dropdow-- This event fires immediately after the show instance method is called. The binding anchor is available as an associated Target property of the event.