We Keep Coding

How to dynamically change the contents of an iframe having different display time

I have an iframe having the id demo and
I have a list of 5 html files (promo1,promo2,promo3,promo4,promo5) which is to be displayed in the iframes, one after the other, repeatedly.
Each html page has a different time intervals for which it should be displayed in the frame
Here is my JavaScript code in which the dict represents each html and the time for which it should be displayed.
the following code causes multiple invocation of demo function at a time
;(function($){
"use strict";
var index=1,
dict={"promo1":70000,"promo2":46500,"promo3":18000,"promo4":93000,"promo5":86000},
var $firstFrame = $("#demo");
$(function (){
function demo(frameId,index){
frameId.attr("src","static/promo" + index + ".html");
frameId.load(function(){
if(index < 5){
a = setTimeout(demo(frameId , index + 1),dict["promo"+index]);
}
else if(index == 5){
var a = setTimeout(demo(frameId , 1),dict["promo"+index]);
}
});
}
demo($firstFrame , 1);
});
}(window.jQuery));

you need to wrap your setTimeout action in a function. When you use setTimeout, you want to pass a function to be called later. Otherwise, you are calling demo immediately and passing the return value.
setTimeout(function() {demo(frameId , 1),dict["promo"+index];});

Target page refresh either by javascript or PHP

I am trying to figure out how can I refresh a target page when visited either by a hyperlink or the back button, or even a button. Any ideas ? I have tried almost any solution I could find online and still can make the target page refresh after visited.

Well you can refresh the page using JavaScript with this code:
location.reload();
But if you don't put a condition on it, it'll refresh forever, right?
You'll need to describe your issue in more detail.

if you want to reload page when page full loaded use this JS:
$( document ).ready(function() {
location.reload();
});
if you want timer when page loaded and then reload it use:
$( document ).ready(function() {
// reload after 5 second
setTimeout(function() {
location.reload();
}, 5000);
});
if you want reload only first time use this:
function setCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue)
+ ";expires="+expire.toGMTString();
}
function getCookie(cookieName) {
var theCookie=" "+document.cookie;
var ind=theCookie.indexOf(" "+cookieName+"=");
if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
if (ind==-1 || cookieName=="") return "";
var ind1=theCookie.indexOf(";",ind+1);
if (ind1==-1) ind1=theCookie.length;
return unescape(theCookie.substring(ind+cookieName.length+2,ind1));
}
So, you would tie it together like this:
$(function() {
var skipModal = getCookie('skipModal');
if (!skipModal) { // check and see if a cookie exists indicating we should skip the modal
// show your modal here
setCookie('skipModal', 'true', 365*5); // set a cookie indicating we should skip the modal
}
});
show this link:
Fire jquery script on first page load, and then never again for that user?

JS: incrementing pages (page1.html, page2.html,page3.html...) for window.replace

What approach should for this scenario. I want the page to go to the next page after it finishes all the function it needs to.
so, example. after all function for page1.html has been done, it will call a function next_page().
next_page() function will evaluate the current page and add "1" it. so from page2.html it will now be page3.html. page3.html will also contain the same function of the previous html, that after all the functions have been done, it will call the next_page() function that will also evaluate the current and increment it.
//current_url = "mysite.com/page1.html"
var current_url = window.location;
var end_page = "mysite.com/page12.html"
var increment_url = eval(current_ur + 1 );
if(current_url != end_page ) {
setTimeout(next_page,2000)
}
else {
alert("this is the last page!")
}
function next_page() {
window.location.replace(increment_url);
}

var increment_url = addone('mysite.com/page1.html');
returns mysite.com/page2.htm
function addone(url) {
var pattern=new RegExp("(.*)([0-9+])(\..*)");
var match=pattern.exec(url);
return match[1] + (parseInt(match[2]) + 1 ) + match[3];
}
​
so assuming the example URL you gave is accurate enough that the regular expression will work use
var increment_url = addone(current_url);

The easiest thing to do would be to have a hidden input on each page that has the value of the next page url. This would allow you to use arbitrary page urls and still be able to get the effect you want.
Using jQuery
$(function() {
setTimeout(function() {
var url = $('#next_page_url').val();
window.location.replace(url);
}, 2000);
});
<input type="hidden" id="next_page_url" value="http://mysite.com/page2.html" />

function is looped according to setinterval but with different parameters

