So I have a script I'm working on, within the script is a ajax call to another php file that pulls data from an api. There is three different functions to the api script. So when my ajax is called I have it showing a loading image but I also want it to display text depending on what function of the api script is running.
This is what I'm using now
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function loadingAjax(div_id) {
var divIdHtml = $("#"+div_id).html();
$.ajax({
type: "POST",
url: "testmash.php?tag=<? echo $ptag; ?>",
data: "tag=John&id=28",
beforeSend: function() {
$("#loading-image").show();
},
success: function(msg) {
$("#"+div_id).html(divIdHtml + msg);
$("#loading-image").hide();
}
});
}
</script>
<body onLoad="loadingAjax('myDiv');">
<div id="myDiv" style="margin-top:500" align="center">
<img id="loading-image" src="ajax-loader.gif" style="display:none;"/>
</div>
</body>
So when loading the testmash.php file I want to show my ajax-loader.gif plus a message that says "blah blah blah" for function 1 after function 1 is done and function 2 starts a new message appears saying"we are doing function 2" and so on for the amount of function I have or even like a check list when the ajax is called have a list with the three functions and as the complete have a green check mark or what not display next to it until its done. I hope this makes sense.
Add a div to your 'myDiv' call it with an id 'message' and change it with javascript accordingly when calling the functions?
Hopefully this answers your question.