/***

http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii

Javascript and AJAX with Yii  

translated by php工程师

http://blog.csdn.net/phpgcs
 
1. Official JS wrappers
	1.1 Form validation
	1.2 CGridView
	1.3 CJui* classes
	1.4 Partial update with AJAX and CHtml
	1.5 Extensions that wrap JS into PHP classes
2. Writing custom JS code
	2.1 Requiring some JS libraries (jQuery and such)
	2.2 Inline JS (embedded in the HTML page)
	2.3 JS in an external file
	2.5 Inline code or external file?
3. Final words

****/

这篇文档要给出一个彻底全面的教程，关于如何 在Yii 中使用 JS。并不是要讲如何用JS编程， 而是如何用 Yii 的方式。。。

第一部分介绍几个例子关于Yii中隐藏JS 的。
第二部分介绍如何写自定义的JS。

1， 官方JS wrappers

即使开发者没有明确要求使用JS ， Yii 也经常会这么干。
Yii选择 JQuery 作为JS 库， 随着不同Yii版本的发行， 相应会发行 比较新的JQuery 库。
不建议 大伙自行加载 其它的 JQuery 库， 很有可能会导致冲突。 



1.1 表单验证 Form validation

这种情况下， JS 几乎完全是隐藏的。（尽管从Yii 1.1.11 版本之后 JS 默认是禁用的）

有2种 验证使用了JS： 

client-side validation,
AJAX validation.

1.2 CGridView 

默认的， 脚手架 gii 创建 包涵了 CGridView 的 admin 页面 以及 包含 了 CListView 的 Index 页面。
奇怪的是， CGridView 和 CListView 默认使用 Ajax。 
如果你需要定制， 在API 中有几个参数。 

默认地使用 AJAX 有 pros 和 cons 。跟默认行为 最主要的争议是 用户 actions 不会在 浏览器浏览历史中出现： 如， 用户无法 返回到之前的 search filter。
如果这个弊病 让你 想要在CGridView 中禁用 AJAX 的 话， 你可以在 初始化 CGridView widget 时 用'ajaxUpdate' => false.


1.3 CJui* classes 

在Yii 中使用 JS 最简单的办法就是 使用 Yii classes。
Jui 插件已经被包含在 PHP 类中了。你可以参照 这些类的列表。每一个文档页面都 是从一个例子开始的。

CJuiWidget
zii.widgets.jui	

CJuiAccordion		CJuiAccordion displays an accordion widget.
CJuiAutoComplete	CJuiAutoComplete displays an autocomplete field.
CJuiButton			CJuiButton displays a button widget.
CJuiDatePicker		CJuiDatePicker displays a datepicker.
CJuiDialog			CJuiDialog displays a dialog widget.
CJuiDraggable		CJuiDraggable displays a draggable widget.
CJuiDroppable		CJuiDroppable displays a droppable widget.
CJuiInputWidget		CJuiInputWidget is the base class for JUI widgets that can collect user input.
CJuiProgressBar		CJuiProgressBar displays a progress bar widget.
CJuiResizable		CJuiResizable displays a resizable widget.
CJuiSelectable		CJuiSelectable displays an accordion widget.
CJuiSlider			CJuiSlider displays a slider.
CJuiSliderInput		CJuiSliderInput displays a slider. It can be used in forms and post its value.
CJuiSortable		CJuiSortable makes selected elements sortable by dragging with the mouse.
CJuiTabs			CJuiTabs displays a tabs widget.


在 Yii 的 web widgets 中 也有 几个 JS 类， 特别是 CTreeView。

1.3.1 向一个 PHP class 传递 JS 代码。 (以 CJuiAutoComplete 为例 )

在很多时候， 使用CJui 类 的基本例子 是不够的。我们经常还需要 自定义 JS 动作。

拿 CJuiAutoComplete 来说， 我们需要 定制一个实例有以下2个特性：

A， 自动完成的备选项 都是通过 AJAX 异步得到的,
B， 被选中 的项目的 id 会被添加到 form 中。

AJAX source 和 Yii html form 的动态更新

CJuiAutoComplete 的配置 是一个 关联数组。它的 “source” 主键 必须跟 AJAX 关联， 意味着 它的 value 必须是 一个 JS function
我们不可以简单的这样写 “function()..” 因为这会被解释执行为 一个 string value ！
正确的语法是： "js:fucntion(request, response){...} "
这个 “js：“前缀 告诉 yii 后面的 都是纯 JS 代码，应该跳过。

更新 form  的原则跟这个 是一样的 ： 
 from within PHP, we pass a JS function that will read the item chosen. 
在这里 ， 语法是： 'select' => "js:function(…".

1.3.2 完整的例子：The complete example

界面上只显示 项目的 names 但是 form 传递的是一个数字 ID。

echo $form->hiddenField($model, 'userId');
 
$quotedUrl = CJavascript::encode($this->createUrl(array('user/complete')));
$params = array(
    'name' => "userComplete",
    'source' => 'js:function(request, response) {
        $.ajax({
            url: "'. $quotedUrl . '",
            data: { "term": request.term, "fulltext": 1 },
            success: function(data) { response(data); }
        });
}',
    // additional javascript options for the autocomplete plugin
    // See <http://jqueryui.com/demos/autocomplete/#options>
    'options' => array(
        'minLength' => '3', // min letters typed before we try to complete
        'select' => "js:function(event, ui) {
            jQuery('#MyModel_userId').val(ui.ite