jQuery working only upon reload - javascript

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
});

Related

Click button with Javascript after page load / as soon as element loads

I've checked many other answers on StackOverflow but none of them work for some reason.
I'm trying to use something simple like
window.onload = function() {
sleep(5000)
clickButton()
}
But as far as I can tell the button on a page I want clicked loads AFTER page load. So window.onload doesn't work at all. That's why I tried to use a custom sleep function to force the code to run after-after page load but nope. Code "sleeps" by preventing page from fully loading, then runs clickButton(), then the page loads. Useless.
I know my actual button clicking code works in practice because I just fed into the browser console line by line and it worked fine. But the button I'm targeting loads after my code is executed!
I have also tried these which also do not work:
window.addEventListener('load', function () {
clickButton()
})
setTimeout(clickButton(), 5000)
setInterval(clickButton(), 5000)
...
Also I'm using:
document.querySelector("[data-a-target='button-name']");
instead of:
document.getElementById("button-name");
since this button does not have an id.
...
Also I have never used jquery before if that is the answer.
...
How on earth do I get js to click a button immediately as soon as it loads?
The order in which you write your code plays an important role here.
Firstly, put the script tag at the very bottom of the body element of your html page. That forces the browser to have already read through the entire html page before getting to the script tag with your Javascript.
Secondly, I assume you have an event listener for a click on the button. Write the event listener before you let the button be clicked.
For example, I wrote this little code to test my assumption out:
button.addEventListener('click', function () {
console.log('Clicked');
});
button.click();
This should hopefully work for you too. Good luck

jQuery does not trigger on Meteor Application after you do a page refresh in the browser

I am trying to implement this codepen into my Meteor app which I run with blaze.
I'm running into a problem where if I click on the Floating Action Button after a page refresh, nothing happens.
If I leave the page then go back it works fine. However every time I Ctrl + R or refresh the browser by hitting the refresh button, the jQuery will not run anymore.
My implementation of the CodePen code is pretty much exactly the same so I've narrowed this issue down to something with Meteor and the way it renders templates.
I've tried a few things so far:
1) Put it in a $(window).load()
2) Put in in a $(document).ready()
3) I've put it outside the Template.onRendered function
Here's the jQuery that's supposed to run when the plus button is clicked, the full code is in the CodePen link as well
$(".action").click(function(){
// $(".content1").addClass("inactive").delay(200).fadeOut(0);
$(this).addClass("active");
$(this).closest("div").find(".content2").fadeIn(0).addClass("active");
});
$(".close").click(function(){
$(".content2").removeClass("active").delay(300).fadeOut(0);
$(".action").removeClass("active");
// $(".content1").fadeIn(0).removeClass("inactive");
});
Ok so I placed that jQuery in the events section and it worked.
Template.TempName.events({
'click .action': function (event, instance) {
alert('hello');
// $(".content1").addClass("inactive").delay(200).fadeOut(0);
$('.action').addClass("active");
// $(this).closest("div").find(".content2").fadeIn(0).addClass("active");
},
});

jQuery only working sporadically or on a page refresh/hard reload

