I load content in to a DIV (#mydiv) from a page (mypage.php) . The page that i get content from has javascript inside.
In THE mypage.php
function refresh_feeds() {
//bla bla
}
$(function(){
feed_timer = setInterval(refresh_feeds, 50000);
});
When i clean the content of #mydiv and load content from another page (mypage2.php), setInterval that started in mypage.php keeps running.
my question is how can i stop it when the content from mypage.php is unloaded
or
how can i handle unload event of mypage.php ?
var feed_timer;
function refresh_feeds() {
//bla bla
}
$(function(){
clearInterval(feed_timer);
feed_timer = setInterval(refresh_feeds, 50000);
});
function refresh_feeds() {
console.log(1);
}
$(function() {
window.feed_timer = window.setInterval(refresh_feeds, 100);
});
$(window).bind("beforeunload",function() {
window.clearInterval(window.feed_timer);
window.feed_timer = null;
return 1;
});
Please check in console for this
you have to clear your Interval
clearInterval(feed_timer);
be sure to save the feed_timer in a global scope
Related
I am using jquery to auto update a part of the HTML page. Following is the code
$(document).ready( function() {
$('#auto').load("static/l.txt");
refresh();
});
function refresh() {
setTimeout(function() {
$('#auto').load("static/l.txt");
refresh();
}, 1000);
}
The id of the HTML div tag to be updated is auto
The file static/l.txt is continuously being updated by another python program.
But when I load the html page , the div only gets updated once and does not update the value until and unless I open the developers console on the browser.
I am hosting the web page using Flask in python
How about trying this?
var counter =0 ;
$(document).ready( function() {
$('#auto').val("starting");
refresh();
});
function refresh() {
setInterval( function() {
counter ++;
$('#auto').val(counter);
}, 1000);
}
Use a callback to know, when the content is actually loaded and move the function definition in the ready block, also.
$(document).ready(function() {
function loadData() {
$('#auto').load('static/l.txt', function(completed) {
setTimeout(loadData, 1000);
});
}
loadData();
});
This is an ASP.Net MVC 5 project.
I have a simple javascript/jQuery as follow:
<script>
$(document).ready(function () {
$("#textBox").focusout(function () {
var phrase= $("#textBox").val();
phrase= phrase.replace(new RegExp(/\s+/, 'g'), "%20");
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase);
});
});
</script>
As you can see, there is a jQuery .load method which calls SearchSingular action in the Search controller when the focus is out from HTML element with id = textBox. This works well, except that the SearchSingular action execution may sometimes take time to finish.
Thus, I want to show a loading image when the load is not finished. Is there any way to do this?
Turn it into a callback
// Somecode to display a image
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase, function() {
// Somecode to remove image
});
You can use a loading image while div contents load
("#loadingImage").show();
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase, function(){
$("#loadingImage").hide(); // hide the image after loading of div completes
});
Div for your loading image
<div id="loadingImage">
<img src="loader.gif">
</div>
There is a complete callback of jQuery .load function (read more http://api.jquery.com/load/)
You could revise your javascript as following:
<script>
$(document).ready(function () {
$("#textBox").focusout(function () {
var phrase= $("#textBox").val();
phrase= phrase.replace(new RegExp(/\s+/, 'g'), "%20");
ShowLoading();
$("#commentDiv").load(
"../Search/SearchSingular?phrase=" + phrase,
function () { HideLoading(); }
);
});
});
</script>
I have tried the following:
<body id="myBody" onload = "setTimeout('a()', 5000)" / >
Is this the correct method? The reason why I want to do this is because I have my entire website animating in (such as fade ins) on page load. Having my javascript only makes the animation unsmooth.
Any feedback appreciated.
This code will work. Just set your time in milliseconds and write your JS code on loadAfterTime function:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// code you need to execute goes here.
}
</script>
window.addEventListener("load", function () {
animation();
setTimeout(otherOperation, 5000);
}, false);
function animation() {}
function otherOperation() {}
maybe you can use code like this
<body id="myBody" onload = "setTimeout(a, 5000)">
Try this
if you are using jQuery your animation has a callback that you can use to delay the firing of all other javascript events like so:
$( window ).on( 'load', function () {
$( '.someElements' ).animate({
// properties to animate
}, 300, function () {
initScripts();
});
});
function initScripts () {
// call all other functions here
}
The Browser is always load all of your script if any when you open the web page. So It depend on when you call your javascript functions.
Try this:
document.ready(function(){
// your code
});
or
$(function(){
// your code
});
both of them make sure that all of element on your page have been loaded.
I am refreshing an iframe on my page when someone clicks on an image with this code:
$("img").click(function() {
$('#space iframe').attr('src', function(i, val){ return val; });
openBox();
});
But I only want to execute openBox() function after the iframe is done refreshing.
How can I achieve something like that?
Using jQuery:
$('#frameId').on('load', function() {
//code to execute after frame loaded
});
Using vanilla JavaScript:
document.getElementById('frameId').addEventListener('load', function() {
//code to execute after frame loaded
});
While this isn't exactly your problem, here is how you listen for an load event on an iFrame.
HTML
<iframe id="frame"></iframe>
<button id="loadFrame">load frame</button>
JS
$("#loadFrame").click(function () {
$("#frame").attr("src", "http://www.google.com");
$("#frame").on("load", function () {
alert("ad");
});
});
Fiddle: http://jsfiddle.net/7RL35/4/
I need a script thats redirects the user to a second side, when the mainpage need to long to load.
I did this:
<script type='text/javascript'>
$(document).ready(function() {
setTimeout("location.replace('contact.html')",10000);
});
</script>
To sametime a preloader opens an get hided on on body onload, when that happens i need to kill the functon above?
Anybody an idea?
Try this:
var redirect = setTimeout(function(){
window.location = 'somewhere'
}, 10000)
$(document).ready(function() { // or $(window).load(function() {
clearTimeout(redirect);
});
setTimeout("location.replace('contact.html')",10000);
Instead, you can try
setTimeout(function(){window.location='contact.html'},10000);
You Can try Following
var Ispreloader=false;
<script type='text/javascript'>
$(document).ready(function() {
if(!Ispreloader)
{
myfunction();
}
});
function myfunction()
{
setTimeout("location.replace('contact.html')",10000);
}
//------------Whenever preploadeer loads on bodu unload set the variable to true
Ispreloader=true;
</script>