The "document.ready()" function not firing on Chrome Mobile (android) - javascript

I have jQuery-2.1.4.min.js called before the tag, but when I write something like:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert('hi, world.');
});
</script>
On my PC it is fired of course, but on ten different Android devices it just does not. This is purely HTML/CSS/jQuery rendered site (no phonegap, or anything).
My goal was to have a button do ajax request after it's being tapped, but I can't even test that, because the .ready() function is not firing at all on mobile chrome.
The jQuery is being served from the official CDN, any help would be very much appreciated.
Tried both:
$(function() {
alert('hi, world.');
});
And
jQuery(document).ready(function() {
alert('hi, world.');
});
Same thing.
As suggested I also tried:
window.onload = function()
{
if (window.jQuery)
{
alert('jQuery is loaded');
}
else
{
alert('jQuery is not loaded');
}
}
And it alerts 'jQuery is loaded'.
As per jQuery docs it says: "Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute" - which would mean that DOM is not ready for JavaScript code to execute? But when I try like:
<script type="text/javascript">
alert('hi world');
</script>
It executes on mobile Chrome.

Okay, after extensive investigation it seems that JS breaks on mobile chrome if you have document.ready() function twice, I had one in my core.js file and one in-line on the page.
It works okay on PC (all browsers), but on mobile it works up to the point of second ready() call and breaks all JS after that.
Hopefully this saves some time to others in the future.

JS breaks on mobile view becouse same js use multiple time in file. Check and remove redundancy.

Related

addEventListener is Not Working as Expected (Inner HTML is not Populating) [duplicate]

I need to execute some JavaScript code when the page has fully loaded. This includes things like images.
I know you can check if the DOM is ready, but I don’t know if this is the same as when the page is fully loaded.
That's called load. It came waaaaay before DOM ready was around, and DOM ready was actually created for the exact reason that load waited on images.
window.addEventListener('load', function () {
alert("It's loaded!")
})
For completeness sake, you might also want to bind it to DOMContentLoaded, which is now widely supported
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});
More info: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Usually you can use window.onload, but you may notice that recent browsers don't fire window.onload when you use the back/forward history buttons.
Some people suggest weird contortions to work around this problem, but really if you just make a window.onunload handler (even one that doesn't do anything), this caching behavior will be disabled in all browsers. The MDN documents this "feature" pretty well, but for some reason there are still people using setInterval and other weird hacks.
Some versions of Opera have a bug that can be worked around by adding the following somewhere in your page:
<script>history.navigationMode = 'compatible';</script>
If you're just trying to get a javascript function called once per-view (and not necessarily after the DOM is finished loading), you can do something like this:
<img src="javascript:location.href='javascript:yourFunction();';">
For example, I use this trick to preload a very large file into the cache on a loading screen:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">
Try this it Only Run After Entire Page Has Loaded
By Javascript
window.onload = function(){
// code goes here
};
By Jquery
$(window).bind("load", function() {
// code goes here
});
Try this code
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}
visit https://developer.mozilla.org/en-US/docs/DOM/document.readyState for more details
Javascript using the onLoad() event, will wait for the page to be loaded before executing.
<body onload="somecode();" >
If you're using the jQuery framework's document ready function the code will load as soon as the DOM is loaded and before the page contents are loaded:
$(document).ready(function() {
// jQuery code goes here
});
the window.onload event will fire when everything is loaded, including images etc.
You would want to check the DOM ready status if you wanted your js code to execute as early as possible, but you still need to access DOM elements.
You may want to use window.onload, as the docs indicate that it's not fired until both the DOM is ready and ALL of the other assets in the page (images, etc.) are loaded.
In modern browsers with modern javascript (>= 2015) you can add type="module" to your script tag, and everything inside that script will execute after whole page loads. e.g:
<script type="module">
alert("runs after") // Whole page loads before this line execute
</script>
<script>
alert("runs before")
</script>
also older browsers will understand nomodule attribute. Something like this:
<script nomodule>
alert("tuns after")
</script>
For more information you can visit javascript.info.
And here's a way to do it with PrototypeJS:
Event.observe(window, 'load', function(event) {
// Do stuff
});
The onload property of the GlobalEventHandlers mixin is an event
handler for the load event of a Window, XMLHttpRequest, element,
etc., which fires when the resource has loaded.
So basically javascript already has onload method on window which get executed which page fully loaded including images...
You can do something:
var spinner = true;
window.onload = function() {
//whatever you like to do now, for example hide the spinner in this case
spinner = false;
};
Completing the answers from #Matchu and #abSiddique.
This:
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
Is the same as this but using the onload event handler property:
window.onload = (event) => {
console.log('page is fully loaded');
};
Source:
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
Live example here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event#live_example
If you need to use many onload use $(window).load instead (jQuery):
$(window).load(function() {
//code
});
2019 update: This is was the answer that worked for me. As I needed multiple ajax requests to fire and return data first to count the list items.
$(document).ajaxComplete(function(){
alert("Everything is ready now!");
});

How can I reliably run a jquery script after page load

