I am developing a dynamic website using jQuery which relies heavily on AJAX operations. Whenever an AJAX operation starts, a progress bar is shown which I have positioned in the middle of the web page.
I am finding it tiresome for a visitor switching their eyes from the element they have clicked to watch the progress bar which may be kilometers away from the element, then come back to the element or around it when the progress bar vanishes.
How should I position the progress bar around the element?
So far, I tried to register a handler called when the next AJAX request begins, as follows...
$(document).on('ajaxStart', ()=>{
$('#parentOfBar').append("<div id=progressBarElem style='display:none;position:absolute;top:50%;left:50%;padding:2px;' ></div>");
$('#progressBarElem').html('A moment, please wait...');
$('#progressBarElem').progressbar({value: false});
$('#progressBarElem').show();
});
When an AJAX operation begins, the progress bar appears at the center of the screen as I have specified using CSS. As I have stated, I would like it to appear next to the element that has triggered the AJAX operation (by say having been clicked).
I just figured out that instead of appending the div element (which becomes the progress bar once a child of some some fixed element), I could solve this by making it a sibling of the element which has the focus and removing its position CSS property as follows...
$(document).on('ajaxStart', ()=>{
$fucusedElem = $( document.activeElement ) //the currently focused element
$fucusedElem.parent().append("<div id=progressBarElem style='display:none;top:50%;left:50%;padding:2px;' ></div>");
$('#progressBarElem').html('A moment, please wait...');
$('#progressBarElem').progressbar({value: false});
$('#progressBarElem').show();
});
The progress bar now appears next to the element causing it (the progress bar) to pop up. This is by adding the progress bar as a sibling of the element that has the focus. This way, when the progress bar does appear, it interferes with the layout of the nearby elements.
Is this the best solution or could there be a better way of telling which element caused an AJAX operation to start instead of relying on the element that has focus?
