I am currently working on a dynamic website with jQuery, utilizing AJAX operations extensively. Whenever an AJAX operation is initiated, a progress bar is displayed in the center of the webpage.
However, I am facing an issue where visitors find it cumbersome to track the progress bar located far away from the clicked element. They have to constantly shift their focus between the element and the progress bar, which can be quite distracting.
What would be the optimal way to position the progress bar near the triggering element?
My initial approach was to set up a handler that executes when the next AJAX request kicks off, like this...
$(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();
});
Upon launching an AJAX operation, the progress bar emerges at the center of the screen as planned using CSS. However, I aim for it to be displayed next to the element that triggers the AJAX operation, for instance, by clicking it.
I recently discovered that instead of appending the div element, which then becomes the progress bar as a child of a fixed element, I can resolve this by making it a sibling of the active element and removing its position CSS attribute as shown below...
$(document).on('ajaxStart', ()=>{
$focusedElem = $( document.activeElement ) //the currently focused element
$focusedElem.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();
});
By implementing this adjustment, the progress bar now appears alongside the triggering element. However, this method may disrupt the layout of neighboring elements when the progress bar manifests.
Do you think this is the most effective solution, or is there a more efficient approach to identify the element that initiated the AJAX request without solely relying on the focused element?