I'm attempting to get some jquery code to run after a sharepoint page loads, the code being:
$(".ms-commentcollapse-icon").click();
I've been using the following to load the code after the page loads, but it does not seem to be very reliable (it will work sometimes and other times it wont):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$(".ms-commentcollapse-icon").click();
});
</script>
are there any other good methods for achieving this? I'm not sure what's going on, sharepoint could be at fault, but I figured I would try fiddling around with the script a bit more first.
You could use an auto-executing function:
<script type="text/javascript">
(function () {
$(".ms-commentcollapse-icon").click();
} ());
</script>
If this is SharePoint 2010 or above, you can use ExecuteOrDelayUntilScriptLoaded(yourfunction,"SP.JS") to keep your code from firing until after the SP.JS library has loaded (or you can put any other library in the second parameter for a similar effect).
If this is in a web part and you don't want it to execute until other web parts on the page are fully loaded, make sure the web part containing the script is below the other web parts.
As a last resort, you could execute it on a delay using setTimeout or setInterval, but that's ugly.
You can prevent the default behaviour by using e.preventDefault(); within the function.
<script type="text/javascript">
$(".ms-commentcollapse-icon").click(function(e) {
// We're going to stop the default behavior
e.preventDefault();
//some code here
});
</script>

Long delay when using Modernizr/yepnope

I'm starting to use Modernizr for my front-end projects these days and just realized something that bugs me.
(Demo link after code snippets)
But first, here's what's before my <body>:
<script src="js/vendor/modernizr.custom.js" type="text/javascript"></script>
<script src="js/loader.min.js" type="text/javascript"></script>
And here's my loader script (removed some lines for brevity):
Modernizr.load([
// jQuery
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
complete: function () {
if (!window.jQuery) {
Modernizr.load('js/vendor/jquery-1.11.1.min.js');
}
}
}
// Slick (slideshow)
,{
load: '//cdn.jsdelivr.net/jquery.slick/1.3.9/slick.min.js',
complete: function() {
if (!window.jQuery.fn.slick) {
Modernizr.load('slick/slick.min.js');
}
}
}
// Main script
,'js/script.min.js'
]);
Demo link: http://toki-woki.net/lab/transbal/
I can see the page load and, almost a second after that, my slideshow initializer (wrapped in a $() call) kicks in. That delay is fairly long and unaesthetic, which is what I want to fix.
I've looked at the Network tab in Chrome and see my Modernizr-loaded scripts are first loaded as images (thus, not executing) and then added as script tags and, eventually, executing. That would explain the delay, because jQuery would be executed late (after the DOMContentLoaded event) and the $() call would fire after that.
Some questions:
Is that how Modernizr/yepnope works?
Is it possible to reduce that delay?
What event is used by Modernizr/yepnope to determine when to inject script tags? Looks like it's load but that seems like a strange choice to me...
I've tried not using Modernizr.load at all and reference my script just before the </body> tag and it works perfectly (no slideshow size jumping) but it is harder and heavier to maintain...
Got tips?
Thanks!

jQuery callback for click() not working

I want to do a simple animation clicking on this link
<a id="C" href="http://www.google.com">Make me disappear</a>
Callback is
$("#C").click(function(event) {
event.preventDefault();
$(this).hide("slow");
});
while on jfiddle my code works, I am not able to make run this callback on a jsp page. I wrote js code in a different file imported with
<script type="text/javascript" src="scripts/lib.js"></script>
I am quite sure jQuery and lib.js are being included because from developer tools console (on Chromium) I can make it do the animation; moreover they are both in developer tools' scripts tabs.
Thanks
Notice that on jfiddle it's including your jQuery click handler in the page's onload function; are you doing that in your lib.js file?
$(function() {
$("#C").click(function(event) {
event.preventDefault();
$(this).hide("slow");
});
});
(Using $(function() {}); is a shorthand for running that code when the DOM is ready - see the jQuery .ready() documentation.)
Or even better:
(function($) {
// do your stuff here
})(jQuery);
to be able to handle possible future conflicts.

javascript: how to check all code of an html page is loaded

the program needs invoke a function after all code, including HTML, javascript, CSS, etc., is loaded? Can javascript do it?
for JavaScript
window.onload = function(){
//your code
};
for JQuery
$(document).ready(function(){
//your code
});
window.onload will fire after all images, frames and objects have finished loading on the page. Your question isn't clear enough on whether or not you want the script to wait for those, but if you don't then you need a "document ready" solution.
Firstly, many (all?) DOM-based Javascript frameworks provide this functionality, cross browser in the form of an event. jQuery example:
$(document).ready(function() {
alert("DOM is ready");
});
If you want to do it without the framework, it gets a little more awkward. Most browsers (coughnotIE) provide a DOMContentLoaded event:
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
alert("DOM is ready");
}, false);
}
For IE's part, the defer attribute on a script tag will do the job. You can use conditional comments to make sure only IE parses the script:
<!--[if IE]
<script type="text/javascript" defer>
alert("DOM is ready");
</script>
<![endif]-->
If you're using the jQuery library, you simply do this:
$(document).ready(function() {
// The code you need to have executed after loading the page
});
window.onload = function() {
// Your code here
};
What have you tried?
You can use <body onload="doStuff()">, or you can use window.onload in your script. Check this out.
The jQuery $(document).ready(...) method is triggered when the dom is loaded and can be manipulated and before all scripts, images, etc. are loaded.
The window.onload event will fire when everything that has been requested has completed loading.

Categories

Resources