clear before show new data

Question

I have javascript code :

this script uses easyui and jquery, and it creates clones based on below html code, I want to execure get_data function every 5 seconds and each time the screen be clear and new data generated, but above script append new data to prevoius data, how can I clear screen and then execute get_data function?

Ankit Rastogi · Accepted Answer

Solution

Introduced a global template which is initialized on document.ready event with the content of template div(#template). Also introduced a content display area (#display-area)

For each for loop display area is cleared, a clone of the template is made and then filled with data.

script

< script type = "text/javascript" >
  var vehicles = {};
var locations = ["1A", "1D", "2A", "2B", "2C", "2D"];
var template
$(document).ready(function() {
  $(".model1").hide();
  template = $('div#template>div.model1:first');
  setInterval(function() {
    get_data();
  }, 5000);
});

function get_data() {

  for (var i = 101; i <= 117; i++) {
    var sensors = new Array();
    var temp = Math.ceil(Math.random() * 50) - 20;
    var pres = Math.ceil(Math.random() * 40) + 100;
    for (var j = 0; j < locations.length; j++) {
      if (pres != 100) {
        pres += Math.ceil(Math.random() * 10) - 5;
        temp += Math.ceil(Math.random() * 6) - 3;
      } else {
        pres = 0;
        temp = 0;
      }
      var highPres = pres > 140;
      var lowPres = pres < 100;
      var highTemp = temp >= 75;
      var lowBattery = Math.ceil(Math.random() * 80) < 2;
      sensors.push({
        location: locations[j],
        pres: pres,
        temp: temp,
        lowPres: lowPres,
        highPres: highPres,
        highTemp: highTemp,
        lowBattery: lowBattery,
        lowPresAlarm: 100,
        highPresAlarm: 140,
        highTempAlarm: 80
      });
    }
    vehicles[i] = {
      code: i,
      sensors: sensors
    };
  }
  showView1();
};

function showView1() {
  $("#display-area").empty();
  for (var vehicleCode in vehicles) {
    var vehicle = template.clone();

    var vehicleData = vehicles[vehicleCode];
    for (var j = 0; j < vehicleData.sensors.length; j++) {
      var sensorData = vehicleData.sensors[j];
      if (sensorData.pres != 0 && sensorData.temp != 0) {
        vehicle.find("div[location='" + sensorData.location + "'] div:first").html(sensorData.pres);
        vehicle.find("div[location='" + sensorData.location + "'] div:last").html(sensorData.temp);
      }
      if (sensorData.highPres || sensorData.lowPres || sensorData.highTemp) {
        vehicle.find("div[location='" + sensorData.location + "']").attr("class", "tire-red");
      } else if (sensorData.lowBattery) {
        vehicle.find("div[location='" + sensorData.location + "']").attr("class", "tire-yellow");
      }
    }
    vehicle.appendTo($("#display-area")).show();
    vehicle.find("div:first").panel({
      title: "Truck: " + vehicleCode,
      tools: [{
        handler: function() {
          var vehicle_code = $(this).parent().parent().find("div[class='panel-title']").html();
        }
      }]
    });
  }
} <
/script>

html

clear before show new data

Answers (2)

Related Questions