Home/ Questions/Q 4382982
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T12:50:56+00:00

i have a web page where there are 2 dropdowns next to each other.

  • 0

i have a web page where there are 2 dropdowns next to each other. when you change one dropdown i go to the server and update the value in the second dropdown. Since this takes a few seconds, i have this code below that shows a ajax loading image while its waiting.

this issue is that since i am using insert after, when this runs, it pushes the second dropdown over a few pixels and when its complete, teh dropdown shifts back.

what is the best way to avoid this. i somehow need to keep a placeholder with the same wdith as the image so when i show it, it keeps everying else from moving.

var spinner = $("<img src='/Content/images/ajax-loader.gif' />").insertAfter(item);

$.getJSON("/GetId/" + item.val(), function (data) {
    if (data.Id > 0) {
        $("#SecondDropdown").val(data.Id);
    }
    spinner.remove();
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    position:absolute on the spinner in a container above everything, is how I always do it.

    <body>
    <div id='ajax_loader'></div>
    <div>
        <select name='1'>
            <option value='yes'>Yes</option>
            <option value='no'>No</option>
        </select>
        <select name='2'>
            <option value='yes'>Yes</option>
            <option value='no'>No</option>
        </select>
    </div>
</body>

    Basically put the div with the ajax loader first in your document and hide and show it as necessary.

    • 0