We Keep Coding

Constant reload of a DIV?

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.

jquery, time out another jquery function if a user clicks a div?

I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.
<script>
$(document).ready(function(){
var animations = [];
$('.noti_box').each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});
$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $('.noti_box:visible').length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>
this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.
However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:
<script>
$('.icons').click(function(){
$('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');
});
</script>
The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.
So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.
Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks

function notiBox(ele){
this.ele=ele;
this.ele.hide().fadeIn('slow');
console.log("I have been born! "+ele);
}
notiBox.prototype={
constructor:notiBox,
advert:function(){
var ele=this.ele;
this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
},
fadeBack:function(){
var ele=this.ele;
this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
},
}
$(document).ready(function(){
var timeIn=1;
$('.noti-box').each(function(){
var self=this;
this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
timeIn++;
});
$('.icon').click(function(){
$('.noti-box').notiBox.fadeBack();
});
});
Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d

jQuery - Load content from another page - only once

I have this small script, which, when clicked on, will show the content from a page where I do a PHP query. My problem is, that if the user click multiply times, it will just load the content from the PHP page multiply times as well...
This is my jQuery code:
$('.notifications-load').on('click',function() {
$('#notifications-holder').load("/?i=notifications");
});
And my HTML:
<i class="fa fa-bell notifications-load"><span class="notification">5</span></i>
<div id="notifications-holder"></div>
This is the PHP page (?i=notifications):
$n=$dbh->prepare("SELECT * FROM users_notifications WHERE userid=0 OR userid=:userid");
$n->bindParam(":userid",$userdata['id']);
$n->execute();
$data=$n->fetchAll();
foreach ($data as $value) {
echo $value['text'];
}
If a user clicks example 3 times on .notifications-load , then the content from /?i=notifications will load 3 times into the #notifications-holder - how can I prevent this?

Believe it or not, one character of difference will fix it:
$('.notifications-load').one('click',function() {
// Here -------------------^
$('#notifications-holder').load("/?i=notifications");
});
jQuery's one function hooks up a handler that it automatically unhooks the first time it's called.
If you have an aversion to using one (as some do, it's really easy to misread it as on), you have a couple of options:
You can create an alias for it:
$.fn.onOnce = $.fn.one;
You can unhook the handler explicitly:
$('.notifications-load').on('click.load',function() {
$('#notifications-holder').load("/?i=notifications");
$('.notifications-load').off('click.load');
});

Besides using $.one you can check to see if $('#notifications-holder') already has a value. Something like:
$('.notifications-load').on('click',function() {
var notification = $('#notifications-holder');
if (!notification.html().trim().length) {
notification.load("/?i=notifications");
}
});

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
});
}

using javascript to create separate pages for messages?

Ok this may be a bit of a confusing question. I have the below javascript in my messages.php page which controls which div will show. Each div has a seperate function.
There's message-content-p1 which contains a while loop that gets all the messages and limits it to 20 messages to show, the second is message-content-p2 and so on each one containing the next while loop only ever showing 20 messages in each.
The idea of this javascript is to create the illusion that there are more messages to be shown on page 2, page 3 and so on.
So far the javascript shows each div on the click of 'm_p1' or m_p2' and fades out the current page and fades in the next page. This works fine for that function. the problem i get is if a user wants to skip a page and go to page 3 or page 5 without going to page 2 or 4 then the script won't work and nothing is faded in or out.
Like wise if the user goes back to page 1 from page 5 the script doesnt work and does not fade out page 5 and fade in page 1.
Is there a way of doing what i have described and if so could someone please show me how.
Thank you.
<script>
$(".message-content-p2").hide();
$('.m_p2').click(function () {
if ($('.message-content-p2').is(":hidden")) {
$('.message-content-p1').fadeOut(500);
$('.message-content-p2').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p3").hide();
$('.m_p3').click(function () {
if ($('.message-content-p3').is(":hidden")) {
$('.message-content-p2').fadeOut(500);
$('.message-content-p3').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p4").hide();
$('.m_p4').click(function () {
if ($('.message-content-p4').is(":hidden")) {
$('.message-content-p3').fadeOut(500);
$('.message-content-p4').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p5").hide();
$('.m_p5').click(function () {
if ($('.message-content-p5').is(":hidden")) {
$('.message-content-p4').fadeOut(500);
$('.message-content-p5').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p6").hide();
$('.m_p6').click(function () {
if ($('.message-content-p6').is(":hidden")) {
$('.message-content-p5').fadeOut(500);
$('.message-content-p6').delay(700).fadeIn(500);
}
});
</script>

This looks all very manual and not very scalable for any number of pages.
Why would you not just have the same class for each "page", and on the click of whatever control determines which pages to skip to, just fade out all pages and then fade in only the page corresponding to the index value of the control that was clicked? For example say all you message "pages" have the class .message-content and let's say you have a set of buttons all with class .m. Your jQuery could simply look like this:
$('.m').click(function() {
$('.message-content').fadeOut(500);
var index = $(this).index();
$('.message-content').get(index).delay(700).fadeIn(500);
}