All jQuery UI components (widgets and events) and css have cleverly been written into seperate files. This makes it easy to include any component and jQuery UI css on demand. The PHP script below demonstrates how we take advantage of this to improve website performance.

First things first, the browser has to be informed that the file is a javascript file.

You can do that by replying with a custom ‘Content-Type’ HTTP header in PHP :

header('Content-Type: text/javascript');

The next code snippet is totally based on your disgression, but the idea is creating a function that handles loading jQuery UI component. Since some jQuery UI components have dependencies, you need a dependency tree which provides a list of prerequisites needed for the includee (required component).

Note: jQuery UI component dependencies are described in each component .js script file.

Here’s our dependency tree:

/**
* Start with everything NOT marked for inclusion
*/

// make sure it's sorted based on component dependence

$scripts  = array(
                  'core'          => array(
                                            "required"  => false,
                                            "depends"   => array()),
                  'widget'        => array(
                                            "required"  => false,
                                            "depends"   => array()),
                  'mouse'         => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                'core',
                                                                'widget')),
                  'position'      => array(
                                            "required"  => false,
                                            "depends"   => array()),
                  'draggable'     => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget',
                                                                  'mouse')),
                  'droppable'     => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget',
                                                                  'mouse',
                                                                  'draggable')),
                  'resizable'     => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget',
                                                                  'mouse')),
                  'selectable'    => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget',
                                                                  'mouse')),
                  'sortable'      => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget',
                                                                  'mouse')),
                  'accordion'     => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget')),
                  'autocomplete'  => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget',
                                                                  'position')),
                  'button'        => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget')),
                  'dialog'        => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget',
                                                                  'position',
                                                                  'mouse',
                                                                  'button',
                                                                  'draggable',
                                                                  'resizable')),
                  'slider'        => array(
                                            "required"  => false,
                                            "depends"   => array(
                                                                  'core',
                                                                  'widget',
                                                                  'mouse')),
                  'tabs'          => array(
                                            "required"  => false,
                                            "depends"   => array('core'widget')),
                  'datepicker'    => array(
                                            "required"  => false,
                                            "depends"   => array('core')),
                  'progressbar'    => array(
                                            "required"  => false,
                                            "depends"   => array('core','widget'))
                  );

You can loop through the dependency tree above to include necessary component script.

However, you must be aware of multiple inclusion problem. That is, different components which share the same dependencies. To avoid this problem, you need to mark processed scripts as already included and skip them in the following iterations.

We solved this problem more easily by breaking the process into two parts: building a list of files that need to be included and actually including them.

Marking scripts as ‘required’ is done using the loop below:

// include all required scripts and they're dependencies

foreach ( $_GET as $key => $value )
{
  if ( in_array_key($key, $scripts) ) {
    $scripts[$key]["required"] = true;

    // force dependencies to be included
    foreach( $scripts[$key]["depends"] as $script )
    {
      $scripts[$script]["required"] = true;
    }
  }
}

With the ‘required’ flag, the actual inclusion is done using a super simple loop:

//load all included scripts

foreach ( $scripts as $key => $value )
{
  if ( $scripts[$key]["required"] == true )
    loadScript ( $key );
}

The ‘loadScript’ function above is to make the code easier to read by encapsulating low level inclusion logic, shown below:

function loadScript ( $scriptName )
{
  $path  = JQUERY_UI_PATH."jquery.ui.".$scriptName.".min.js";

  if ( file_exists($path) )
    require_once $path;
  else
    die($path." does not exist.");

}

Keep in mind that JQUERY_UI_PATH constant has to be defined and must point at your jQuery UI directory:

define("JQUERY_UI_PATH",  <your jquery ui path>);

That’s it. You can now use the script by simply providing an ampersand separated list of component names in the GET query string. See the following example:

<script src="/js/jquery.js.php?button&dialog&datepicker" type="text/javascript"></script>

jQuery UI CSS stylesheets can be loaded on demand in a similar way. You need to provide a different dependency tree and reply with ‘Content-Type: text/css’ instead. For your convinience we provide our tree below:

$scripts  = array(
                  "core"          => array(
                                          "required"  => false,
                                          "depends"   => array(),
                                          "exists"    => true
                                          ),
                  'theme'         => array(
                                          "required"  => false,
                                          "depends"   => array(),
                                          "exists"    => true
                                          ),
                  'resizable'     => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => true),
                  'accordion'     => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => true),
                  'autocomplete'  => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => true),
                  'button'        => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => true),
                  'dialog'        => array(
                                          "required"  => false,
                                          "depends"   => array(
                                                                'core',
                                                                'theme',
                                                                'resizable',
                                                                'button'),
                                          "exists"    => true),
                  'slider'        => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => true),
                  'tabs'          => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => true),
                  'datepicker'    => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => true),
                  'progressbar'   => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => true),

                  'draggable'     => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => false),

                  'droppable'     => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => false),

                  'selectable'    => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => false),

                  'sortable'       => array(
                                          "required"  => false,
                                          "depends"   => array('core', 'theme'),
                                          "exists"    => false
                                          )

                  );

Please leave your feedback in the form provided below. Thanks.