Issue #3973: change the way Ajax spinner is appended to DOM

[MichaelThumes]

bugfix candidate for rel-11_0 closes #3973

[svenoe]

@chzauleck - please see whether you approve this change. ;)
(Maybe @MichaelThumes or @stefanhaerter have an example including a picture of the problem and the change in the dom. :)

[stefanhaerter]

At least when I managed to reproduce it, taking a screenshot was really hard because the spinner in question just showed up for one or two seconds. Maybe I can take a video and provide it.

[stefanhaerter]

This is the behavior I observed: screen_capture.webm

[MichaelThumes]

Screenshot of Ajax Spinner displayed before DF

[MichaelThumes]

Problematic DF DOM excerpt, after selecting from the autocomplete dropdown and waiting for the DF display value to update via AJAXUpdate:

<div class="Field">
  <input type="hidden" class="FormUpdate" id="DynamicField_TicketRef" name="DynamicField_TicketRef" value="1">
  <span id="AJAXLoaderDynamicField_TicketRef" class="AJAXLoader" style="display: none;"></span>
  <input type="text" class="DynamicFieldReference DynamicFieldText Modernize ui-autocomplete-input" id="Autocomplete_DynamicField_TicketRef" title="" name="Autocomplete_DynamicField_TicketRef" value="" autocomplete="off" aria-invalid="false">
</div>

Note that the first child is hidden, the second child is the Ajax spinner and the third child is the displayed input => Ajax spinner is displayed before the Input .

DOM With proposed changes:

<div class="Field">
  <input type="hidden" class="FormUpdate" id="DynamicField_TicketRef" name="DynamicField_TicketRef" value="1">
  <input type="text" class="DynamicFieldReference DynamicFieldText Modernize ui-autocomplete-input" id="Autocomplete_DynamicField_TicketRef" title="" name="Autocomplete_DynamicField_TicketRef" value="" autocomplete="off" aria-invalid="false">
  <span id="AJAXLoaderDynamicField_TicketRef" class="AJAXLoader" style="display: none;"></span>
</div>

Note the Ajax spinner span is now the last child in the DF DOM snippet, and thus displayed after the visible DF input element.

[chzauleck]

looks good!