I am currently working with dynamic dropdowns that are populated based on values fetched from an api. I am using this jquery cascading dropdown library which works well out of the box. I am trying to figure the right way to select values of the dropdown through a button trigger event. I placed two buttons that when clicked it should select a value from the dropdown. This works well on the first click but on subsequent clicks nothing happens after. What would be the best way to achieve this?
Here is running example: https://jsfiddle.net/3jxvzrmw/2/
const editBtn = document.querySelectorAll('.editButton');
for (const button of editBtn) {
button.addEventListener('click', (e) => {
let make = e.target.dataset.make
$("#dropdowns").cascadingDropdown({
selectBoxes: [{
selector: '.step1',
source: function (request, response) {
$.getJSON("https://private-anon-f7832ff619-carsapi1.apiary-mock.com/cars", request, function (data) {
response($.map(data, function (item, index) {
return {
label: item.make,
value: item.make,
};
}));
}).done(function () {
$("#make").val(make).change();
}).fail(function () {
alert("unable to load data for dropdown make");
});
},
}]
});
});
}
3
Answers
I don’t know why you need to fetch data everytime you click a button. But here is the problem:
At the second click, that cascadingDropdown is applied already, so you are appling it again, then error. You need to destroy it before you can call it again. AND put it in try-catch if not you will get error for the first time (because at the first click, it doesn’t load yet, then you can’t destroy it).
You can do it like this:
if I am not wrong with your expectation, then the problem is that you are re-fetching data each time you click the button. This might be the root cause.
Simply add a check flag like this: