Refresh javascript calculations without reloading page

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.

what is the purpose of $.get("generateKML.php",function(data,status){});? — Arun P Johny
– Arun P Johny, Commented Apr 20, 2013 at 6:01
I'm using the get call to allow the generateKML.php page to be called from within my main index.php page. I tried quite a few things and this is the only arrangement that I could get to work. I'm sure I have errors but it was the only thing that worked. Please let me know if you have any suggestions to improve it. Thanks. — Zach C
– Zach C, Commented Apr 20, 2013 at 6:03

razz · Accepted Answer · 2013-04-20 06:35:47Z

0

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();
}

edited Apr 20, 2013 at 6:35

answered Apr 20, 2013 at 6:29

razz

10.1k7 gold badges55 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zach C Over a year ago

Unfortunately, when I used this it reloaded the page on submit so I can't bring the new KML into the page. Is there somewhere that I can use "return false;"

razz Over a year ago

you can either change the submit input to button or use event.preventDefault like i just added in the code above.

Zach C Over a year ago

The above change didn't work but when I changed the submit to button it works just like intended. Thank you all for the help.

Arun P Johny · Accepted Answer · 2013-04-20 06:04:25Z

0

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)
        });
    }
})

answered Apr 20, 2013 at 6:04

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

4 Comments

T.J. Crowder Over a year ago

You want to remove the initial $.get, which is a no-op.

Arun P Johny Over a year ago

@T.J.Crowder I've mentioned it in my comments to the question, but the OP's comments made me doubtful

Zach C Over a year ago

What would be the way to write it without the $.get?

Zach C Over a year ago

@Arun P Johny I tried it and it still works the same way. It doesn't create a new KML. I also tried using setInterval but no luck.

Collectives™ on Stack Overflow

Refresh javascript calculations without reloading page

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related