Home/ Questions/Q 6984311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:31:59+00:00

To have an indicator while doing an ajax request, I got information saying that

  • 0

To have an indicator while doing an ajax request, I got information saying that I should have the indicator with the animated gif placed in the page element, then on success of the ajax function replace the data.

If I add the indicator source with src=”ajax-loader.html”, the ajax call leaves it in place and doesn’t replace it with the data. If I add the indicator source with .load(“ajax-loader.html”), before the ajax call it isn’t shown at all. If I add it in the ajax call in the beforesend event, it isn’t shown either. If I make two ajax calls, one to load the indicator, one to load the data the same happens. There must be a way to show the indicator in this simple code.

This is the HTML 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 for the indicator.

<html>
<head></head>
<body>
    <img src='images/ajax-loader.gif'/>
</body>
</html>

This is the code

  1. 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);   
    },
});

  2. 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);   
            },
    });
  1. Using two ajax calls: one for indicator and one for 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);   
    },
});

`

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can add the pre-loader gif to the index page. No need of loading it separately. Then on the load of iframe you can hide or remove it. You can see a demo here : http://jsfiddle.net/diode/dAdtU/ . Here iframe source is set when load button is clicked. This can be done on page ready, or even you can set the source directly. When the load even gets triggered preloader is removed.

    Using ajax you can load html content for replacing/modifying the inner html of a particular element in the page ( div, p, ul etc..). But using it to load the entire page is not recommended.

    • 0