Develop Reference

Web: How do we display content on the Client after making a slow Server Side Call?

I am working on a Web Application for which I am currently doing something like this:
Page1.php posts to Page2.php.
Page2.php contains an HTML file with 2 Javascript files. The first Javascript file uses an AJAX call to trigger Page3.php. The second Javascript file listens to Result.json for results.
Page3.php invokes a Python Script, Task.py.
Task.py takes about 15 minutes to run, writes results to Result.json which I need to display on Page2.php.
The problem here is 1st that the since Task.py is such an expensive call, I end up on Page2.php on Chrome and Chrome pops open the window asking me if I would like to kill or wait for the page to load and the Web Page eventually becomes unresponsive (Times Out).
As a result, I become unable to display the results stored in Result.json on the page.
Another problem that I am having is that the Task.py file that I am executing appears to be a blocking call, so when my first Javascript makes the AJAX call, it prevents my 2nd Javascript from listening to Result.json for results (When Javascript makes an AJAX call, it waits there until it gets the response back). So even if there was content already in the Json file, it wouldn't pick up on it until the 1st AJAX call returns.
The Listening Javascript file looks something like this:
while(true){
result = setTimeout(myFunction, 60000);
if(result === true){
console.log("Quitting the loop");
break;
}
}
where myFunction parses the Json file and manipulates the DOM to display the content.
Any Advice?

You can use Server Push/Websocket for it. If your server is ready to serve the data, it can notify the client side to get the data. Just search for socket.io / nodejs.
first Ajax call starts page3 and set event listener to server push message. If it receives the message, simply get content of Result.json.

Keep timer (setInterval) running while reloading page

Once I load a webpage, I insert some Javscript via the console. I was wondering if it's possible for me to, using either Javascript or jQuery, reload the page (not from cache) while keeping a setInterval that I have running. I'm familiar with location.reload(), but that terminates it.

When you reload a page, the entire page context including all running JS is completely destroyed. You cannot keep a setInterval() running while its host page is reloaded.
You can create a signal for the new page to start the interval going again itself using a cookie, query parameter or local storage value (query parameter is probably the most appropriate). If you go this way, then you need to code the page to look for a specific query parameter and if it finds it, then the page should start the designated setInterval() itself. You can even pass some data in the query parameter (such as how much more time until the next interval should fire, etc...).
Another option is to not actually reload the page, but instead to refresh the content manually by getting new content via an ajax call and then inserting it into the current page. This allowed the current page context and running interval timers to continue running.

Not possible unless you fetch the page using Ajax request, then replace the body while the setInterval Is working

Periodic javascript requests stop happening

I am using RightJS which is very similar to jQuery on a webapp. I have setup a periodic event that is supposed to send a request to the server and update an element on the page with the result every second. The code looks like this.
var update_temp = function (){
$('current_temp').load("/api/temp");
}
update_temp.periodical(1000);
This code seems to work fine for a while but randomly it will stop working and the element stops being updated. I put a breakpoint in the javascript code in the browser at the line $('current_temp').load("/api/temp"); and the breakpoint does continue to get hit every second. However, for some reason the browser doesn't seem to be issuing the request to the server. In the Chrome developer tools there is a 'Network' tab that lets you see requests that are being made. I see no more requests happening.
Could this be a cacheing problem? Or could it be that one of the requests never returned so the browser stops issuing requests to that url?
If I type the .../api/temp directly into the browser address bar and hit refresh it returns the temperature just fine every time.
Any suggestions?

I would try the caching problem. Try to add a timestamp after each request .. i. e. something like this:
var update_temp = function (){
$('current_temp').load("/api/temp?killcache=" + (new Date()).getTime());
}
update_temp.periodical(1000);

passing parameters from js to .aspx page using windows location

