Refresh javascript calculations without reloading page - php

Question

I have a submit button that uses a javascript xmlhttp request to call a php page that's sole function is to write a kml file for a google earth window on my main page. The php page is not viewable within the web browser as html.
The formulas in the php file work as intended. The problem I'm having is that after I manually press submit the first time I would like the script to continue to repeat every 5 seconds until I manually reload the page (or press a button to stop the script). Because I plan on having multiple users at the same time viewing the page each user is assigned a random 5 digit number to hold their session information and to create the kml files within the newly created session folder until they reload the page (which will then create a new session number for the user).
Because each user is designated with a unique session id the page cannot reload as the php calculations repeat. Because of this I have a return false line at the end of my javascript function.
I would like to be able to use javascript to call setInterval to repeat the function without reloading the page. If the page were to reload the just created kml file will now not be viewable within the new session. Let me know if anyone has any suggestions. Below is the applicable code.
DIV id on main index.php page
<div>
<form id="KMLsubmit" name=KMLsubmit >
<input class="KMLsubmit" type="submit" value="Create KML" onclick="createKML()"/>
</form>
</div>
JavaScript function on main index.php page
function createKML() {
$('#KMLsubmit').submit(function () {
$.get("generateKML.php",function(data,status){
});
//alert("Generating your KML files!");
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("kmldetails").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","generateKML.php?session=" + session,true);
xmlhttp.send();
return false;
});
}
Let me know if anyone has any suggestions on how to do this. Thanks for the help.

Answer 1

make createKML() external, call it on KMLsubmit submit event, set timeout function of 5 sec and clear the timeout on next submition then restart the process like this:
var myTimer = false;
function createKML() {
var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("kmldetails").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST", "generateKML.php", true);
xmlhttp.send("session=" + session);
myTimer = setTimeout(function(){createKML()}, 5000);
}
document.getElementById('KMLsubmit').onsubmit = function(event){
(event.preventDefault) ? event.preventDefault() : event.returnValue = false; //prevent the form from submitting and reloading the page
if(myTimer) clearTimeout(myTimer);
createKML();
}

Answer 2

Try
$(function(){
$('#KMLsubmit').submit(function () {
$.get("generateKML.php",function(data,status){
});
update();
return false;
});
function update(){
$.ajax({
url: 'generateKML.php',
data: {
session: session
}
}).done(function(result){
$('#kmldetails').html(result);
setTimeout(update, 5000)
});
}
})