1

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>
abisson
  • 4,365
  • 9
  • 46
  • 68
  • 2
    Syntax error @ `data: "datafile="data_file_path,`, you forgot the + sign. – Styxxy May 23 '12 at 23:51
  • How about simply having a gif spinner - simple and peace – Anil Shanbhag May 23 '12 at 23:53
  • 1
    Do not do synchronous calls! They are evil and lock up the browser. Also why are you making an Ajax call with jQuery to fetch a non jQuery Ajax call. It is like installing a new door in front of an old door and to get into your house you need to open both. Make one call to start! – epascarello May 23 '12 at 23:54
  • Don't use ajax to load your page, load it directly! If you want to load some things delayed because your page is big, load data instead of html! – Bergi May 23 '12 at 23:58
  • 1
    Why are you setting async to `false` in `xmlhttp.open` if you want it to be asynchronous? – Richard Simões May 24 '12 at 00:12
  • So, you want to make an Ajax call to load a script that makes a synchronous Ajax call? This can be done, but the sync call is still going to block when it runs. – apsillers May 24 '12 at 00:18
  • What are you actually trying to do? Forget the spinner thing for a while, and tell us what your code is supposed to do. Why do you want the ajax call for? Which are the PHP files involved? The scenario you describe is just too confusing! – bfavaretto May 24 '12 at 00:25
  • aaaaa! Alright thanks, didn't read enough on xmlhttp.open() ><. Let me read on that – abisson May 24 '12 at 00:26
  • 2
    Also: decide if you're using jQuery (like on the first snippet) or not. If you want to use it, scratch the second snippet and make it like the first one. No reason to mix two ways to do an ajax request. – bfavaretto May 24 '12 at 00:27
  • I got it to work... but now I need to call another function that returns me an object. That function takes the XML object returned from my async call. I would like that function to also be called async. Any idea how to call a regular javascript function async...?! – abisson May 24 '12 at 01:37

2 Answers2

0

Add a beforeSubmit handler which loads a spinner or something to let the user know the page is loading.

$.ajax({
  type: "POST",
  url: "resources/scripts/loadXML.php",
  data: "datafile="data_file_path,
  beforeSubmit: function(){
        //show a spinner here
  },
  success: function(msg){
    //remove spinner
    alert( "Data Saved: " + msg );
  }
});
Ayush
  • 41,754
  • 51
  • 164
  • 239
  • This returns me the plain Javascript in the loadXML.php, not the RESULT of running the javascript... – abisson May 24 '12 at 00:09
0

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?

ehudokai
  • 1,928
  • 12
  • 9