Develop Reference

jquery - load multiple external html in a loop on a div

i was searching for the solution, but i cannot find any proper suggestions.
My goal is to loop different external urls on the same page (inside the div), rather than looping the pages with header option. Here is my current code for showing one external page in the div:
<script>
$(document).ready(function(){
function loadlink(){
$('#tableHolder').load('read_data_from_page_one?v=1',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 30000);
});
</script>
So after 30 seconds my div "tableholder" is refreshed, which is ok. Now i would like to add another external page after 5 minutes in the same div, and then after 5 minutes again another external page. They need to be refreshed every 30 seconds as my first external page. After that it needs to load again the first external page.
so basicly loop inside external content in a div. Is that possible?
The other solution is to loop the pages via header options:
<?php header("Refresh: 300; URL=read_data_from_page_two.php"); ?>
But i don't want that. Any suggestions?
Best regards, Misko

If pages are numbered, simple counter will be fine:
$(document).ready(function(){
var counter = 1, // current page
max = 3; // last page
function loadlink(){
$('#tableHolder').load('read_data_from_page_one?v='+counter,function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(loadlink, 30000); // this will run after every 30 seconds
setInterval(function(){
if(++counter > max){ // next page
counter = 1; // back to start
}
}, 5000000); // 5 min interval
});

$(document).ready(function(){
function loadlink(x = 1){
$('#tableHolder').load('read_data_from_page_one?v='+x,function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
var x=1;
setInterval(function(){
x++
loadlink(x); // this will run after every 5 seconds
}, 30000);
});

Is this more or less what you are meaning? An array of links that can be cycled through every n seconds and repeated when all have been displayed?
<script>
$(document).ready(function(){
var links=[
'read_data_from_page_one?v=1',
'read_data_from_page_two.php',
'read_data_from_page_three.php',
/*
..... etc
*/
'read_data_from_page_ninetynine.php'
];
var i=0;
function loadlink(i){
var url=links[i];
$('#tableHolder').load( url, function() {
$(this).unwrap();
});
}
loadlink(i);
setInterval(function(){
loadlink(i);
i++;
if( i>=links.length ) i=0;
}, 30000 );
});
</script>

delay for not running other lines of code

in this code i want to when div with .ch1 class changed background to answer_box_small_orange.png other bottom js lines code don't run and no ajax request sends until 3 seconds and i used
window.setTimeout(function () {}, 3000)
but it doesnt work correctly
here first of all i request and get data and it is ok
$.ajax({
type:'post',
url:'http://207.154.251.233:8039/app.php/question/get',
data:JSON.stringify({apikey:'jwebdpqodp9fgkwjebfkdpqihdqlwkndqp'}),
success:(function (response) {
var x = response;
$("#question").text(x.result.question);
$(".op1").text(x.result.options["1"]);
})
});
i inserted ajax code and some other codes in function because i want to run it every 60 seconds
function myInterval () {
$(".ch1").css('background-image','url(image/answer_box_small.png)');
var clock;
$(document).ready(function() {
clock = new FlipClock($('.clock'), 60, {
clockFace: 'Counter',
autoStart: true,
countdown: true,
callbacks: {
stop: function() {
$('#loading').fadeIn('5000');
$.ajax({
type:'post',
url:'http://79.175.166.98/',
data:JSON.stringify({apikey:'jwebdpqodp9fgkwjebfkdpqihdqlwkndqp'}),
success:(function (response) {
$('#loading').fadeOut('slow');
var x = response;
$("#question").text(x.result.question);
$(".op1").text(x.result.options["1"]);
var answer = x.result.answer;
if(answer == 1){
$(".ch1").css('background-image','url(image/answer_box_small_orange.png)');
}
window.setTimeout(function () {}, 3000);
})
});
}
}
});
});
}
myInterval();
window.setInterval(function(){
myInterval();
}, 60000);

Based on what you told me, my interpretation is that you have a setTimeout() function and a setInterval() function. The setTimeout() runs at the beginning and will wait for 3 seconds. Then call an ajax function to create new requests every 6 seconds. Your problem seems to be that your first setTimeout() is re-run after you create your first AJAX request, but you want it to stop.
Taken from W3
setTimeout Return Value: A Number, representing the ID value of the timer that is set. Use this value with the clearTimeout() method to cancel the timer.
Knowing this, we can essentially cancel a setTimout() function. In your case, the first setTimeout().
Consider this,
var firstIntervalID = setTimeout(function() {
$.ajax() {
// First AJAX ran after three seconds.
}
}, 3000);
clearTimeout(firstIntervalID);
// Your code resumes to set an interval every 60 seconds without having to worry about the three seconds set before
myInterval();
var secondIntervalID = setInterval(function(){
myInterval();
}, 60000);
Essentially, you cancel the setTimeout() when you don't need it anymore. Your application for it can be different than what I wrote, but the main idea is the same. Cancel/Clear the setTimeout() with the ID that is returned on setTimeout() with clearTimeout().

Redirect with inactivity

My objective is to keep a user in a view as long as he/she keeps clicking a button within a certain lapse.
I'm using Rails and was exploring a solution via an embedded JS in the pertinent view.
So far I'm able to set a time after which the user will be redirected to root path with the following script:
var delayedRedirect = function (){
window.location = "/";
}
var delay = 10000;
$(document).ready(function() {
setTimeout('delayedRedirect()', delay);
});
I've been trying to write a function that resets the value of 'delay'or that calls the setTimeoutFunction again.
$('#btn-persist').click(function() {
delay = 3000;
// or calling again setTimeout('delayedRedirect()', delay);
});
But I noticed that changing the variable won't affect the setTimeout function that has already been called.
I've also tried to use the clearTimeout function as below without success
var delayedRedirect = function (){
window.location = "/persists";
}
var delay = 3000;
var triggerRedirect = function() { setTimeout('delayedRedirect()', delay);
}
var stopRedirect = function (){
clearTimeout(triggerRedirect);
}
$(document).ready(function() {
triggerRedirect();
$('#btn-persist').click(function() {
stopRedirect();
});
});
I wonder why this may not be working and if there's any other way to stop the execution of the setTimeout function that has already been called so I can call it again to effectively reset the time to the original value of 'delay'.
At the same time, I don't want to stop any other JS functions that are running in parallel.
Do you see a better solution to achieve this?

The main problem why clearTimeout is not working. because you are clearing a anonymous function instead of a setTimeout variable
change this
var triggerRedirect = function() { setTimeout('delayedRedirect()', delay);
}
to this
var triggerRedirect = setTimeout('delayedRedirect()', delay);
Edit:
also change this (if you want to restart the inactive redirect trigger)
$('#btn-persist').click(function() {
stopRedirect();
});
to this
$('#btn-persist').click(function() {
stopRedirect();
triggerRedirect();
});

Image refreshing with setInterval()

I have 4 div´s each contains an image item and a select list of 4 div-id. I want to refresh the images simultaneously by changing the source of each image every 2 seconds.
I'm using setInterval() for each image and the problem is when I must stop all the timers at the same time.
Should I make a timer variable per div/img?
$(.div-id option:selected).each(function(){
var timer = setInterval(function(){
$(.div-id img).attr("src", "new-source-path");
},2000);
});
How can I stop all the active timers at once without stopping every timer Id?
Is there any solution with setTimeout() or any plugin to do that?

I'd opt for a single timer that loops through all images. Then when the timer isn't needed anymore I can just discard the single timer.
var timer = setInterval(swapImages, 2000);
function swapImages() {
$(.div-id option:selected).each(function(){
$(.div-id img).attr("src", "new-source-path");
});
}
// some time later
clearInterval(timer);
PS. I assume that your code is some pseudo code so I copied your namings

The end solution
function swapImages() {
$(".div-id-list option:selected").each(function () {
var url = "new-source-path";
$("#div-id img").attr("src", url);
});
}
function stopTimer() {
clearInterval(timer);
}
$(".div-id-list").on("change", function () {
stopTimer();
timer = setInterval(swapImages, 2000);
});
Thanks to donnywals !

Call a javascript function after 5 sec of last key press

I have a form with an <input type=text /> and I want to call a javascript function after 5 seconds of the last key press, and every time a new key is pressed, this timer should reset and only call the function after 5 seconds.
How can I do this?
I'm using jQuery.
thanks!

Something like this should get you started:
var timeout;
$('input[type=text]').keypress(function() {
if(timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(myFunction, 5000)
})

This answer is great, but remember that you need to enable this code after the documents loads and after the function loads to clear the timeout.
Here is the complete code:
var timeout;
$(document).ready(function(){
$('input[type=text]').keypress(function() {
if(timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(myFunction, 5000);
});
});
var myFunction = new function() {
alert('myFunction is running');
clearTimeout(timeout); // this way will not run infinitely
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Although it doesn't use jQuery, you could also have a look at the debouncing function described here.
Steve