CODEWITHSUNDEEP
javascriptjqueryajax
michelle
michelle

Reputation: 653

run php script every 10 seconds

I'm trying to use setInterval to execute the php script update.php every 10 seconds and refresh div id = verification. For some reason setInterval is preventing the script from functioning. Any suggestions on where to place\change setInterval would be appreciate as I'm stumped (sorry entry level javascript user here). For clarity I omitted all the non-relevant details, such as vars. 

<div id="verification"></div>

<script id="verification" language="javascript" type="text/javascript">
$(function() {
    $.ajax({
        url: 'update.php', //php          
        data: "", //the data "caller=name1&&callee=name2"
        dataType: 'json', //data format   
        success: function(data) //on receive of reply
            {
                var foobar = data[2]; //foobar
                $('#verification').html("(<b>" + foobar + "</b>)"); //output to html

            }
    });
});

setInterval(10000); //every 5 secs
</script>

Upvotes: 3

Views: 9573

Answers (4)

Tushar
Tushar

Reputation: 87233

Suggestions/Steps/Bugs:

  1. Create a separate function to perform ajax request
  2. Call this function on page load to run it when page is loaded
  3. Use setInterval() to call the function every n seconds
  4. id should always be unique. You're now using verification as if for <div> and <script>
  5. You can remove id and language attributes of <script>. Those are not required.

Code:

function update() {
    $.ajax({
        url: 'update.php', //php          
        data: "", //the data "caller=name1&&callee=name2"
        dataType: 'json', //data format   
        success: function (data) {
            //on receive of reply
            var foobar = data[2]; //foobar
            $('#verification').html("(<b>" + foobar + "</b>)"); //output to html
        }
    });
}

$(document).ready(update); // Call on page load
//                ^^^^^^


setInterval(update, 10000); //every 10 secs
//          ^^^^^^

Upvotes: 2

user2575725
user2575725

Reputation:

You are missing the function block:

setInterval(function() {
  // to do
}, 5000);

My suggestion is to go for setTimeout as you are running ajax it is not certain that it would complete within 5 seconds. In case if you wana go for it:

var dispatchUpdates = function() {
  setTimeout(pullUpdates, 5000);
};

var pullUpdates = function() {
  $.ajax({
    url: 'update.php',
    data: "",
    dataType: 'json',
    success: function(data) {
      var foobar = data[2];
      $('#verification').html("(<b>" + foobar + "</b>)");
      dispatchUpdates(); // next updates
    },
    error: function() {
      dispatchUpdates(); // retry
    }
  });
};

$(dispatchUpdates); //page load
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Upvotes: 1

m.antkowicz
m.antkowicz

Reputation: 13581

you are using setInterval in a wrong way - you can read about it here:

http://www.w3schools.com/js/js_timing.asp

Also please notice that AJAX calls are asynchronous - when program is going forward it doesn't mean that previous AJAX call has ended. You can "wait" for AJAX completition using some jQuery mechanisms like binding ajaxComplete or using when

Upvotes: 1

ROAL
ROAL

Reputation: 1779

setInterval() takes a function (that it should execute) as it's first argument.

Try this:

setInterval(function(){
  $.ajax({                                      
      url: 'update.php', //php          
      data: "",                        //the data "caller=name1&&callee=name2"
      dataType: 'json',                //data format   
      success: function(data)          //on receive of reply
      {
          var foobar = data[2];           //foobar
          $('#verification').html("(<b>"+foobar+"</b>)");     //output to html
      } 
  });
}, 10000);

Upvotes: 1

Related Questions