Categories

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.0

    function(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.0

    plugins   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.0

    options   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>
  • DOM

    version added: 1.0

    A boolean indication wheather to wait for the DOM ready event.

  • plugin

    version added: 1.0

    A plugin name or an array of plugin names.

  • script

    version added: 1.0

    A script name or an array of script names (defined with jQuery.provide()).

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.0

    options   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
    
        });
  • dict

    version added: 1.0

    A template name or an array of template names.

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.0

    options   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
    
        });
  • i18n

    version added: 1.0

    A region/currency name or an array of region/currency names.

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.0

    options   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
  • Load this template 'proj/example.tmpl.html' and add it to the body.

    Code:
    jQuery.ready({
            plugin: ['jQuery.tmpl'],    // required plugins
            tmpl:   ['proj.example']    // specify required templates
        }, function($){
    
            // using the template
    
            $.tmpl('proj.example').appendTo('body');
    
        });
  • tmpl

    version added: 1.0

    A template name or an array of template names.