When attempting to display an indicator while performing an ajax request, I was advised to have the indicator with an animated gif placed within the page element. Then, upon the successful completion of the ajax function, replace it with the desired data.
However, I encountered difficulties with this process. If I add the indicator source using src="ajax-loader.html", the ajax call leaves it in place without replacing it with the data. Alternatively, if I use .load("ajax-loader.html") before the ajax call, the indicator isn't shown at all. Adding the indicator within the ajax call in the 'beforesend' event also yields no results. Even utilizing two separate ajax calls - one for the indicator and one for the data - did not resolve the issue. There must be a solution to properly display the indicator in this simple code.
The following is the HTML code for the page element:
<iframe id="lcupco" style="position: relative; top: 5px; width: 100%; height: 200px; border: 2px solid grey; margin-bottom: 15px;"></iframe>This is the HTML code for the indicator:
<html>
<head></head>
<body>
<img src='images/ajax-loader.gif'/>
</body>
</html>
Below is the code implementation:
-
Calling .load:
$(document).ready(function(){ $('#lcupco').load("ajax-loader.html");}); $.ajax({ url: 'luxcal/index.php?cP=40', cache: false, async: true, success: function(data) { $('#lcupco').html(data); }, }); Using 'beforesend'
$.ajax({
url: 'luxcal/index.php?cP=40',
cache: false,
async: true,
beforeSend: function() {
$('#lcupco').load('ajax-loader.html');
// $('#lcupco').html('<html>Initializing calendar...</html>'); //simple text didn't load either.
},
success: function(data) {
$('#lcupco').html(data);
},
});
- Utilizing two ajax calls - one for the indicator and one for the data
$.ajax({
url: 'ajax-loader.html',
cache: false,
async: true,
success: function(data) {
$('#lcupco').html(data);
},
});
$.ajax({
url: 'luxcal/index.php?cP=40',
cache: false,
async: true,
beforeSend: function() {
$('#lcupco').html('<html>Initializing calendar...</html>');
},
success: function(data) {
$('#lcupco').html(data);
},
});