i have a simple question, there is a function with parameter emp_id that opens up a form for a chat with different attributes, i want it to be refreshed automatically each 10 sec, now it works a bit wrongly, since there is a parameter emp_id that is can be changed, and once i change it, the chat with messages and form are refreshed double time or triple times :) depend on how many times u change the emp_id, i hope i was clear )) anyway here is the javascript function:
function load_chat(emp_id) {
var url = "#request.self#?fuseaction=objects2.popup_list_chatform"
url = url + "&employee_id=" + emp_id;
document.getElementById('form_div').style.display = 'block'; AjaxPageLoad(url,'form_div',1,'Yükleniyor');
setInterval( function() {
load_chat(emp_id);
},10000);
}
there a list of names, once i click on one of them, this form is opened by this function, but if i click another user, i mean if i change the emp_id, it refreshes, the previous and present form. how do i change it so that it will refresh only the last emp_id, but not all of id's which i've changed
thank you all for the help, i really appreciate it!

This would nicely encapsulate what you're doing. The timer id (tid) is kept inside the closure, so when you call load_chat it will stop the interval if there was one running.
Once the new url is set up, it will start the interval timer again.
var ChatModule = (function() {
var tid,
url;
function refresh()
{
AjaxPageLoad(url, 'form_div', 1, 'Yükleniyor');
}
return {
load_chat: function(emp_id) {
if (tid) {
clearInterval(tid);
}
// setup url
url = "#request.self#?fuseaction=objects2.popup_list_chatform"
url = url + "&employee_id=" + emp_id;
document.getElementById('form_div').style.display = 'block';
// load ajax
refresh();
// set timer
tid = setInterval(refresh, 10000);
}
}
}());
ChatModule.load_chat(123);

Use setTimeout instead. Each time your function is executed, it will set up the next execution (you could also make it conditional):
function load_chat(emp_id) {
... // do something
if (condition_still_met)
setTimeout(function() {
load_chat(emp_id); // with same id
}, 10000);
}
load_chat("x"); // to start
Or you will have to use setInterval outside the load_chat function. You can clear the interval when necessary.
function get_chat_loader(emp_id) {
return function() {
... // do something
};
}
var id = setInterval(get_chat_loader("x"), 10000); // start
// then, somewhen later:
clearInterval(id);

clear one timeout, start another

I'm auto-refreshing the content on a site using ajax/json. Using jkey, I trigger some posting to the document, and during this action I want to cancel the original setTimeout that's running ("reloading" at 2 mins) - and then trigger the entire function "content" again to start over after 5 secs. However, I can't seem to stop "reloading" properly, neither call "content" after the given seconds. Can anybody spot the error?
<script>
$(function content(){
function reloading(){
$.ajax({
url: 'api.php',
data: "",
dataType: 'json',
success: function(data)
{
var id = data[0];
_id = id;
var vname = data[1];
var message = data[2];
var timestamp = data[3];
var field1 = data[4];
_field1 = field1;
var val2 = parseInt(field1, 10) ;
_val2 = val2;
$('#output').hide().html( message ).fadeIn("slow");
$('#username').hide().html( vname +":" ).fadeIn("slow");
setTimeout(reloading,120000);
}
});
}
reloading();
});
$(document).jkey('a',function() {
$.post("update.php", { "id": _id} )
$('#output').hide().html( "<i>thx" ).fadeIn("slow");
$('#username').fadeOut("fast");
$('#valg1').fadeOut("fast");
$('#valg2').fadeOut("fast");
clearTimeout(reloading);
setTimeout(content,5000);
});
</script>

The clearTimeout should get the unique "key" that is returned by setTimeout. So when setting, assign the return value to global variable:
window["reload_timer"] = setTimeout(reloading,120000);
Then have this:
clearTimeout(window["reload_timer"]);

You must save the setTimeout() id in order to later clear it with clearTimeout(). Like this:
var timeoutID = setTimeout(function(){someFunction()}, 5000);//this will set time out
//do stuff here ...
clearTimeout(timeoutID);//this will clear the timeout - you must pass the timeoutID

Besides saving the timeout id as mentioned in other posts, your function reloading is created inside function content and since you create no closure to it, it's unreachable from the rest of the program.
$(function content(){
function reloading(){
console.log('RELOADING');
}
reloading();
});
// Can't reach `content` or `reloading` from here
You have to do something like this:
var reloading, content, reloadingTimeoutId, contentTimeoutId;
reloading = function () {
console.log('RELOADING');
$.ajax(
// CODE
success : function (data) {
// CODE
reloadingTimeoutId = setTimeout(reloading, 120000);
}
)
};
content = function () {
reloading();
};
$(document).jkey('a',function() {
// CODE
clearTimeout(contentTimeoutId);
contentTimeoutId = setTimeout(content,5000);
});
It's kinda difficult writing this better not knowing the bigger picture. With this, content will be called after 5 seconds and as long as reloading succeeds it will callback itself every 120 seconds. Please observe that reloading is never cleared this way.