Question

I have a Javascript function that takes quite a long time to run. I want to display a loading icon until the javascript function returns, but nothing appears on the page while the function is loading; the page is white and doesn’t do anything.

If I debug using Chrome, I see my loading icon before the function is called, and it then disappear when it is called. I thought I could do an AJAX call to a PHP page that contains the Javascript, but the AJAX response actually CONTAINS that javascript…

$.ajax({
  type: "POST",
  url: "resources/scripts/loadXML.php",
  data: "datafile="data_file_path,
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

and I get that back. MSG is equal to this (which is actually the script in the page).

<script type="text/javascript">

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",<?php echo json_encode($data_file); ?>,false);
xmlhttp.send();
return xmlhttp;
</script>

I simply don’t want my page to be white will it loads that function… Any ideas!?

EDIT:

I want to run this code asynch so that it DOESN’t BLOCK my page. I want to see a spinner while this function runs. Previously, it was on this same page so I could easily set the file to open, but now if I make an asynch call, I need to put it in another file. BUT, how do I pass a parameter to this file?!:

<script type="text/javascript">

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",**$NEEDTOGETTHEFILENAME**,false);
xmlhttp.send();
return xmlhttp;
</script>

Answer 1

Since you are doing the request using jquery the easiest way is to wrap the request in

$(document).ready(function(){
  //show spinner
  //your ajax request here
}

and hide or replace the spinner with your content when the request returns.

This begs the question: Why are you doing 1 ajax request to get a script to do another ajax request? What are you actually trying to accomplish here?