CODEWITHSUNDEEP
javajavascriptjquerystruts2refresh
vale4674
vale4674

Reputation: 4271

How to refresh the div tag every 500 - 1000ms?

I have this div which contents depends of the current time of HTML embedded media player.

<div id = "myId">
<s:iterator value="timeLine.getFrameByTime('22').slide.indices">
    <a href="javascript:setCurrentTime('<s:property value="timeLine.getFrameByTime('22').slide.firstOccurence"/>')">
             <s:property value="text"/>
       </a>
</s:iterator>
</div>

Number 22 is hardcoded. It should be return value of function below.

JavaScript code:

function getCurrentTime() {
    return document.getElementById('video').controls.currentPositionString;
}

function setCurrentTime(time) { 
    document.getElementById('video').controls.currentPosition = parseFloat(time);
}

That div above should be refreshed for every 500ms. I don't think that AJAX and JSON is the solution because server would be overloaded then.

Is there a way to refresh that div from JavaScript (jQuery) while loop which sleeps for 500 - 1000ms?

EDIT: By refresh I mean, content of that div should be changed. I know the current time of my media player and I know what is the content for particular time input. Now I need the mechanism to ask my media player for it's time and change the div content.

The question is: Use AJAX for every 500ms and call my method on server which gives me contents for particular time input or load the whole data on page initialize and implement logic in JavaScript which shows only the part of that data depending on current time?

Upvotes: 2

Views: 1585

Answers (3)

Saurabh Santhosh
Saurabh Santhosh

Reputation: 130

You can use Jquery SetInterval Function for this purpose...

setInterval(function() {
      // Do something every 5 seconds
}, 5000);

This can be used to either refresh the div with contents from client side cache or to send server requests to retrieve data to refresh the div.

Upvotes: 2

Otacon
Otacon

Reputation: 33

I would suggest you output all content of your timeLine data to javascript, if possible.

var timeLineIndices = [ 'value1', 'value2', 'value3' ];
var getFrameSlideIndicesByTime = function(time){
    return timeLineIndices[time];
}

Effectively implementing timeLine.getFrameByTime('22').slide.indices at client side by javascript.

If outputing all frames data is too large, consider output only the frames according to your 500 - 1000ms interval.

Upvotes: 0

Jeanne Boyarsky
Jeanne Boyarsky

Reputation: 12266

Do you have to use a <div>? If you can use an <iframe> instead, the solution is simpler and can use HTML features. This stackoverflow answer describes how to use a <meta> tag to refresh automatically every X seconds.

Upvotes: 0

Related Questions