0

Looking for an explanation rather than a solution.

I'm facing a situation where updating the selected value and then refreshing the selectpicker as per this SO post suggest doesn't work properly.

Here is my code:

$('[name="city"]', form).val(subscription.city || '');                    // <input>
$('[name="province"]', form).val(subscription.province);                  // <select>
$('[name="locale"]', form).val(subscription.locale || defaultLocale);     // <select>

$('select', form).selectpicker('refresh');

Strangely on some system the last statement setting doesn't pick the value set for locale. Encapsulating the last statement within a setTimeout solve the problem.

setTimeout(function(){
    $('select', form).selectpicker('refresh');
}, 10);

I am aware JavaScript is event driven and an asynchronous language, but doesn't basic statement like those in my example gets executed synchronously?

Although it solves the issue, I find this "hacky" as I have dozens of places where this type of situation occurs.

Update

I discovered that encapsulating the statement in a setTimeout actually didn't always worked.
But, refreshing the page while holding the Ctrl key, worked. Something I have to figure out. I was wrong.

I also found the reason for the "on some system". The system showing the misbehaviour is the one for the production environment. Why this one? Because on this system there are other script being loaded for analytics and marketing strategy.

I found a script from MsDynamics when commented/omitted, the misbehaviour above is gone and all works good. I now need to find out what in this piece of code is messing with mine.

gzmo
  • 163
  • 1
  • 9
  • 1
    None of these statements should be asynchronous, I don't see how there can be a race condition. – Barmar May 02 '23 at 15:59
  • Are you sure there isn't anything else changing the `locale` dropdown? – Barmar May 02 '23 at 16:01
  • Try using DOM modification breakpoints to see if something else is changing the bootstrap selectpicker. – Barmar May 02 '23 at 16:02
  • Thanks for your hint @Barmar. I'm onto something. See my update in the post. – gzmo May 02 '23 at 16:38
  • FWIW most often when you have `setTimeout(function(){` for these type issues there is something else better - and this might just manifest in a hard to debug issue in the future. Without more code/html this is not likely to be resolved here. (I did see your note but that is a symptom not a fix) – Mark Schultheiss May 02 '23 at 16:42

1 Answers1

0

Used Dom modification breakpoints and console.log as suggested by Barmar, and I can see the locale select value being set correctly. It's really when the selectpicker('refresh') is called that it's not always working.

After comparing code loaded on the production server and removing them one-by-one, I could narrow down the cause of the misbehaviour to one script from Azure.

Adding this to the header causes the issue 4-5 time out 10.

<script src="https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=1.65.1064.0"></script>

Removing it and I have no more misbehaviour and a 10/10 correct result.

Totally beats me what's in this obfuscated script that could interfere with my code. I do not have the proper knowledge to do such investigation. Maybe someone do. I can give access to a staging server with the issue for those wishing to dig.

Thankfully my client doesn't need it anymore. But I would love to know why...

gzmo
  • 163
  • 1
  • 9