Question

181

Autorefresh div with javascript

rated 0 times [ 185] [ 4] / answers: 1 / hits: 26009 / 12 Years ago, mon, may 28, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

frederickmohamedw

Add To Favorites

Follow

Total Points: 21

Total Questions: 123

Total Answers: 105

Location: The Bahamas

Member since Tue, Apr 27, 2021

3 Years ago

frederickmohamedw questions

1 React JS. How can I display the image inside the object?

Wed, Sep 23, 20, 00:00, 4 Years ago

1 Vuetify data table :item-class doesn't do anything

Sat, Jul 18, 20, 00:00, 4 Years ago

1 How to show modal on component/page created/load in Vue.js

Sun, Apr 26, 20, 00:00, 4 Years ago

1 File type from buffer using file-type

Sat, Jan 11, 20, 00:00, 4 Years ago

1 Slick Slider Mobile Responsiveness

Fri, Dec 27, 19, 00:00, 4 Years ago

View All

answered 12 Years ago denzelc · Accepted Answer

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).