Constant reload of a DIV? - javascript

Ok, I've looked around Stack and other places for the past 4 or 5 hours trying to find a solution to my problem.
I have an Iframe inside of a page which contains 5 lines of information, the information is fetched from a database. Said info will constantly change, therefor a need it to be refreshed every 1-5 seconds, can stretch to 10 seconds if needs be.
I have used the below code, which works, but crashed my browser(s) for some reason, I'm guessing reloading too fast?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#info').load('mid.php');
}, 5000); // refresh every 5000 milliseconds
</script>
Below is the code from mid.php (There is PHP inside the page but this is the part that I need refreshing).
<div id="info"><font size="2">
<b>Crimes: </b><font color="white"><?php if ($fetch->lastcrime <= time()){ echo 'Ready'; }else{ echo "".maketime($fetch->lastcrime).""; } ?></font><br>
<b>GTA: </b><font color="white"><?php if ($fetch->lastgta <= time()){ echo 'Ready'; }else{ echo "".maketime($fetch->lastgta).""; } ?></font><br>
<b>Chase: </b><font color="white"><?php if ($fetch->last_chase < time()){ echo 'Ready'; }else{ echo "".maketime($fetch->last_chase).""; } ?></font><br>
<b>Extortion: </b><font color="white"><?php if ($fetch->last_ext < time()){ echo 'Ready'; }else{ echo "".maketime($fetch->last_ext).""; } ?></font><br>
<b>Rank:</b><?php echo "$fetch->rank"; ?></td></tr>
</div>
</table>
I know I can use HTML to refresh the Iframe but it looks unsightly when the whole top left corner of the screen refreshes every 3 seconds, any help is much appreciated.
Thanks

I'd expect you to use Ajax calls for this kind of thing. You'd tonally ice jQuery to update the contents of elements in place to avoid the refresh of your iframe. Iframes are limited in their capabilities and it typically doesn't make sense to use them just for updating web page contents.
The browser crash may be coming from the use of set internal. If the calls take longer than 5 seconds to complete, multiple calls might stack up. But for your case I feel like it's not the problem, as it should be able to update that orange pretty quick. Any way, a better approach is to set a timer for one execution of your update process every time it gets done running. That way, if the call does take too long, you don't just keep stacking up requests.

Use can use .load() callback, substitute setTimeout() for setInterval
$(document).ready(function() {
let timeout;
let duration = 5000;
let stop = false;
function update() {
$("#info").load("mid.php", function() {
if (timeout) {
clearTimeout(timeout)
}
if (stop === false) {
timeout = setTimeout(update, duration)
}
});
}
update();
});

Thanks.
I ended up using pretty much the same script, just splitting the PHP and HTML into separate files and calling the div from the HTML file.

Related

clearInterval()-Method in JavaScript - How does it exactly work?

I have a script which waits for specific DOM-Elements to be loaded and when loaded it appends another HTML-Element:
var checkExistVOID = setInterval(function() {
if( $('#voidDocumentsAwaitingMyApproval').length && $('#voidDocumentsAwaitingMySignature').length ) {
$("#loadingBarPolarion1").hide();
$('<span style="font-size: 14px;"><i style="color: lightgreen; padding-right: 10px;" class="fas fa-check"></i>Currently no Document Actions required</span>').appendTo('#voidDocumentsAwaitingMyApproval');
clearInterval(checkExistVOID);
}
}, 500);
My aim was to only trigger this function once, that's why I used the Method:
clearInterval()
It seems to work fine at first glance, but if the site where the page is executed stays opened for about ~30 minutes without any user action, the append-function is all of a sudden executed every 500 ms on a loop:
I was wondering, what can be the issue of this? Is it possible that clearInterval() suddenly isn't "stored anymore"?
Can you suggest me what to change in my function in order to not run into this problem?
I was thinking about an additional check for the already exiting <span>-ELement and use that in the if-Function, but I guess that's not a professional solution :)
You're conditionally clearing the interval. If the condition is not met, the interval will not be cleared.
My aim was to only trigger this function once
You should use setTimeout() instead.

Timers in a webpage are synchronous to times in phantomjs

