Search code examples
jqueryajaxloadinginsertafter

In jquery, how to show ajax progress image without shift controls to the right over

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();
});
Solution

  • 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.