Question

I have searched for the answer to this and the reason I’m not finding it could just be that I’m completely botching my script from the getgo, so please anyone who can help I greatly appreciate it.

I have a javascript function which fires onClick of a form submit and runs an ajax call to script1.php, then starts a timer with setInterval. setInterval is calling another javascript function to poll an output file from script1.php so we can get new data added to the screen. This part works fine.

However, I’d like to stop the timer when script1.php is done processing. How do I do this? I’ve tried putting in a clearInterval(myTimer) in script1.php as the last statement it runs, and it seems to be showing up in the browser, but it’s not stopping the timer.

<script type="text/javascript">

var myTimer;
var file1 = "script1.php";
var file2 = "script2.php";


function startTimer(myTimer) {
  myTimer = window.setInterval(loadData, 2000);
}

function stopTimer() {
  clearInterval(myTimer);
}

function startData()
{
ajaxRequest(file1,data);
startTimer(myTimer);

}


function loadData()
{
ajaxRequest(file2)
}


</script>


<form action="index.php" method="post">
<div style="text-align:left;width:300px;">
<textarea style="width:300px;height:200px;"> </textarea><BR>
<button type="button" onclick="startData()">get data</button>
</div>
</form>

<div id="myDiv" style="text-align:left;width:500px;border:solid 1px #ccc;padding:50px;">
please enter data above
</div>

Answer 1

Yes, you botched it. You should just have PHP return the data directly to the script that does the AJAX call.

On AJAX success, any text outputted by the PHP script will be available to the success callback.

If you were using JQuery, it would be as simple as:

$.ajax({
   url: 'someurl',
   success: function(response) {
      // do whatever with response
   }
});