CODEWITHSUNDEEP
javascriptreload
Sherif
Sherif

Reputation: 359

Autorefresh div with javascript

I have been looking around for the simplest way to refresh a particular div on my page, automatically, every x seconds.

So far I've got:

<script type="text/javascript">
window.onload = startInterval;
function startInterval()
{
    setInterval("startTime();",1000);
}

function startTime()
{
    document.getElementById('time').innerHTML = Date();
}

However the last part where the innerHTML is set to the date function is what I'd like replaced by the content of the "time" ID, and not an actual date print.

I know I could load an iframe, or externa html page, but I would like to simply call upon an existing div on the page instead of having to change the existing content. Is that possible?

Thanks!

Edit: What I mean is I have a a div that looks like this on the page:

Some stuff

I would like to have that div refreshed every x seconds, so yes, you may ignore the Date() part of my example, I simply found that code as is but when I tried to remove the .innerHTML part it just does nothing, I think lol!

Upvotes: 2

Views: 26418

Answers (2)

Jared Farrish
Jared Farrish

Reputation: 49198

NOTE: The OP is actually wanting to reload a script in an ad service already included on the page. The following does not help with this; however, due to the way the question was asked, I'm leaving this answer since I think it could help others looking for the following type of solution. Just be aware this does not demonstrate how to "rerun" already included (presumably global and non-function'd) code.

Say I have the following div I'd like to dynamically refresh:

<div id="refresh">Refreshes...</div>

jQuery offers the $.ajax group of functions that allow you to dynamically request a page and use the response as HTML. For instance:

$(document).ready(function(){
    var $refresh = $('#refresh'),
        loaded = 1,
        data = {
            html: $.toJSON({
                text: 'some text',
                object: {}
            }),
            delay: 3
        };

    var refresh = function(){
        $.ajax({
            url: "/echo/html/",
            data: data,
            type: "GET",
            success: function(response) {
                $refresh.html($refresh.html() + '<br/>#' + loaded);
                loaded++;
                setTimeout(refresh, 3000);
            }
        });
    };

    refresh();
});

http://jsfiddle.net/Ah3jS/

Note, I'm using jsFiddle's echo/html/ functionality here as well. The data variable is tuned to working with this for demonstration purposes. In reality, the data sent with the request is either GET or POST variables like you work with normally. Also, I don't use response in success, but that's because it doesn't return anything in jsFiddle's demo mode.

jQuery make's this stuff pretty easy. Really, I'd think about using it instead of most other approaches (requirements notwithstanding).

Upvotes: 1

Elliot Bonneville
Elliot Bonneville

Reputation: 53311

Are you looking for something like this?

<script type="text/javascript">
window.onload = startInterval;
function startInterval() {
    setInterval("startTime();",1000);
}

function startTime() {
    var now = new Date();
    document.getElementById('time').innerHTML = now.getHours() + ":" + now.getMinutes() + ":" +now.getSeconds();
}
</script>

Upvotes: 3

Related Questions