I am using jQuery to read the URL of the page to determine which page the user is on and then change the background accordingly. My code works great, sometimes... I've tried using $(window).load(function() to no avail and the only answer I can find here is to use $( document ).ready(function() but that's not much help because that's how I wrote the code to begin with, and it's not working as it should. I also attempted to force the page to reload inside the function but that was pointless as well, ( I didn't have much hope for it anyway). When it doesn't work a simple click of the refresh button will get it to work. I have also tried putting the script tag in the header and footer, no difference. I have implemented the same code on different sites and in both cases, it works fine... I thought that maybe it was a caching issue but multiple hard reloads proved otherwise.
You can see for yourself at http://maisonshowroom.com/ click through the nav and the background is supposed to change for each page. I also have a console.log message that should reflect the URL, sometimes it's correct...but that just raises more questions for me, regardless if it's correct or not it should still have a background image rather than just being blank.
Here's my code
$(document).ready(function() {
//changes background images based on which page user is on//
var currentPage = window.location.href;
console.log(currentPage);
if (currentPage.includes('about')) {
$('.wrapper-inner').css('background-image',
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-
about.jpg)');
}
else if (currentPage.includes('services'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-service-e1506643269331.jpg)');
}
else if (currentPage.includes('products'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-product.jpg)');
}
else if (currentPage.includes('contact'))
{
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-contact.jpg)');
}
else {
$('.wrapper-inner').css('background-image', 'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-about.jpg)');
}
});
Remove this line:
window.location.reload();
and fix this line :
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-
about.jpg)');
to:
$('.wrapper-inner').css('background-image',
'url(http://maisonshowroom.com/wp-content/uploads/2017/09/maison-about.jpg)');
One single line
All I needed to do was disable the AJAX page transition from the WordPress dashboard. Thanks, Patrick Evans, for pointing out that it was being handled by AJAX, I would have never guessed.

Javascript do not reload parent

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.

Jquery/Javascript not activating a gif image (Firefox only)

First thing to mention is that my code is working in IE8 and Google Chrome.
It's only under Firefox that I have the problem, tested it under Ubuntu and Win XP same issue with FF.
I'm tryng to display an ajaxloader gif image while I am refreshing the page.
At the very beginning I am using jquery .ready() function to hide the div#refreshing that would display the image.
When we click on the refresh link then I show the div#refreshing. My problem is that the ajaxloader.gif is not turning
like it should be it becomes to be a fix image. But as mentionned it works under chrome and IE.
Any idea why?
HTML:
<div id="refreshing">Refreshing</div>
Refresh
CSS:
#refreshing {
font: 14px Verdana,Arial;
color: #00264b;
background: url("/med/base/img/ajax-loader-blue.gif") center no-repeat;
}
JavaScript:
$(document).ready(
function() {
// hide the ajax loader
$("#refreshing").hide();
}
);
function refreshPage() {
$("input").attr("disabled", "disabled");
$("select").attr("disabled", "disabled");
$("img").attr("onclick", "");
$("a").attr("href", "#");
window.location.href = window.location.href;
$("#refreshing").toggle();
}
One more thing is that the firefox config image.animation_mode is set to normal.
Plus if I look under firebug the image is animated.
thank you everyone.
The reason it doesn't work is because Firefox stops all gif animations on page refresh.
In order to make this work you should load the page (or better yet, only the updated parts) via ajax and overwrite the existing content with the new.
I finally manage to get it to work with a coffee on a good Wednesday morning.
Here is the code, while Firefox was stopping the GIF image to work and I was using it to display
the user that we were refreshing the page, I though it could be just the way I was refreshing the page that was incorrect.
So I search another way of refreshing the page in Javascript some where using window.location.reload();
I tried it, but there was only one problem with this method, my input that I desactivate while refreshing were still disabled on refresh.
I went in the process of reactivating them within a $(document).ready(function() { //activate input });
At the end it was working fine, but I still found the reactivating odd.
I finally search for the difference between window.location.href=window.location.href and window.location.reload()
Got it here -> Difference between window.location.href=window.location.href and window.location.reload()
So by passing the argument true to the reload function we tell the reload function to not post the old POST data and get a fresh copy of the page from the server.
That fixed completly my issue.
I didn't change the HTML code neither the CSS
<!-- JS -->
$(document).ready(
function() {
// hide the ajax loader
$("#refreshing").hide();
}
);
function refreshPage() {
$("input").attr("disabled", "disabled");
$("select").attr("disabled", "disabled");
$("img").attr("onclick", "");
$("a").attr("href", "#");
window.location.reload(true);
$("#refreshing").show();
}
Thank you everyone.
Another sollution is to use a html5 canvas element for animated loaders. It should still work fine on page reload.
This generator works pretty well and is cross browser compatible http://heartcode.robertpataki.com/canvasloader/

Categories

Resources