Serve jQuery and jQuery-UI from Google's CDN

Tutorials

jquery, jqueryui, google, CDN

This tutorial shows you how to use Goggle's CDN to serve jQuery and jQuery UI in Yii.

Edit your Config File
------------------
There are twohree additions to make in your config file: 1. Define the JUI Theme you want to use.
 
2. Add a _package_ definition for jQuery under the "clientScript" component in the "components" section 23. Add a _package_ definition for jQuery UI the "params" section
 
 
 
```phpSet "theme", "scriptURL" and "themeURL" for each JUI Widget you use the "widgetFactory" section; the URLs point to Google's CDN, the theme uses the define from step 1.
 
 
 
```php 
define('JUI-THEME','dark-hive');

return array(
// other config// other clientScript config
),
// other component config
 
  ),
 
  // other config
 
 
  'params'widgetFactory'=>array(  'jquery.ui 'widgets'=>array( 'the  'CJui<WidgetName>'=>'dark-hive', // change to the theme you want to use
 
array( // where <WidgetName> is the name of the JUI Widget (Tabs, DatePicker, etc.). Each CJuiWidget used must be declared
 
     'scriptUrl'=>'//ajax.googleapis.com/ajax/libs/jqueryui/1/',           'theme'=>JUI-THEME,
 
     'themeUrl'=>'//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/',     ),     // other params
 
  )Repeat for other CJuiWidgets
 
      ),
 
    ),
 
    // other component config
 
  ),
 
  // other config ); ``` Note that the URLs are missing the protocol. This allows users browsers to cache both http and https requests from a single download. For jQuery that is all that is needed.
 
 
For jQuery UI we need to tell JUI widgets to use the CDN; we do this when the configuring the widget in the view:
 
 
 
```php 
$jui = Yii::app()->params['jquery.ui'];
 
$this->widget('zii.widgets.jui.CJui<WidgetName>',array(
 
  'scriptUrl'=>$jui['scriptUrl'],
 
  'theme'=>$jui['theme'],
 
  'themeUrl'=>$jui['themeUrl'],
 
  // other widget config
 
));
 
```
 
where <WidgetName> is the name of the JUI Widget (Tabs, DatePicker, etc.)
 
 
That's it - your application will now use Google's CDN to serve jQuery and jQuery UI; to the benefit of you and your visitors. It also means that a single change in the config file will change the theme of all your JUI widgets.
 
 
(Thanks to redguy for pointing out the widget factory configuration)