3

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();
});
leora
  • 188,729
  • 360
  • 878
  • 1,366

2 Answers2

2

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.

locrizak
  • 12,192
  • 12
  • 60
  • 80
0

If you're using jQuery UI, you can use the position method to absolutely position the spinner relative to the dropdown:

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

spinner.position({
    my: "left top",
    at: "right top",
    of: item,
    collision: "fit"
});

spinner.insertAfter(item);
Richard Poole
  • 3,946
  • 23
  • 29