Why doesn't my page auto refresh properly? - javascript

My goal is to refresh the page when the class p.fancybox-error is visible, but I would like to know why this part of the code doesn't work at the top of my page.
<script type="text/JavaScript">
var theDiv = document.querySelector("p.fancybox-error");
theDiv.addEventListener("click", function() {
setTimeout(function(){ location.reload(); }, 5000);
});
</script>
I put it under this line:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
But it gives me this error:
null is not an object (evaluating 'theDiv.addEventListener')
Thanks a lot guys, just take a look to #Stephane's answer, it works perfectly for me.

This polls every second looking for your class and auto-reloads when it exists
$(function() {
setInterval(function() {
if($("p.fancybox-error").length) location.reload();
}, 1000);
});

Related

$ not found error while using setinterval

I am trying to automatically click a button when it is created and after clicking the button, close the interval. But the following script is giving me $ is not defined error. Can anyone help me where am I doing wrong?
var timer = setInterval(
function () {
if ($('#element')) {
$('#element').click();
clearInterval(timer);
}
else
{
console.log('Element not found');
}
}, 1000);
only if you are using jQuery add their cdn in your html page
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>

Javascript refresh webpage every 5s

I refrence the JS unlock right click script:
javascript:(function() { if(window.addEventListener) window.addEventListener(a, function (e) { for(var n=e.originalTarget; n; n=n.parentNode) n[ona]=null; }, true); window[ona]=null; document[ona]=null; if(document.body) document.body[ona]=null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart");})()
when you put the link in the url and enter, you can use right.
so I want to make a js link to put in the url and enter, the website will refresh every 5s.
javascript:(function() {
function refresh() {
window.location.reload(true);}
setTimeout(refresh, 5000);
})()
but I can't do that, please help.
because my English too bad, if u don't understand, ask me.
<meta http-equiv="refresh" content="5; URL=http://www.yourdomain.com/yoursite.html">
If it has to be in the script use setTimeout like:
setTimeout(function(){
window.location.reload(1);
}, 5000);
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// -->
</script>

Quit function on body onLoad

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>

Jquery to load java script content into a div

I have the following code:
var refreshId = setInterval(function()
{
$("#footad").html('myjshere');
}, 15500);
Where it says myjshere I want to load this content into the div:
<script type='text/javascript'>
AdServer.placeAd({"sz":"728x90","pos":1});
</script>
But when I try just having it where myjshere is, it throws out a syntax error?
Any help?
To clear up the confusion I was put the JavaScript where myjshere is I just used the word myjshere as a place holder to show you what I was doing. Sorry for the confusion. The issue is that when I put the javascript within the jQuery it does not work and returns an error: invalid syntax.
What your script is doing is putting 'myjshere' into the element with id 'footad' .
Is that what you are trying to achieve?
If I understood right, what you want, then this is the code:
var refreshId = setInterval(function()
{
$("#myjshere").html("<script type='text/javascript'> AdServer.placeAd({'sz':'728x90','pos':1});</script>");
}, 15500);
Else if you want to replace myshere
var refreshId = setInterval(function()
{
$("#footad").replace("myjshere","<script type='text/javascript'> AdServer.placeAd({'sz':'728x90','pos':1});</script>");
}, 15500);
I'm assuming AdServer.placeAd is a third-party function you want to implement. Therefore it depends on what the output of this function is. If Adserver.placeAd returns a HTML string you could do the following:
<script type='text/javascript'>
var refreshId = setInterval(function()
{
$("#footad").html(AdServer.placeAd({"sz":"728x90","pos":1}));
}, 15500);
</script>
My guess is that this code is running document.write() inside the function seeing as its called placeAd. Therefore you could add the code into the part of the HTML document you want it to appear like:
<script type='text/javascript'>
setInterval(function()
{
AdServer.placeAd({"sz":"728x90","pos":1});
}, 15500);
</script>
i better dont aks why you want to do this....
$('#footad').html('<script type="text/javascript">
AdServer.placeAd({"sz":"728x90","pos":1});
</script>');
do you want to see the js as plain text you can load it with:
var js = AdServer.placeAd({"sz":"728x90","pos":1});
$("footad").html(js);
but will the js function placeAd return html? if not you must give an target to the AdServe class. like Adserver.target("#footad");
if this all is not that what you need, you must give more informations.
You need to do it like this
<script type='text/javascript'>
var myjshere = AdServer.placeAd({"sz":"728x90","pos":1});
$(document).ready(function(){
setInterval(function() {
$("#footad").html(myjshere);
}, 15500);
});
</script>

Small modification to my jQuery code

Hello how can I edit my following code to reload automatically the content of a specified div?
My code below reloads a file called form.php and I would like to be replaced with a div.
<style>
.loading {
height:24px;
background: url('http://b.static.ak.fbcdn.net/rsrc.php/v1/yb/r/GsNJNwuI-UM.gif') 50% 50% no-repeat;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js'></script>
<script language='JavaScript'>
setInterval( 'SANAjax();', 10000 ); ///////// 10 seconds
$(function()
{
SANAjax = function()
{
$('#reservationdetails')
.empty()
.addClass('loading')
.load('form.php', function()
{
$('#reservationdetails').removeClass('loading')
});
}
});
</script>
Thank you!
Reorder your code:
$(function() {
var SANAjax = function(){
$('#reservationdetails').empty().addClass('loading')
.load('form.php', function() {
$(this).removeClass('loading')
});
}
setInterval(SANAjax, 10000 );
});
I assumed that #reservationdetails is the div you want to load the responce in.
There is no need to pass a string to setInterval. Always pass function reference to it (same for setTimeout).
Felix Kling's answer is correct.
Also worth noting: it is very bad practice to use setInterval in this manner, as you are unsure if .load will return within the 10 seconds you specified. (Think, for example, of mobile devices.) Even if it did return in 9 seconds, it would then be only one second before you fired off the next request. Better to do a setTimeout in the callback, like so:
$(function () {
function loadReservationDetails() {
$('#reservationdetails')
.empty()
.addClass('loading')
.load('form.php', function () {
$(this).removeClass('loading');
setTimeout(loadReservationDetails, 10000);
});
}
loadReservationDetails();
});

Categories