So I'm working on a project. This includes a div which I've loaded in with jQuerys' .load(). Now I want to refresh that every 10 seconds. So in the loaded page, I've done the following:
<script type="text/javascript">
setTimeout(function(){
location.reload(1);
}, 10000);
</script>
But for some reason, this reloads not only the frame, but also the parent. I've also tried to reload the div which I'm loading into with the following code:
<script type="text/javascript">
$(document).ready(function() {
$("#radiostatusInner").load("/public/assets/scripts/radiostatus.php");
var refreshId = setInterval(function() {
$("#radiostatusInner").load('/public/assets/scripts/radiostatus.php');
}, 10000);
$.ajaxSetup({
cache: false
});
});
</script>
But this gives me the same result...
Is there any way to resolve this issue?
location.reload() reloads the parent window, so unless your content is in an iframe (and you're targeting that iframe) that will always refresh the entire page.
The second snippet should work (remove the first snippet if it's still there), but it's not ideal. Your timer isn't aware of when the AJAX request will return.
Something like this would be better:
(function getRadioStatusInner() {
$("#radiostatusInner").load("/public/assets/scripts/radiostatus.php", function() {
setTimeout(getRadioStatusInner, 10000);
});
}());
The second snippet of code you've shown should work as you need, but you should remove the first snippet from the loaded page, because it will make the entire page reload once it gets loaded and appended to the DOM.
Only use the second snippet in your page and everything should work as expeced.
Related
I want to refresh my order page to update it with new orders:
<script type="text/javascript">
$(document).ready(function(){
window.setTimeout(function(){
location.reload();
}, 2000);
});
</script>
It works fine. However, when I leave the page, e.g. by clicking a link, the page is being refreshed once more. It seems like the location.reload() is being cached/remembered in advance or so.
I simply want the reload to stop once I leave the page.
How can I prevent this behaviour?
On this WordPress site, I use a site-wide script to add information to outgoing links.
However, it only works if the page is reloaded or the user navigates to any second page.
Assuming it was a jQuery loading time issue, I added a timer to wait for it, but it doesn't make any difference: the message "jQuery loaded!" appears but the click function seems not to be working.
When the page is reloaded, the click function works as expected.
Here is the code:
var jQloaded = setInterval(function() {
if (window.jQuery) {
console.log("jQuery Loaded!");
clearInterval(jQloaded);
jQuery(document).on('click', 'a[href*="/external/"]', (function(e) {
e.preventDefault();
alert('ok');
}));
}
}, 50);
I tried everything I could think of without success. Can you tell me what's wrong?
PS: to replicate the behavior it's necessary to open a fresh incognito/private window. Emptying the cache + hard reload isn't enough.
Try wrapping your code within the document.ready method
$(document).ready(function() {
// code here
});
I want to change between two pages in html with javascript, but when I change with window.location, the code that is after this sentence continues executing.
So when I do, for example, a call to getElementById() it doesn't recognize the element because the page is still loading.
function myFun(){
// ...
window.location = 'page.html';
// ... wait until page.html is loaded
}
How can I wait until the page is loaded to avoid this problem?
When you do
window.location = 'page.html';
you replace the page in the browser, the one containing the code of myFun, by a new page. There is no way for the code following this instruction to be executed.
If you want to execute it, and only after that change page (but I don't see the point), then you might do
document.onload = function(){ window.location = 'page.html'; };
You can use jQuery document.ready or you can create custom bind like this one. In case you use jQuery.
$(document).ready(function() {
window.location = 'page.html';
});
You can't execute code in your own page after doing window.location = 'page.html';. Your page will be replaced by the new page and the code in the current page will no longer be there.
The only ways to execute some code after page.html is loaded into the current window are as follows:
Load it in an iframe or another window and monitor for when the iframe or window has finished loading. In this way, your current code stays around and is not replaced.
Have some code in page.html that monitors when it finishes loading and trigger your desired action from there.
I want reload a url in each seconds with jquery, i try as following code, this code reloading url only once. How do i do?
setInterval(window.location = $('#thisLink').attr('href'), 1000);
DEMO: http://jsfiddle.net/QBMLm/
If it's your page, you can use this in the head :
<meta http-equiv="refresh" content="1;url=/">
of course, this only works for the page it's embedded in, and won't keep reloading some other external site?
setInterval is not persistent between browser reloads. Also, it takes a function as first argument. You can try something like:
setTimeout(function() {
window.location = $('#thisLink').attr('href');
}, 1000);
It will wait 1sec before redirecting. If the page you are redirecting to have the same code, it will do the same.
Once you re-load the url (window.location change) the context (and scope) of that setInterval become moot (the page is discarded and the next is loaded). The script's then reloaded and setInterval reassigned.
Oh, and syntactically that code is invalid. You probably want to wrap the window.location portion in a function(){}, e.g.
setInterval(function(){
window.location = $('#thisLink').attr('href')
}, 1000);
otherwise it's not actually executing in an interval fashion, but immediately.
Look that these which may help you:
JS setInterval executes only once
setInterval with jQuery.html only updates once?
http://www.google.com/search?q=jquery+setinterval+only+running+once&aq=0&oq=jquery+setinterval+only+running+once&sugexp=chrome,mod=1&sourceid=chrome&ie=UTF-8
It's reloading only once, since once you change window.location you leave your page.
You need to open the link in new named window or embed the child page in an iframe.
setInterval(function() {
window.open($('#thisLink').attr('href'), 'mywindow', '');
});
I'm making a site where the different pages are brought in by .load(), the problem is that index.php is initially empty and my other efforts have simply loaded the page into itself or left the page empty (pages can still be emptied and loaded from #contentspace though). My current code loads nothing, i'm sure i'm doing several things wrong, I just need to know where to start. do i need to use php for this?
//load page into contentspace by default?
var defaultpage = "blog.php";
$(document).ready(function() {
$("#contentspace").load(defaultpage);
)};
You have a syntax error with your closing of the $(document).ready )}; for one. As you can see in my demo here: http://jsfiddle.net/n1ck/NNpqq/9/ it is requesting the blog.php file.
//load page into contentspace by default?
var defaultpage = "blog.php";
$(document).ready(function() {
$("#contentspace").load(defaultpage);
});