I have a problem concerning phantomjs and timers. It seems that timers in a web page are synchronous to the times in pahntomjs, as a result you can't create nice gif which will show nice website animations (animations always use times).
Here is the code illustrating the problem:
test.phantom.js
var page = new WebPage();
page.open("test.html", function(){
var i = 0
setInterval(function(){
page.render('test-capture/'+i+'.gif', {format : "gif"});
i++;
if(i == 20)
phantom.exit();
}, 20);
});
test.html
<!doctype html>
<html>
<script>
var div;
window.onload = function(){
div = document.getElementById("t");
var times = 0;
setInterval(function(){
div.innerHTML = "" + (++times);
}, 1)
}
</script>
<body>
<div id="t">
0
</div>
</body>
</html>
As you can see phantomjs triggers a render call every 20 milliseconds, while the webpage changes the content of div#t every millisecond. You may expect that in the resulting 20 images the content of div#t will change with a step of 20 but this is not happening. I don't have enough reputation to post images, but the content in div#t is changing with a step of 1 millisecond.
Is this a bug or it should happen like this ? Thanks in advance.
This happens because javascript execution is single-threaded even if you have the page context and the outside context. The second thing is that rendering (gif) isn't cheap. On my machine it takes around 100 msec to render the gif on average. During that time, no javascript can be executed and time stands still.
So when you the rendering is complete, then both timers can continue to run. So the formula would be:
var pageContextAdvancement = Math.max(outsideIntervalDuration - timeToRender, 1);
So, no it's not possible to animate something with PhantomJS. It just isn't the right tool.
At least on my machine, the following seems to work, but this might change if the workload changes.
page.open("test.html", function(){
var i = 0
function run(){
page.render('test/'+i+'.gif', {format : "gif"});
i++;
if(i == 20)
phantom.exit();
setTimeout(run, 200);
}
setTimeout(run, 170);
});

Refresh a certain div

Can anyone give me advice on how to make a div refresh.
I'm making a chess game and I want the div to load every time the other player posts data into the database. My game is almost finished the thing is, when you move a piece, Player 2 wont see the move that Player 1 made, when Player 2 refreshes the browser he/she can now see that the Player 1 has moved a piece.
How can I achieve this automatically?
I'm using jQuery and Ajax.
something like:
<script type="text/javascript">
window.onload = setupRefresh;
var interval = 1000;
function setupRefresh() {
setTimeout("refreshPage();", interval); // milliseconds
}
function refreshPage() {
//get game state using ajax and update div
}
this will refresh every second (== 1000ms, change to what you want/need), you need to implement the stuff in refreshPage()
Try this,Auto Load and Refresh Div every 10 Seconds with jQuery.
cant answer more without showing what you already done?
Hope something like this might help you... :)
$(document).ready(function(){
setInterval(targetDiv, 1000);
});
function targetDiv(){
$.ajax({
url: "/refresh_your_div_function",
//Other code u need to perform
}).done(function() {
//Your code
});
}

Automate html in Javascript/jQuery

I'm currently preparing a cool video presentation on my html web page. At the end of it, I want to be able to click on the video and be taken to a page - however I only want the link to come into effect at a certain time.
I've done some research and I can't find anything about this.
As an example, let's say that I want to make a link on something...
This link will go somewhere after 15 seconds
How can I make it so that <a> tag doesn't work for 15 seconds with jQuery or JavaScript? (JavaScript preferred but it doesn't really matter!). Remember - I don't want that whole line of code to suddenly appear - prior to the link working that should just be text!
Thanks!
Here delay is set to 3 seconds (3000 milliseconds in call to setTimeout). Change it to 15000 to make it 15 seconds
$(document).ready(function() {
setTimeout(convertTextToLink, 3000);
});
function convertTextToLink() {
$('#thanks').html('Thanks for watching. You may now proceed.');
}
Html
<h1>Hello</h1>
<p>here are your vids</p>
<div id="thanks">Thanks for watching</div>
var waiting = true;
//set waiting to false after 15 seconds
setTimeOut(function() { waiting = false },15000);
$('#automate').click(function(e) {
if(waiting === true) {
e.preventDefault(); //prevent the link from firing
}
});

Code being multiplied and all instances are running

My website works in a way so that any links clicked do not load a new page but however trigger a .load() event into a div named "content".
Everything has been nice and dandy but now I have run into a small problem.
On one of the content pages, I have the following code:
$('.count').each(function () {
$this = $(this);
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});
The code works... it works very well. But when I load that same page again, it seems like the code is running twice because the seconds are going down by 2 at a time. Then when I load it again, it's going down by 3 seconds at a time. Another load, and it goes down by 4 seconds at a time. I load it a couple more times and it goes down faster then I can read.
I tried giving the .count divs their own unique id's (the .remain div is nested inside the .count div), even when pages are subsequently loaded the id is still entirely different and this did not fix my problem. I also tried putting clearInterval(countdown) right before the function but that just made it stop working entirely. Any suggestions?
And yes I know the countdown doesn't currently stop when it reaches 0.
Try this:
var countdown;
$('.count').each(function () {
$this = $(this);
if (!countdown)
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});

Categories