Yii_wiki_394_javascript-and-ajax-with-yii (using javascri in yii

/*** Http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii Javascript and AJAX with Yii translated by php engineer 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 (e Mbedded in the HTML page) 2.3 JS in an external file 2.5 Inline code or external file? 3. Final words ***/This document provides a thorough and comprehensive tutorial on how to use JS in Yii. It is not about how to program with JS, but about how to use Yii... The first section describes several examples about how to hide JS in Yii. The second part describes how to write custom JS. 1. Yii often does this even if developers do not explicitly require JavaScript. Yii selects JQuery as the JS library. With the release of different Yii versions, a newer JQuery library will be released accordingly. We do not recommend that you manually load other JQuery libraries, which may lead to conflicts. 1.1 Form verification in this case, JavaScript is almost completely hidden. (Although JS is disabled by default after Yii 1.1.11) two types of verification use JS: client-side validation and AJAX validation. 1.2 By default, the scaffold gii creates the admin page of The CGridView and the Index page containing the CListView. The strange thing is that CGridView and CListView use Ajax by default. If you need to customize, there are several parameters in the API. By default, AJAX has pros and cons. The main controversy with default behaviors is that actions does not appear in the browser browsing history: for example, users cannot return to the previous search filter. If you want to disable AJAX in CGridView, you can use 'ajaxupdate' => false when initializing the CGridView widget. 1.3 CJui * classes the easiest way to use JS in Yii is to use Yii classes. The Jui plug-in has been included in the PHP class. You can refer to the list of these classes. Every document page starts with an example. CJuiWidget zii. widgets. jui CJuiAccordion displays an accordion widget. CJuiAutoComplete displays an autocomplete field. CJuiButton displays a button widget. CJuiDatePicker displays a datepicker. CJuiDialog displays a dialog widget. CJuiDraggable displays a draggable widget. CJuiDroppable displays a drop Pable widget. CJuiInputWidget is the base class for JUI widgets that can collect user input. CJuiProgressBar displays a progress bar widget. CJuiResizable displays a resizable widget. CJuiSelectable displays an accordion widget. CJuiSlider displays a slider. CJuiSliderInput displays a slider. it can be used in Forms and post its value. CJuiSortable makes selected elements sortable by dragging with the mouse. CJuiTabs displays a tabs widget. There are also several JS classes in Yii web widgets, especially CTreeView. 1.3.1 pass JS Code to a PHP class. (Take CJuiAutoComplete as an example) In many cases, the basic example of CJui class is not enough. We often need to customize JS actions. Taking CJuiAutoComplete as an example, we need to customize an instance with the following two features: A. The automatically completed backup options are obtained asynchronously through AJAX, B, the id of the selected project is added to form. The configuration of dynamic update CJuiAutoComplete of AJAX source and Yii html form is an associated array. Its "source" primary key must be associated with AJAX, meaning that its value must be a JS function. We cannot simply write "function () like this ().. "Because this will be interpreted and executed as a string value! The correct syntax is: "js: fucntion (request, response) {...}". "js:" The prefix tells yii that all JS Code is pure and should be skipped. The rule for updating form is the same as this: from within PHP, we pass a JS function that will read the item chosen. here, the syntax is: 'select' => "js: function (... ". 1.3.2 complete example: only The names of The project are displayed on The complete example interface, but The form passes a digital 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 plug In // See