CODEWITHSUNDEEP
phpjqueryajax
Chaitanya K
Chaitanya K

Reputation: 1852

Php ajax refresh div after particular time

Here i am able to load div value's after a time interval

But I also need to load the div values by default also.(when i the page loads)

How to ?

<script type="text/javascript">

$(document).ready(function() {                               
 setInterval(function(){
     $("#Temperature").html('');
     $("#Humidity").html('');
     $("#Weather").html('');
     $("#Pressure").html('');
     $("#Wind").html('');
     $("#Sunrise").html('');

  $.ajax({
       url: 'api.php',
       dataType: "json",
       type: 'GET',
       success: function(data) {
          if (data) {
            alert('Hi');
            document.getElementById("Temperature").innerHTML = data['temperature'];
            document.getElementById("Humidity").innerHTML = data['humidity'];
            document.getElementById("Weather").innerHTML = data['condition'];
            document.getElementById("Pressure").innerHTML = data['pressure'];
            document.getElementById("Wind").innerHTML = data['wind'];
            document.getElementById("Sunrise").innerHTML = data['sunrise'];
          }

       }
    });
  }, 600000);
 });

</script>


<div id="Temperature"></div>
<div id="Humidity"></div>
<div id="Weather"></div>
<div id="Pressure"></div>
<div id="Wind"></div>
<div id="Sunrise"></div>

api.php

This the api.php from where i am trying to load the data

<?php
  include('yahoo_weather_codes.php');
  //error_reporting(0);
    $BASE_URL = "http://query.yahooapis.com/v1/public/yql";
    $yql_query = 'select * from weather.forecast where woeid in (select woeid from geo.placefinder where state="Andhra Pradesh" and city="Amaravathi")'; 
    $yql_query_url = $BASE_URL . "?q=" . urlencode($yql_query) . "&format=json";
    // Make call with cURL
    $session = curl_init($yql_query_url);
    curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
    $json = curl_exec($session);
    // Convert JSON to PHP object
    $phpObj =  json_decode($json);
    //echo '<pre>';print_r($phpObj).'<pre>';
    $fahrenheit = $phpObj->query->results->channel->item->condition->temp;
    $celsius = round(5/9*($fahrenheit-32));


   $yahoo_data = array();
   $yahoo_data['temperature'] = $celsius;
   $yahoo_data['code'] = $phpObj->query->results->channel->item->condition->code;
   $yahoo_data['humidity'] =$phpObj->query->results->channel->atmosphere->humidity;
   $yahoo_data['condition'] =$phpObj->query->results->channel->item->condition->text;
   $yahoo_data['pressure'] =$phpObj->query->results->channel->atmosphere->pressure;
   $yahoo_data['wind'] =$phpObj->query->results->channel->wind->speed;
   $yahoo_data['sunrise'] =$phpObj->query->results->channel->astronomy->sunrise; 
   $yahoo_data['sunset'] =$phpObj->query->results->channel->astronomy->sunset;
   $yahoo_data['date'] =$phpObj->query->results->channel->item->forecast['0']->date;
   $yahoo_data['city'] =$phpObj->query->results->channel->location->city;
   $yahoo_data['country'] =$phpObj->query->results->channel->location->country;
   $yahoo_data['region'] =$phpObj->query->results->channel->location->region; 
   $yahoo_data['key'] = $phpObj->query->results->channel->item->condition->code;

   echo json_encode($yahoo_data);

?>

Upvotes: 0

Views: 864

Answers (2)

martynasma
martynasma

Reputation: 8595

Just move your AJAX loading to a separate function which you can use both on document load and in our interval. And since you already using jQuery, you may as well replace cumbersome getElementById with equivalent jQuery selectors:

<script type="text/javascript">
$(document).ready(function() {
  function updateData(){
    $("#Temperature").html('');
    $("#Humidity").html('');
    $("#Weather").html('');
    $("#Pressure").html('');
    $("#Wind").html('');
    $("#Sunrise").html('');

    $.ajax({
      url: 'api.php',
      dataType: "json",
      type: 'GET',
      success: function(data) {
        if (data) {
          alert('Hi');
          $("#Temperature").html(data['temperature']);
          $("#Humidity").html(data['humidity']);
          $("#Weather").html(data['condition']);
          $("#Pressure").html(data['pressure']);
          $("#Wind").html(data['wind']);
          $("#Sunrise").html(data['sunrise']);
        }
      }
    });
  }

  updateData();

  setInterval(updateData, 600000);
});
</script>

Upvotes: 2

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

Try like this:

keep your updated content in a file Recent_updates.php and hide your current content in specific time and show the updated content.

// Delay is the time in milliseconds
var delay = 60000;

var refreshId = setInterval(function () {
    $('#YourDivID').fadeOut("slow").load('Recent_updates.php').fadeIn("slow");
}, delay);

Upvotes: 2

Related Questions