Refresh div on same page with external fetched data

Question

I am stuck again with a problem, let me explain it to you.

Inside the div I have fetched data with HTML SIMPLE DOM from other site. Like

<div id="data">.....</div>

It will refresh each and every time user will refresh the page. But I want something extra. What I wanna do is, refresh the div (inside which external data is fetched and added) periodically after 5 seconds.

Both the PHP SIMPLE HTML DOM script and this div is on same page.

Now I only need, any jquery or javascript code to refresh the div with data id after each 5 seconds with new data fron other site and all this without refreshing the whole page.

UPDATE:

I have used this code

$(document).ready( function() {
function getTheTime(){
$.get('http://your-domain/file.php',function(data,status){
        $('#data').html(data);
});
}
var refresh = setInterval(
        "getTheTime()",
        5000
    );
});

But the problem is very very strange, why it is not refreshing the div? Infact I have set alert for the interval but it also didn't worked. What the real problem is? Why it is not getting data from file.php and why actually it is not refreshing the div??

I am using latest jquery CDN. http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

does this help: http://stackoverflow.com/questions/15998853/refresh-a-div-with-php-data-every-10-seconds-using-jquery ? — Maximus2012, Aug 06 '13 at 13:57
I have tried this but it didn't helped because the fetched data and script is on the same page. — Ahmed Habib, Aug 06 '13 at 13:58
you need: `setInterval`, ajax, and `$.load`. the data you want to load will need to be in a separate file. — user428517, Aug 06 '13 at 13:58
Include attempted solutions, why they didn't work, and the expected results. See also: [**Stack Overflow question checklist**](http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist). As sgroves stated, you might want to do something like this: `var timer = setInterval(function(){$('#data').load('myExternalURI')},5000);` if you use jQuery. — Jeff Noel, Aug 06 '13 at 14:03

score 0 · Answer 1 · answered Aug 06 '13 at 14:38

0

$(function() {
    setInterval(function(){
        $('#data').load('site.php');
    }, 5000);
});

answered Aug 06 '13 at 14:38

mavili

3,385
4
30
46

No refreshing the page at all dear. – Ahmed Habib Aug 06 '13 at 15:10

Glitch Desire · Answer 2 · 2013-08-06T15:09:55.960

0

Definitely a job for AJAX...

Since you say you're already using jQuery, I'll walk you through the steps quickly to get an AJAX function set up and run it on an interval.

Step 1: Create a PHP file which gets the data you want to put in the DIV...

Just make a PHP file and put the code in to get the data:

<?php echo "The time is " . date('Y-m-d H:i:s');

Step 2: Set up an AJAX function to get the data from that file...

function getTheTime(){
    $.get('http://yourdomain.com/ajax/getthetime.php',function(data,status){
        $('#data').text(data);
    });
}

(It would be possible to use the .load function instead, but it's far less flexible if you want to do anything with the data before putting it in the DIV).

Step 3: Call that function on an interval...

Next, we need to set up an interval to call the new function every 5 seconds.

$(function(){
    var refresh = setInterval(
        getTheTime(),
        5000
    );
});

edited Aug 06 '13 at 15:09

answered Aug 06 '13 at 14:40

Glitch Desire

14,632
7
43
55

1

@JeffNoel - Valid point. Although not all cross-site calls in JavaScript ARE malicious, this may be detected as a cross-site scripting request IF you use multiple origins. – Glitch Desire Aug 06 '13 at 14:42
Let me try this help. – Ahmed Habib Aug 06 '13 at 14:52
@AhmedHabib Does it work if you remove the quotes around the function in the interval declaration? – Glitch Desire Aug 06 '13 at 15:10
Np. It didnt worked, please keep in mind that on other page am fetching data from other site. – Ahmed Habib Aug 06 '13 at 15:14
@AhmedHabib, I'm going to need more than 'It didn't work.' :) Open up Firebug or Developer Tools please and check the Net response (if applicable), try accessing the PHP file in the JS directly. – Glitch Desire Aug 06 '13 at 15:28
I have solved it, there was error in other javascript source. It was making javascript to not work. :) – Ahmed Habib Aug 06 '13 at 16:39

score 0 · Answer 3 · edited May 23 '17 at 12:11

Instead of using setInterval to call the function every 5 seconds, you can use simple long polling technique to refresh your div every 5 seconds. The problem with setInterval is that if the ajax request doesn't complete in specified time (5 secs here) there will be the chain of ajax requests.

   function getTheTime(){
     $.ajax({
        type: "POST",
        url: "http://your-domain/file.php",            
        success: function(response) {
                   $('#data').html(response); //update your div
                 },
        complete: function(){
                   setTimeout(
                        getTheTime, /* Refresh time */
                        5000 /* ..after 5 seconds */
                    );                
                },
        error: function(XMLHttpRequest, textStatus, errorThrown){
                    //display you error message               
                },
        timeout: 5000 //Timeout is necessary to prevent chaining of unsuccessful ajax request    
      });        
    }

Refresh div on same page with external fetched data

3 Answers3

Definitely a job for AJAX...