I'm using Turbolinks 2.5.3 and I have a script tag at the bottom of the home page.
<script>
$(document).ready(function() {
alert('hello');
});
</script>
For every page on the site, I run the following JS:
Turbolinks.pagesCached(0);
If I visit the home page, the alert appears once. If I press the back button then forward button on my browser the home page will load, and now two alerts appear. If I repeat this process again, three alerts will appear.
Here's my question:
Why is Turbolinks caching the page when I explicitly told it not to. Does it have to do with Turbolinks transforming the document ready event listener? How do I fix this so it only loads once every time?
use turbolinks:load
<script>
$(document).on('turbolinks:load',function() {
alert('hello');
});
</script>
Use this for on load instead
$(document).on('ready page:load', function() {
https://github.com/turbolinks/turbolinks-classic#events
Try something like this
<script>
$(document).ready(function() {
if (alert('hello')) {
}
else {
alert('hello');
}
});
</script>
Related
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 have a page which contains heavy traffic . It is fetching data from multiple servers and showing in the page . It takes usually 3-4 minutes for the page to complete the loading . Please take a look at some of the partial page data
All i need is a spinning gif or a loader to get over the page so that user can't click any link unless the page gets loaded completely .
I have tried the following code
<script language="JavaScript" type="text/javascript" src="JavaScript/jquery-1.3.2.js"></script>
<script>
hideLoading = function() {
$('.loading').fadeOut(20000, function() {
$(".content").fadeIn(10000);
});
};
hideLoading();
</script>
HTML:
<body>
<div class="loading">Loading...</div>
<div class="content">
The problem is when user reloads the page the browser loader spins but the content in the page doesn't get my loader to get over the content .
It only happens until the DOM gets loaded .
All I want is to get the loader to work as soon as user clicks the reload icon or hits enter or F5 or ctrl+f5 for page reload . Hope i made myself clear.
Place your jquery code in document.ready function and make some delay on that function like following :-
Add this jquery code at bottom of page.
$(document).ready(function(){
hideLoading = function() {
$('.loading').fadeOut(20000, function() {
$(".content").fadeIn(10000);
});
};
setTimeout(function(){
hideLoading();
}, 1000);
});
May be it will help you.
I know there're a lot of duplicate questions out there, I checked almost all of them, but I just couldn't find a solution in my case. So, here's my problem:
I have a banner which will show on every page of the project, inside the banner there's a close button to close the banner, and a download button which leads user to the app store to download the app. My banner works perfect only except I have to refresh the page to get these two buttons works. Here's my code:
$(document).on("pageinit", function () {
$("#close").on("click", CloseBanner);
$("#download").on("click", SetAppStorePath);
//alert("pageinit");
});
function SetAppStorePath() {
if (isIOS) {
window.location = "https://itunes.apple.com/us/app/myapp/id.....";
}
else if (isAndroid) {
window.location = "https://play.google.com/store/apps/details?id=.....";
}
}
function CloseBanner() {
$('.banner').hide();
}
Here's the simplified html:
<div class="banner">
<div class="container">
<a id="close">×</a>
<a id="download">Download</a>
</div>
</div>
I did a little test, and found something tricky: I added that alert inside pageinit, I noticed that the alert is always executed(means my button on click events are always registered) when I jump from page A to page B. But when the button works, I see page A is gone, blank page shows, alert shows, then page B shows, the buttons work. When it doesn't work, the order is different, I still can see page A, then I see alert(I still can see page A now), then it changes to page B, the buttons don't work.
So seems that when pageinit executed after page jumped, it works,but sometimes pageinit executed before page jumped, then it doesn't work.
I think your elements are dynamically created. You may need event delegation.
$(document).on("pagecreate", function () {
$("body").on("click", "#close", CloseBanner);
$("body").on("click", "#download", SetAppStorePath);
});
Move following outside of the init and change it like following
$(document).on("click","#close", CloseBanner);
$(document).on("click","#download", SetAppStorePath);
when page init executes, DOM is not ready. that is the reason it is not binding to close or download elements. and this is the way to overcome that. you dont need pageinit event here
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.
This example does not show exactly the problem, just to have an idea. For example when I click on the page 2, the content does not load in the div, I must refresh the page to see the content of the page 2.
P.S : The same code is duplicated in the others pages.
Code :
$(document).ready(function() {
$('.content-primary').html("Content of page 1"); // This line just in this example
//$(".content-primary").load("content-of-page.php"); // but I used this code on all my pages
});
This is a common jQuery Mobile problem.
You should not use document ready with jQM, instead jQM provides page events. Your problem is document ready who can, and usually triggers before page is loaded into the DOM. That is why refresh helps, at that point page is already loaded.
I made you a working example: http://jsfiddle.net/Gajotres/8hKe2/
$(document).on('pagebeforeshow', '#foo', function(){
alert('This is foo');
});
$(document).on('pagebeforeshow', '#bar', function(){
alert('This is bar');
});
Basically each page event will trigger javascript code only meant for that page. If you want your code to execute only once, pageinit event should be used instead of pagebeforeshow, like this:
$(document).on('pageinit', '#foo', function(){
alert('This is foo');
});
$(document).on('pageinit', '#bar', function(){
alert('This is bar');
});
If you want to find more take a look at my other article/answer: https://stackoverflow.com/a/14469041/1848600