I'm using the jQuery Loader plugin to load files on demand- tagit plugin.
The issue is that if I add an alert to the callback function fired on load the plugin loaded seems to work, if I remove the alert, the plugin fails.
Any ideas why is this happening?
$(document).ready(function(){
$("#mytags").Loader(
{
url: [
'media/plugins/tagit/css/jquery-ui/jquery.ui.autocomplete.custom.css',
'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js',
'media/plugins/tagit/js/jquery-ui/jquery-ui-1.8.autocomplete.min.js',
'media/plugins/tagit/js/tag-it.js'
],
success: function(target) {
//alert('loaded');
$(target).tagit({
availableTags: ["tag1","tag2", "tag3"],
values: ["tag2"]
});
}
}
});
Im testing this on my local XAMP environment.
The possible reason why blocking code execution with alert() helps is that, while JavaScript execution stops (including intervals and timeouts), external resources (JS, CSS, images, and xmlhttprequests) may finish loading. But, again, until the code following the alert() completes, none of these external scripts will run and no DOM events will fire.
An example when alert() makes a difference: http://jsfiddle.net/p9Nff/
It's problaly related with async, do you try to force async to false?
When the alert open the script have time to load your plugins. or it's what Alexey said, your DOM is not ready, put your code into $(function(){ /code here/ });
Related
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!
I have a javascript function, "loadFramework()" that modifies an HTML document. Specifically, it repeatedly runs the jQuery command $("#element-id").load("document/name.html"), which injects the HTML in document/name.html directly into the element with #element-id.
Originally, I ran loadFramework() in a script in the document's header. However, since then I've realized that the function fails if the page has not loaded yet, since it relies on there being an element with #element-id.
I can't figure out how to get this function to run when it should. A simple solution seemed to be setting it to be the document.onload function:
document.onload = function() {
loadFramework();
}
But in this case it never seems to run at all.
How do I make sure a header function runs only after the document has loaded?
You should use window.onload if you are looking for a vanilla JS option
window.onload = function() {
loadFramework();
}
Jquery load takes additional argument "complete". You can run the javascript there. So the code would be:
$("#element-id").load("document/name.html", function(){
loadFramework();
});
You can also use $(document).ready(function{loadFramework()}) inside the html you are loading.
If you want to execute the loadFramework() method after "document/name.html" is loaded, I would suggest the following code.
$(function() {
$("#element-id").load("document/name.html", function(){
loadFramework();
});
});
Whats the difference? I have on $(document).ready function which should check if extjs is loaded but the main problem is extjs does not load on time and things inside $(document).ready starts to execute, extjs create function which produces the main error 'cannot execute create of undefined' on Ext.create("...", {..}); line. If i put double check like this:
$(document).ready(function() {
Ext.onReady(function() {
Ext.create('Ext.Button', {...});
});
});
Things magically work. Now I'm using ext-all.js which has ~1.3MB minified which is pretty large imho...and things get magically loaded while he does the second check...but I think those 2 functions are not the same as they definitions suggest, because if I put another $(document).ready instead of Ext.onReady() line, things break again. I think Ext.onReady({}); function does some other black magic which $(document).ready() does not, and I'm interested if someone knows what is this kind of magic?
Because it work's and I don't know why which is killing me.
Thanks for reading the post. =)
ps. I'm using ExtJS for about day so I'm pretty new to it.
No they're not the same, the first one will proc when your jQuery library is loaded, the Ext.onReady(.. will proc when your ExtJS library is loaded.
If you want to combine them you could do something like this:
var extReady = false;
var jQueryReady = false;
var librariesReady = function () {
if (jQueryReady && extReady) {
//They're both ready
}
};
$(document).ready(function () {
jQueryReady = true;
librariesReady();
});
Ext.onReady(function () {
extReady = true;
librariesReady();
});
Ext.onReady() and $(document).ready() have nothing to do about either library being loaded as the current accepted answer suggests.
According to the documentation both are about the DOM being loaded and ready.
Documentation
Ext JS: https://docs.sencha.com/extjs/6.7.0/modern/Ext.html#method-onReady
jQuery: https://api.jquery.com/ready/
An Answer to Your Case
It's possible that you're loading the Ext JS resource after your script fires, but jQuery is already loaded above your script. Thus using jQuery to wait until the DOM is loaded guarantees that the DOM has been loaded and thus by then Ext JS has also been loaded.
If you try to invert them and us Ext JS first you'll likely have an error.
According to the documentation they're doing the same thing so you shouldn't need to nest them
A Fix for this Scenario
If you are loading your resources like so:
jQuery
Your Script
Ext JS
It would be best to load them in this order:
jQuery and/or Ext JS
Order shouldn't matter as they can stand by themselves without requiring one or the other
Your Script
Additional Explanation
Due to how the DOM is loaded and parsed by the time it reads your script it guarantees that jQuery and Ext JS are available. This is why you can reference their libraries in your script; you're not waiting for them to load they're already there and available to be used which is why you can call them and use their ready calls.
You need to use the ready event of one of the libraries to guarantee that all elements are loaded into the DOM and available to be accessed. You also shouldn't try to add anything to the DOM until it's ready although you can append to current elements that have been loaded above your element/script tag. It's just best practice to not touch the DOM until it's finished loading.
Additional Explanation Nobody Asked For 🔥
Handling DOM ready is more involved than these libraries make it which is why they both include such an event handler.
The following link explains with vanilla JS how you cannot only add your event listener you also need to check if it has already fired when you go to add your event listener for DOM ready. This is a common case to handle with eventing - where you create a race condition where an event may fire before you start listening for it - then you don't know that it ever happened without another way to check.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded#Checking_whether_loading_is_already_complete
They both check for when the DOM is ready.
If you need Ext to be loaded when using jQuery, try to invert the logic (don't know if it will work, haven't tried).
Ext.onReady(function() {
$(document).ready(function() {
Ext.create('Ext.Button', {...});
});
});
Another StackOverflow question on this subject: Extjs + jQuery together
Am currently using head.js to defer loading of js files for my website. Am using colorbox in my project. The problem is that at times, the colorbox doesnt fully load (it opens the colorbox in a new page rather than in a dialog), but when i do several refreshes, it finally loads.
I guess it might be that the page content that is meant to open the colorbox dialog gets loaded even before colorbox js files are fully loaded by head.js. Is this the actual cause?
I would want to have colorbox display correctly each time without need for a refresh.
How do I keep the colorbox page code to execute only after head.js finishes loading all its dependent files?
thanks. nikk
Put your colorbox html code in a div.
<div id="colorBoxDiv" style="display:none;">
</div>
In the last line of head.js, add this code:
$("#colorBoxDiv").html($("#colorBoxDiv").html()).show();
head.js had a lot of different options how to do that. you can run callback function when needed files loaded, or use test feature api call.
For example:
// queue scripts and fire a callback when loading is finished
head.load("file1.js", "file2.js", function() {
// do something
});
// same as above, but pass files in as an Array
head.load(["file1.js", "file2.js"], function() {
// do something
});
// you can also give scripts a name (label)
head.load({ label1: "file1.js" }, { label2: "file2.js" }, function() {
// do something
});
// same as above, but pass files in as an Array
head.load([{ label1: "file1.js" }, { label2: "file2.js" }], function() {
// do something
});
// Labels are usually used in conjuntion with: head.ready()
head.ready("label1", function() {
// do something
});
// Actually if no label is supplied, internally the filename is used for the label
head.ready("file1.js", function() {
// do something
});
More in documentation
I'm trying to do some simple jQuery stuff 'dynamically' from within a MediaWiki content page. Its really just to 'beauty up' some different features.
I've done the following:
http://www.mediawiki.org/wiki/JQuery
http://www.mediawiki.org/wiki/Manual:$wgRawHtml (mainly for Paypal buttons initially)
The below code does not work. This is put in a blank content page.
<html>
<script>
$j(document).ready(function(){
$j('#test').hover(
function(){
$j('#test').attr('background-color','red');
},
function(){
$j('#test').removeAttr('background-color');
}
);
});
</script>
<div id="test">Howdy</div>
</html>
Nothing happens...
Any ideas?
Update:
I have attempted this simple solution with no result.
example.com/wiki/index.php?title=MediaWiki:Common.js
$j('#jTest-Howdy').hover(
function(){
$j('#jTest-Howdy').addClass('jTest-red');
},
function(){
$j('#jTest-Howdy').removeClass('jTest-red');
}
);
example.com/wiki/index.php?title=MediaWiki:Common.css
.jTest-red { background-color: red; }
example.com/wiki/index.php?title=jQueryTest
<html>
<div id="jTest-Howdy">Howdy</div>
</html>
as you can see here, this code should work IF jQuery was being loaded properly...
http://jsfiddle.net/5qFhv/
but it is not working for me... any help?
If you're using the jQuery that's loaded by MediaWiki 1.17, be aware that most JavaScript is loaded after page content. An inline <script> element is executed immediately when it's reached, so $j would not be defined at this time -- you'll probably see some errors in your JavaScript error console to this effect.
(Offhand I'm not sure about the jQuery that's included with 1.16; versions of MediaWiki prior to that as far as I know did not include jQuery.)
Generally what you want to do here is to either put JavaScript code modules into the 'MediaWiki:Common.js' page and let that hook up to your HTML markup, or create a MediaWiki extension -- which you can then invoke from your pages, and which will let you create any fun HTML and JavaScript output you like.
http://www.mediawiki.org/wiki/Manual:Interface/JavaScript
http://www.mediawiki.org/wiki/Manual:Developing_extensions
Code you put in your 'MediaWiki:Common.js' page will be loaded after other UI initialization, ensuring that code and variables are present so you can call into jQuery etc.
I don't know much about MediaWiki, but to me it looks like some simple javascript mistakes.
In the first sample you are trying to set an attribute on the element,
when you need to set the css or style attribute.
$j('#test').css('background-color', 'red');
In both samples you are binding an event to an element that doesn't exist yet in the DOM, so it will fail. You could use the live method, which will work for existing and future elements introduced in the DOM.
$j.('#test').live('mouseover', function(){
$j(this).addClass('hover-class');
}).live('mouseout', function(){
$j(this).removeClass('hover-class');
});
Hope that helps.
Try putting all your custom jQuery code in its own file, then load it as a module with ResourceLoader, after jQuery.
http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
Also, as a debugging method: completely load your site in Firefox, then enter your custom jQuery code in the console. If it works, your problem is a race condition. If it doesn't, jQuery isn't loading for some reason.