jQuery.ready()
Categories: Core | Internationalisation | Document Loading | Templates
jQuery.ready( function(jQuery) )Returns: Promise
Description: Specify a function to execute when the DOM is fully loaded.
-
jQuery.ready( function(jQuery) )
version added: 1.0function(jQuery) A function to execute after the DOM is ready. Receives jQuery as argument.
The function passed to jQuery.ready()
is guaranteed to be executed after the DOM is ready,
so this is usually the best place to attach all other event handlers and run other jQuery code.
-
Display a message when the DOM is loaded.
HTML:
<body> <p></p> </body>
Code:
jQuery.ready(function($){ $("p").text("The DOM is now loaded and can be manipulated."); });
Results:
<body> <p>The DOM is now loaded and can be manipulated.</p> </body>
jQuery.ready( plugins, function(jQuery) )Returns: Promise
Description: Specify a function to execute when required plugins are fully loaded.
-
jQuery.ready( plugins, function(jQuery) )
version added: 1.0plugins A plugin name or an array of plugin names.
function(jQuery) A handler to execute after all required plugins are ready. Receives jQuery as argument.
-
jQuery.ready( options, function(jQuery) )
version added: 1.0options A set of type/name(s) pairs that define requirements for the ready call.
function(jQuery) A handler to execute after all required dependencies are ready. Receives jQuery as argument.
The jQuery.ready()
is a method to bind dependencies for a method.
Dependencies controller:
You want to execute some code which requires plugins, plugin extensions or oder scripts?
Use the jQuery.ready()
, it will check the availability of these rather load these.
If all dependencies are available then your code will execute.
The received argument is jQuery, it is very useful if jQuery are running in noConflict mode.
So you can use the $
alias inside your handler.
jQuery SDK file structure:
All plugins are located in the script directory and dots in plugin names represent subdirectories.
- jQuery.core is script/jQuery/core.js
- jQuery.ui.dialog is script/jQuery/ui/dialog.js
-
Append list items from template when the jQuery.tmpl plugin loaded and the DOM is loaded.
HTML:
<div> <ul class="list"> </ul> </div>
Code:
jQuery.ready( 'jQuery.tmpl', function($){ var tmpl = $.tmpl( '<li>${name}</li>', [ {name:'list entry 1'}, {name:'list entry 2'}, {name:'list entry 3'}, {name:'list entry 4'} ]); // wait for DOM ready $.ready(function(){ $('ul.list').append(tmpl); }); });
Results:
<div> <ul class="list"> <li>list entry 1</li> <li>list entry 2</li> <li>list entry 3</li> <li>list entry 4</li> </ul> </div>
-
Append list items from template when the jQuery.tmpl and jQuery.json plugins and the DOM is loaded.
HTML:
<div> <ul class="list"> </ul> </div>
Code:
jQuery.ready( ['jQuery.tmpl', 'jQuery.json'], function($){ var data = [ {name:'list entry 1'}, {name:'list entry 2'}, {name:'list entry 3'}, {name:'list entry 4'} ], tmpl = $.tmpl( '<li>${name}</li>', data ), json = $('<span>).text( $.toJSON(data) ); // wait for DOM ready $.ready(function(){ $('ul.list') .append(tmpl) .before( json ); }); });
Results:
<div> <span>[{"name":"list entry 1"},{"name":"list entry 2"},{"name":"list entry 3"},{"name":"list entry 4"}]</span> <ul class="list"> <li>list entry 1</li> <li>list entry 2</li> <li>list entry 3</li> <li>list entry 4</li> </ul> </div>
-
Append list items from template when the jQuery.tmpl and jQuery.json plugins and the DOM is loaded.
HTML:
<div> <ul class="list"> </ul> </div>
Code:
jQuery.ready({ plugin: [ 'jQuery.tmpl', 'jQuery.json' ], // wait for plugins DOM: true // wait for DOM ready }, function($){ var data = [ {name:'list entry 1'}, {name:'list entry 2'}, {name:'list entry 3'}, {name:'list entry 4'} ], tmpl = $.tmpl( '<li>${name}</li>', data ), json = $('<span>).text( $.toJSON(data) ); $('ul.list') .append(tmpl) .before( json ); });
Results:
<div> <span>[{"name":"list entry 1"},{"name":"list entry 2"},{"name":"list entry 3"},{"name":"list entry 4"}]</span> <ul class="list"> <li>list entry 1</li> <li>list entry 2</li> <li>list entry 3</li> <li>list entry 4</li> </ul> </div>
-
Append list items from template when the jQuery.tmpl and jQuery.json plugins, provide-foo script and the DOM is loaded.
HTML:
<div> <ul class="list"> </ul> </div>
Code:
jQuery.ready({ plugin: [ 'jQuery.tmpl', 'jQuery.json' ], // wait for plugins script: 'provide-foo', // wait for script DOM: true // wait for DOM ready }, function($){ var tmpl = $.tmpl( '<li>${name}</li>', data ), json = $('<span>).text( $.toJSON(window.fooData) ); $('ul.list') .append(tmpl) .before( json ); });
Results:
<div> <span>[{"name":"list entry 1"},{"name":"list entry 2"},{"name":"list entry 3"},{"name":"list entry 4"}]</span> <ul class="list"> <li>list entry 1</li> <li>list entry 2</li> <li>list entry 3</li> <li>list entry 4</li> </ul> </div>
jQuery.ready( options, function(jQuery) )Returns: Promise
Plugin: jQuery.dict
Description: Specify a function to execute when required plugins are fully loaded.
-
jQuery.ready( options, function(jQuery) )
version added: 1.0options A set of type/name(s) pairs that define requirements for the ready call.
function(jQuery) A handler to execute after all required dependencies are ready. Receives jQuery as argument.
The jQuery.dict
plugin extends the dependencies controller. So it is possible to load dictionaries automatical with Ajax.
jQuery SDK file structure:
All dictionaries are JSON files located in the script directory and dots in dictionary names represent subdirectories. To specify the region, set the region before the dictionary name with colon separation, if no region specified the default region will be used.
- de:project.example is script/project/example.de.json
- en:project.example is script/project/example.en.json
- en-US:project.example is script/project/example.en-US.json
-
Load this dictionaries 'proj/example.de-DE.html' and 'proj/example.en-US.html' add it to the body.
Code:
jQuery.ready({ plugin: ['jQuery.tmpl'], // required plugins dict: ['de-DE:proj.example', 'en-US:proj.example'] // specify required dictionaries }, function($){ // using the dictionaries var dictDE = $.dict('de-DE:proj.example'), dictEN = $.dict('en-US:proj.example'); dictDE.translate('Cancel') // Abbrechen dictEN.translate('Cancel') // Cancel });
jQuery.ready( options, function(jQuery) )Returns: Promise
Plugin: jQuery.i18n
Description: Specify a function to execute when required plugins are fully loaded.
-
jQuery.ready( options, function(jQuery) )
version added: 1.0options A set of type/name(s) pairs that define requirements for the ready call.
function(jQuery) A handler to execute after all required dependencies are ready. Receives jQuery as argument.
The jQuery.i18n
plugin extends the dependencies controller. So it is possible to load internationalisation regions and
currencies automatical with Ajax.
jQuery SDK file structure:
All region and currency are Javascript files located in the script/jQuery/i18n directory.
Regions:
Each region is given a unique code that is a combination of an ISO 639 two-letter lowercase culture code for the language and a two-letter uppercase code for the country or region. There are exceptions for some regions, such as Latin and Cyril variant.
- en is script/jQuery/i18n/en.js
- en-US is script/jQuery/i18n/en-US.js
- de is script/jQuery/i18n/de.js
- de-DE is script/jQuery/i18n/de-DE.js
- de-AT is script/jQuery/i18n/de-AT.js
Currencies:
Each currency is given a unique code of an ISO 4217 three-letter uppercase code.
- USD is script/jQuery/i18n/USD.js
- EUR is script/jQuery/i18n/EUR.js
-
Load the german-Germany region and curency US Dollar.
Code:
jQuery.ready({ plugin: ['jQuery.i18n'], // required plugins i18n: ['de-DE', 'USD'] // specify required i18n definitions }, function($){ // using the dictionaries $.i18n( "d", "15.02.2011", {region:"de-DE"} ); // results: date object => Tue Feb 15 2011 00:00:00 GMT+0100 (CET) $.i18n( "c", 1325.25, {region:"de-DE"} ); // results: 1.325,25 Ã $.i18n( "c", 1325.25, {region:"de-DE", currency: 'USD'} ); // results: 1.325,25 $ $.i18n( "c", 1325.25, {region:"en", currency: 'USD'} ); // results: $1,325.25 });
jQuery.ready( options, function(jQuery) )Returns: Promise
Plugin: jQuery.tmpl
Description: Specify a function to execute when required plugins are fully loaded.
-
jQuery.ready( options, function(jQuery) )
version added: 1.0options A set of type/name(s) pairs that define requirements for the ready call.
function(jQuery) A handler to execute after all required dependencies are ready. Receives jQuery as argument.
The jQuery.tmpl
plugin extends the dependencies controller. So it is possible to load templates automatical with Ajax.
jQuery SDK file structure:
All templates are HTML files located in the script directory and dots in dictionary names represent subdirectories.
- project.example is script/project/example.tmpl.html
- project.advanced is script/project/advanced.tmpl.html