0

I have a combobox as follows

<div class="centralizedCountrySelector">
  <label for="brandSelector">Brand:</label>
  <select name="brandSelector" id="brandSelector" class="combo" onchange="FetchBrandsDeployedCountries()">
    <option value="none">-- Select --</option>
    <option value="xx">yy</option>
  </select>
</div>

When I make a change and select something I can see from the logs that the function is actually triggered and it goes and gets the data it is supposed to get but then it does not run the code after my "fetch" code until I make a second change in the combobox, then it shows the results from the first change.

so it is basically lagging one change all the time and I don't understand why, the first time I do a change in the combobox I cannot see the log entry inside the foreach loop, but for every subsequent change I can.

How can I make it trigger properly on first change?

the function is very simple as per below

function FetchBrandsDeployedCountries() {
    console.log('fetching deployed countries in env:' + env);

    var brandId = document.getElementById('brandSelector').value;

    var body = JSON.stringify({
        "brand": brandId
      });

      const deployedCountries = fetch(cosmosDBFetchAppSettingsDeployedCountries,
        {
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          method: 'POST',
          body: body
        });
    
        deployedCountries.then(response => {
          return response.json();
        })
        .then(brandsArray => {
          deployedCountriesArray = brandsArray[0].countries;
          console.dir('brands:' + JSON.stringify(deployedCountriesArray));
        });
    
    console.log('after fetch before html stuff');

    var div = document.getElementById('dynamicCards');
    while(div.firstChild) {
      div.removeChild(div.firstChild);
    }

    deployedCountriesArray.forEach(res => {
      console.log('res:' + res);
   });
Matt Douhan
  • 677
  • 3
  • 13

0 Answers0