Javascript Refresh

Question

Is there a way using the code below to instead of refreshing the time refresh a div id that is already there?

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

function startTime()
{
    document.getElementById('drawaddrow').innerHTML = ????;  
}
</script>

Say I fi were to replace the time id with the the id that I wanted to refresh what would I put after .innerHTML =???

This is the div I need refreshed every second.

<div id="draw" align="center">
<table>

    <tr><td style="height:20px;"></td></tr>

</table>


        <TABLE style="float:center;border:5px; border-style:outset;border-color:#E80000; width:850px; border-spacing:0; border-collapes:collapse;" table border="1">
            <div id="addrow"><script type="text/javascript">
            Draw ("")
            [Add]</script></div>
        </table>

</div>

The [AddItemsHTML] somehow pulls data from a piece of software telling you what is due and what is not, however the script is not pulling the time every second the browser when refreshed just changed the time on the due status column.

Right now i'm using this to refresh the whole page I just need the drawaddrow div id refreshed.

    function refreshPage () {
     var page_y = document.getElementsByTagName("body")[0].scrollTop; 
     window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;

}
     window.onload = function () {
         setTimeout(refreshPage, 1000);
            if (window.location.href.indexOf('page_y') != -1 ) {
                var match = window.location.href.split('?')[1].split("&")[0].split("=");
                document.getElementsByTagName("body")[0].scrollTop = match[1];

            }

refresh a div as in dynamically get content from server every x seconds? — Harry, Jul 26 '13 at 07:47
@harry Well no it doesn't need to get it from the server I just need it to do every x seconds the same thing hitting the refresh button would do if you were hitting that every x seconds — chriswiec, Jul 26 '13 at 07:48
@Kneel I don't want the time displayed at all I want to refresh a div id I have like I was hitting the refresh button every x seconds — chriswiec, Jul 26 '13 at 07:49
How you'd like construct the new `id`? Like `timeID = 'time' + Date()`? — Teemu, Jul 26 '13 at 07:50
@Oleg i'm just trying to refresh the section of my page that has a div id like I was hitting the refresh button every second, without using ajax to load another file. — chriswiec, Jul 26 '13 at 07:51
So you DO want to dynamically re-fetch the content from the server, then? — Soron, Jul 26 '13 at 07:51
well you can then store your contents in a variable and assign it to innerHTML instead of `Date()` — Harry, Jul 26 '13 at 07:51
"...without using ajax..." - I'm pretty sure this actually is the *definition* of AJAX. Although if I'm wrong, I'd be interested in hearing why. — Soron, Jul 26 '13 at 07:52
@Teemu I don't caer for the time I want to refresh a portion of the page with a div id without using ajax it looked like this could work. If I had entered the div id to refresh itself without refreshing the whole page. What is in the div id is times till certain tests are due. These times only refresh if you hit the refresh button or use meta tag refresh, I can't refresh using Ajax. — chriswiec, Jul 26 '13 at 07:53
@chrisw.iec I think I understand your question, but the new `id` of the `div`, how you want it to look like? — Teemu, Jul 26 '13 at 07:54
If you know what the contents of the div *should* be, you re-calculate it without another server fetch. But in that case, we'd need to know what the calculation/formatting is. — Soron, Jul 26 '13 at 07:54
I can't use ajax because there is no souce file he data is in. There is nothing to put in .load("") There is a difference between ajax and the refresh button. I just want something that refreshes a certain div id like hitting the refresh button without having yo load from an external file, because there is none. and I can't write one. — chriswiec, Jul 26 '13 at 07:56
@teemu I want the new div to be the same as the old div just updated. See the data in the div id is a countdown till certain tests are due. I just want the div reloaded with the same div — chriswiec, Jul 26 '13 at 07:57
@Kneel yes the content remains the same just updated a few secponds because it is a countdown or timer till a test is due. — chriswiec, Jul 26 '13 at 08:05
@chrisw.iec Please try to reword your question, you're talking about replacing the `id` of the `div`, which is obviously not what you want. — Teemu, Jul 26 '13 at 08:17
I want to refresh Div ID="drawaddrow" with the same drawaddrow — chriswiec, Jul 26 '13 at 09:13
I just want to refresh a portion of the page with the same thing that's there. There is a porton of that data that is a countdown till a test is due, but its all tied together so if you look above everything in Div ID="drawaddrow" needs to be refreshed every second or two. — chriswiec, Jul 26 '13 at 09:20
possible duplicate of [Auto Refresh No Scroll Other than ajax](http://stackoverflow.com/questions/17856093/auto-refresh-no-scroll-other-than-ajax) — Geoff, Jul 26 '13 at 11:07

score 2 · Accepted Answer · edited May 23 '17 at 11:59

Updated (on 27/07/2013 @08:20 AM IST):

Having gone through your code, the below is my updated answer.

Plainly assigning a value to the DIV (divaddrow) using (.innerHTML) wouldn't work due to the following reasons:
(a) The DIV has some code enclosed within square braces (like [AddItemsHTML]). I am not sure what technology it uses. But judging by its intended use (which is, to populate the table with data) it sure seems to require a communication with the server to fetch data.
(b) The DIV also has a <script> tag with a call to a function (lets call it cntFn). Plainly assigning the value would not work because value setting wouldn't call/execute the function again (like it does on page load).
Assuming point 1.a is wrong, the normal way to handle 1.b would be to first assign the static contents of the div using .innerHTML and then do either (a) write whatever the "cntFn" does into the function that is refreshing the page (lets call it refreshFn) also (or) (b) call the "cntFn" within the "refreshFn". The latter would also cause a problem here because the "cntFn" has a lot of document.write lines which would repaint the entire page (meaning the other contents of the page would be lost on executing the refresh).
Generally using document.write lines is a bad practice because they repaint the page fully. You can find more about this here.
The best alternate in my opinion would be to use AJAX to refresh the contents. The content of your divaddrow div would form the contents of the AJAX file that needs to be called every 'x' seconds. Be careful with the 'x' seconds part. Do not try to refresh the section every second because realistically it would take time for the AJAX request to reach the server and get the response. Set the refresh interval such that the first request would have been processed by the time the next one comes (at-least 90% of the cases). The amount of data (no. of rows) that the AJAX call would be fetching will also be a factor.

in the area that says This is some content I need to put my whole div id in that area? — chriswiec, Jul 26 '13 at 08:12
Yes, if it is static content then put the contents (not the ID) of the whole Div into it. In the divToRefresh variable give your ID. — Harry, Jul 26 '13 at 08:14
so In var divContent do I need to copy and paste all the code that is currently in the drawaddrow div id? — chriswiec, Jul 26 '13 at 08:20
@chrisw.iec can you post the contents of the drawaddrow div in your question? need to check if just plain assigning it to the divContent variable will work or not. — Harry, Jul 26 '13 at 08:22
Sorry matey, i don't seem to understand much about these DrawAddRow or AddItemsHTML items. Not sure if they are written as client side scripts. If they are server-side then you most definitely need to do Page Refresh or Make a Server Call using AJAX. — Harry, Jul 26 '13 at 08:34
can't use ajax there is no source file. there is no way to just refresh a certain part of the page like pressing the refresh button. — chriswiec, Jul 26 '13 at 08:36
Do you have an email so I can send you the entire file to look at? — chriswiec, Jul 26 '13 at 08:36

score 1 · Answer 2 · answered Jul 26 '13 at 07:54

1

Check this out... I used Jquery for the same

 $(document).ready(
            function() {
                setInterval(function() {
                    var randomnumber = Math.floor(Math.random() * 100);
                    $('#show').text(
                            'I am getting refreshed every 3 seconds..! Random Number ==> '
                                    + randomnumber);
                }, 3000);
            });

WORKING FIDDLE

answered Jul 26 '13 at 07:54

AnaMaria

3,130
3
16
36

@chrisw.iec, does this serve your purpose? – AnaMaria Jul 26 '13 at 07:58
1

What is the purpose of jQuery here other than adding an overhead of loading it? – Oleg Jul 26 '13 at 07:59
but it needs to be the data from a certain div id already on the page. – chriswiec Jul 26 '13 at 07:59
Definately, what I have given is just an outline, you can modify this code and assign any varaible to this div. – AnaMaria Jul 26 '13 at 08:00
I'm sorry I know so little if I have a div id called drawaddrow and only wanted that refreshed with the same content just updated a second (because it is a timer) how would I enter the div id to be refreshed with the same content? – chriswiec Jul 26 '13 at 08:02

Teemu · Answer 3 · 2013-07-26T08:13:15.743

1

If I've understood your question correctly, you can do something like this:

window.onload = function () {    
    function startTime () {
        document.getElementById('date').innerHTML = new Date();
    }
    setInterval(startTime, 1000);
}

HTML:

<div id="time">This a div containing time: <span id="date"></span></div>

edited Jul 26 '13 at 08:13

answered Jul 26 '13 at 07:56

Teemu

21,017
6
49
91

and I can just enter the div id and it will reload the same div id? – chriswiec Jul 26 '13 at 07:58
Say my div id is drawaddrow the div has data in it that shows a counting down time till a ttest is due. so I only need to reload this div id with the same div id just updated a second. – chriswiec Jul 26 '13 at 08:00
1

The snippet changes the `id`of the `div` once per second. The `id` is always a new one. That is how I understood your question. If this is not the case, can you add a relevant HTML snippet into your question? – Teemu Jul 26 '13 at 08:01
@chrisw.iec Do you need your Div's ID to change every second, or just plain re-load its contents? – Harry Jul 26 '13 at 08:03
reload its contents no change except for the time till something is due but that is already programed as long as the content is reloading like hitting the refresh button – chriswiec Jul 26 '13 at 08:06
You're having other content in the `#time` too? If so, you need to add an extra element, like `span`, for showing time in the `div` without changing the whole content of the `div`. – Teemu Jul 26 '13 at 08:08
no i'm sorry the element id shouldn't say time It should say drawaddrow and in this div there is a countdown till a test is due I was looking for a replacement script to refresh the drawaddrow div id I have. Not show the time at all. – chriswiec Jul 26 '13 at 08:10
@teemu it has nothing to do with the date or actual time. I have a section of my page that lists when certain tests are due. it counts down every second like this Test Due 3.45 min then a second later Test Due 3.44 min. I need it refreshed every second but only the content in that div. I already have it counting down if the whole page refreshes, but I only need the div id to refresh. – chriswiec Jul 26 '13 at 08:18
are you trying to say that the count-down timer code is somewhere outside and that you dont want the timer in JS? – Harry Jul 26 '13 at 08:20
@chrisw.iec What is the content you want to put into the `div`? Where ever you have created it, add it to a global variable (for example `newContent`) as a string, and then do `.innerHTML = newContent;`. Or is there another `div`, which content you want to copy to the `#time`? – Teemu Jul 26 '13 at 08:23
#time does not exist what does exist is #drawaddrow in drawaddrow I have a column that says due status the due status is a countdown I need this refreshed please look at my original question again. – chriswiec Jul 26 '13 at 08:32

score 1 · Answer 4 · answered Jul 26 '13 at 08:02

1

I'm not sure that I understand you, but is this want you mean?

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

answered Jul 26 '13 at 08:02

Akhil Sekharan

11,581
6
34
54

I have a div which I want to refresh or reload with the same div just updated by a second. the div is a countdown till a test is due so every second I want it to say test due in 3.45 min then a second later 3.44 min. now it does this with a page reload or by hitting the refresh button, but there are images all over the page outside that div I don't want reloaded or refreshed. – chriswiec Jul 26 '13 at 08:14
if I were to put drawaddrow in both getelementbyid would that load itself over again? – chriswiec Jul 26 '13 at 08:38
@Chris. Let me see. There is a div in your page namely 'time' which is refreshed from some function which you can't modify. So you need to copy the contents of that div to your own new div every second. Is this what u mean? – Akhil Sekharan Jul 26 '13 at 08:52
Yes I have a div that needs to be refreshed with the same div – chriswiec Jul 26 '13 at 09:01
its not time the div id is #drawaddrow see original question again. – chriswiec Jul 26 '13 at 09:02
Do you mean you have a div that needs to be refreshed with data from another div? – Akhil Sekharan Jul 26 '13 at 09:02
the data is coming from a sofftwares database – chriswiec Jul 27 '13 at 03:35

score 1 · Answer 5 · answered Jul 26 '13 at 08:11

1

This is what I use:

<span>This page will refresh in </span><span id="countdown">60</span>seconds&hellip;
<script type="text/javascript">
setInterval(
function() { 
    if (document.getElementById('countdown').innerHTML != 0) {
        document.getElementById('countdown').innerHTML--; 
    } else {
        window.location = window.location;
    }
}, 1000);</script>

answered Jul 26 '13 at 08:11

Kees de Wit

1,367
14
26

In Chrome, this will only work as long as the user keeps the tab active - switching tabs generally pauses JS on the inactive tab, which would throw off your bookkeeping. – Soron Jul 26 '13 at 08:22
I do not know what version of Chrome you mean, but it keeps counting even if I switch tabs. – Kees de Wit Jul 26 '13 at 08:24
Might want to check the timing with an independent time source, then. I just used a comparable bit of code (++ instead of --), and switched tabs for about 1:50 (or 110 seconds, of course). The count had increased by only about 50, so seems to be ~half speed. – Soron Jul 26 '13 at 08:32
look at my original question maybe it will make more sense now. – chriswiec Jul 26 '13 at 08:34
In general the setInterval function is not that precise. It depends on the client where some clients have a tiny CPU that cannot keep up with intervals. It is also a bad design to depend purely on client side values. – Kees de Wit Jul 26 '13 at 08:37

score 1 · Answer 6 · answered Jul 26 '13 at 08:20

1

This is a JavaScript snippet, based on the original post, that counts the number of seconds since the page has loaded, assuming that there's an element with ID "time" and contents that are entirely numeric.

If the time remaining is given in seconds on the page you're working with, then it would be easy to adjust this accordingly. If the time remaining is not given in seconds, I'd need to see what the text in question actually looks like.

window.onload = startInterval;
var firstTime;
var valAtPageLoad; 
function startInterval()
{
    firstTime = new Date();
    valAtPageLoad = parseInt(document.getElementById('time').innerHTML);
    setInterval("startTime();",1000);
}

function startTime()
{
    var timeDiff = (new Date() - firstTime)/1000;
    document.getElementById('time').innerHTML = Math.round(timeDiff + valAtPageLoad);  
}

answered Jul 26 '13 at 08:20

Soron

437
3
10

The div id I need refreshed is connected to a piece of software that tells you when a test is due. In my Div ID drawaddrow there is a column that tells you Test Due 3.45 min then if the page is refreshed a second later it says Test Due 3.44 min I need to only refresh the div id drawaddrow. – chriswiec Jul 26 '13 at 08:24
So the value of innerHTML, when you read it in, is "Test Due 3.45 min"? – Soron Jul 26 '13 at 08:33
no its a whole sewction of the page there are 7 columns in the table in the first column it list time till test is due in the second column it lists the value of the last test value performed in the third column it list the chemical you were testing the concentration of. I'm looking for a way to refresh one section of my page and not the rest. That's It plain and simple. I need to refresh drawaddrow div id every second to show an updated time till the test is due. The browser is a representation of a piece of software that tests concentrations of chemicals in plating solutions. – chriswiec Jul 26 '13 at 08:43
In the software you can setup schedules for how often the concentrations need to be tested. The browser along with a lot of other info as mention above tells you how long till a test is due or how late it is. I can send you a picture of an image of the browser if that will help? – chriswiec Jul 26 '13 at 08:46

score 0 · Answer 7 · answered Jul 26 '13 at 08:37

0

If you want to reload your DIV and not the entire page, you would have to create the contents of that DIV on the server-side, and then use AJAX to load the DIV´s content. The easiest way to do this, is with jQuery:

function startTime() {
  $.get('path/to/div/contents.html', function(data) {
    $('#drawaddrow').html(data);
  });
}

answered Jul 26 '13 at 08:37

Lars Juel Jensen

1,403
1
20
28

OP has stated several times in the comments, that he doesn't want to use AJAX. – Teemu Jul 26 '13 at 08:40
I know but that doesn't work the count down till a test is due does not countdown when I use ajax it stays the same. – chriswiec Jul 26 '13 at 09:03

Javascript Refresh

7 Answers7