I can pass parameters from javascript function to an aspx file. I use windows.location.href for that.
When the execution gets to the aspx page, it runs and it tries to call multiple WCF services using those parameters. But the moment it calls the first one, the IE window on the back takes me to the root view that lists all available aspx pages.
i've tried setting a breakpoint on the page load that is receiving those parametrs. I try to step through the codes, it will let me do that just fine but when it calls the first WCF service, it will do the above to the IE window BUT it will still let me continue steppng through the code after that.
IE window should be waiting for me until I am done executing code on the server, right?
It has something to do with the combination of WCF calls & JS window.location.href statemetn. I know that for sure. It consistently is doing that at a specific line of code (the first WCF call).
I don't see this behavior if for instance, I try to pass the parameters in a session variable coming from another .aspx page.
Has anyone seen this behavior? do you know what is going on?
Thanks
--- REPHRASED---
thank you for the feedback.
hari, I am doing this from my local machine running VS 2008. I do use forms authentication.
Maybe you didn't get my questions, because I didn't phrase it properly like Diodeus thinks, so let me try again:
I collect input values form one page using JS. Then I need to pass these parameters to an aspx page using windows.location.href.
I set up a breaking point at the page load event to make sure that execution is reachign the aspx page. and it does.
This page successfully receives those variables and does more processing like calling external WCF services. At this point the IE window is locked and becomes unviewable because the execution is still taking place. This is normal (is this part that throw you off?).
The moment I start executing a call to the WCF service, the IE window finishes loading and it takes me to the direct browsing WHILE I am still debugging inside visual studio (like a line of code beomes highlighted in yellow). I can continue stepping throw using F10 or F11, but my IE window on the back is done!? It should continue waiting for me until all lines of codes finish processing.
I hope this helps. Pls let me know if it does and be able to help me figure it out.

Disable directory browsing for that website (at IIS), and set a default page for the website (also at IIS).

Run a function on load and then every 10 minutes

Is there a way to execute a javascript function when the page loads and then not again for another 10 minutes. Even if user browses to another page? If they dont want the function to run again until the 10 minutes is up?

Simply create the function you want to execute onload, call it once on DOM ready, and then use setTimeout()
<script type="text/javascript">
function doSomething() {
alert("Doing something here");
}
window.onload = function () {
doSomething(); //Make sure the function fires as soon as the page is loaded
setTimeout(doSomething, 600000); //Then set it to run again after ten minutes
}
</script>
Edit:
Didn't notice the part about even if they're on another page. If it's another page on your website, you could set a cookie once the page loads, and include a timestamp for when the cookie was set. In the window.onload of the rest of your pages, you can then read that timestamp, and calculate whether 10 minutes have passed or not. If it has, call the function again.
Edit: 10 minutes is 600000 milliseconds

Even if user browses to another page?
Nope. Once your page closes, you no longer have control over what happens.

function callfunction () {
// do something
}
window.onload = function () {
// Initial function call
callfunction();
setInterval(function () {
// Invoke function every 10 minutes
callfunction();
}, 600000);
}

Use setInterval or setTimeout to make something happen in the future.
But as soon as the user leaves your page those timers will be cancelled - the entire content will be unloaded.

You can use:
setTimeout(alert('After 10 secs'),10000);

If the user visits another website in the same tab, you're out of luck; once your webpage is closed the javascript dies.
However you're in luck if the user is just visiting other pages on your website. You can do this as follows... but it requires a fundamental redesign of your website. You'd have to use a framework which wraps all link-clicks in XHRs (XML HTTP Requests) and replaces the page with the new data, giving you the illusion that you are clicking links (which you are, but the browser never refreshes the page). This can be done with an iframe or not. This is how GMail works.
You could code such a framework yourself, but you're better off using a framework which has url-rewriting support for faking a history (or else your website won't work well with user histories).
To answer your question about the "every 10 minutes", use setInterval(myFunction, 10*60*1000) (which may have issues in some browsers due to optimizations).

Assuming that you use a server language, you can set a session variable at startup (startup date/time) and then, using setInterval, compare current time with startup date/time.

you're required to save the state in a remote server.
this is your steps:
the javascript function loads, no matter where or when, it loads.
when loaded (the javascript fn) calls a remote server using a UNIQUEID, that can be obtained via cookies, or session variable, from the loggedin user id...whatever.
you send a request to a server using such UNIQUEID (via ajax, normally), your server will tell you if such process must start again or you should avoid it (a page jump as an example or a page refresh in a different browser using the same login, it depends on your business logic).
the response from step3 is used to execute/initialize the javascript loader or not.