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 开发者_StackOverflow中文版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();
});
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.
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);
加载中,请稍侯......
精彩评论