How to refresh position on website using AJAX

Question

I have a website that reads from a MySQL database and displays the most recent data on a map. How can I make this data refresh on the website once a second? Do I need to put my AJAX code in a timer? Does the PHP script that queries the database need to be on a timer?

var geojson;
$(document).ready(function () {
  var a = $(this).val();
  console.log(a)
  $.ajax({
    type: "POST",
    url: "b.php",
    async: false,
    data: {c: a},
    datatype: 'json',
    success: function (d) {
      var e = JSON.parse(d);
      geojson = e;
      new L.GeoJSON(e);
      L.geoJSON([e], {
        onEachFeature: onEachFeature,

        pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng, {
            fillColor: "#ff0505",
            fillOpacity: 1,
            radius: 5,
            weight: 1
          });
        }
      }).addTo(mymap);
    }
  })
});

If you are using `datatype: 'json',` then you should not need to do `var e=JSON.parse(d);` — RiggsFolly, Apr 11 '18 at 13:52
You can routinely update the geoJSON variable, but unless something is somehow listening for it to change, doing so won't update your website. — Kevin B, Apr 11 '18 at 15:16

score 0 · Answer 1 · edited Apr 12 '18 at 07:43

I would recommend removing the async:false option, since using synchronous AJAX calls is not a good practice.

Then you can keep track of the time before performing a request, and upon completion, and calculate the timeout accordingly:

var func = function(){
    var interval=5000;
    var start = new Date();
    $.ajax({})
   .always(function(){
       var end = new Date();
       var timeout = interval - (end-start) 
       var timeout = timeout < 0 ? 0 : timeout;
       setTimeout(func, timeout);
   });
};
func();

You can alternatively utilise _.throttle from lodash.

var func = _.throttle(function(){
   $.ajax({....})
   .always(function(){
      func(); 
   });
}, 5000);

func();

In both of the above cases, a request will be performed every 5 seconds, or upon request completion (in case it lasts more than 5).

That worked. It is getting the new values as they come in. However, it is no longer plotting the point. Console not showing any errors. hmmm — javanewbie14, Apr 11 '18 at 16:28

score -1 · Answer 2 · edited Apr 11 '18 at 13:54

-1

You can compare data of latest dataresult and use with

setTimeout(function(){  
    yourfunction_name() 
}, 1000);

edited Apr 11 '18 at 13:54

RiggsFolly

93,638
21
103
149

answered Apr 11 '18 at 13:53

Parasp2008

21
3

How to refresh position on website using AJAX

2 Answers2