- Textbox → Dropdownlist
- Dropdownlist → Dropdownlist
- Textbox → Textbox
- JS code and action
- Table row as a FORM
- List Item
- Textbox → Dropdownlist
View: echo CHtml::form(); // CHtml::textField($name, $value, $htmlOptions) echo CHtml::textField('myTextField','', array( 'ajax' => array( 'type'=>'POST', //request type 'url'=>CController::createUrl('myActionName'), //action to call 'update'=>'#updatedDropDownList', // which HTML element to update ) )); // CHtml::dropDownList($name, $select, $data, $htmlOptions) echo CHtml::dropDownList('updatedDropDownList','',array(), array()); echo CHtml::endForm(); What’s also important is the word update. It says that referred dropDownList will be extended. In our case we will add some option values (rows). And here is the code of the underlying action: public function actionMyActionName() { // CHtml::tag($tagName, $htmlOptions, $content, $closeTag) echo CHtml::tag('option', array('value'=>'1'), // html params of tag CHtml::encode('hello'), // caption, string may be enough. CHtml::encode() may not be necessary. true // close tag ); }
- Dropdownlist → Dropdownlist
echo CHtml::form();** // CHtml::dropDownList($name, $selected, $values, $htmlOptions) echo CHtml::dropDownList('country','',array(1=>'has value I',2=>'has value II'), array( 'ajax' => array( 'type'=>'POST', //request type 'url'=>CController::createUrl('myActionName'), //action to call 'update'=>'#updatedDropDownList', // which HTML element to update ) )); // CHtml::dropDownList($name, $select, $data, $htmlOptions) echo CHtml::dropDownList('updatedDropDownList','',array(), array()); **echo CHtml::endForm();** Tha main difference here is that drop down boxes have to be in a FORM !! Otherwise their vales won't be accessible via POST in action !! Below is appropriate action. public function actionMyActionName() { $countryID = $_POST[‘country’]; // IMPORTANT .. this is how you access previously entered data $listOfCities = getCitiesOfState($countryID); foreach ($listOfCities as $city) { echo CHtml::tag('option', // tagname array('value'=>$cityID), // html params of tag $cityName, // value from the item selected in the first dropdown is in the POST array true // close tag ); } }
- Textbox → Textbox
echo CHtml::form(); echo CHtml::textField('myTextField','', array( 'ajax' => array( 'type'=>'POST', //request type 'url'=>CController::createUrl('myActionName'), //action to call 'replace'=>'#statusTextBox’, // which HTML element to update ) )); echo CHtml::textField(‘statusTextBox’,'',array()); echo CHtml::endForm(); In this case is important the **replace ** option. It sais that the original textField named statusTextBox will be replaced with a new one with different properties (text). public function actionMyActionName() { $status = ''; if (strlen($_POST[‘myTextField’])<5) { $status = 'too small'; } else { $status = 'size is OK'; } echo CHtml::textField('statusTextBox', $status,array()); }
- JS code and action
JS code would look like this: $.get('editUser', { userId: 1 }, function(html){ // html variable contains code of updated <tr> $.fancybox.close(); // closes Fancybox $.(this).closest('tr').replaceWith(html); // replaces current <tr> .. </tr> with new HTML code }); And action: public function actionGetHelloWorldByAjax($userId) { $myHtml = $this->renderPartial('userRow',array('id'=>$userId),true); echo $myHtml; Yii::app()->end(); // this ends Yii application in case of Ajax requests. return; } You can also generate the JS code in action and just evaluate it in browser. You will need JSON object: $.getJSON('editUser', { userId: 1 }, function(result){ // result variable contains JSON object eval(result.js) // runs JS code, see action code below }); And action: public function actionGetHelloWorldByAjax($userId) { echo JSON::encode(array( 'newRow'=> $this->renderPartial('userRow',array('id'=>$userId),true), 'js'=>'$.fancybox.close(); $.(this).closest('tr').replaceWith(result.newRow);', // this is the "js" used in javascript above. ); // array(variable=>$value) will be encoded into JSON object and than it can be used in jQUery as "set of variables". Yii::app()->end(); return; }
- Table row as a FORM
<table> <tr> <td> <input type="text" name="quantity" value="a"> </td> <td> <select name="colour"> <option value="red">RED</option> <option value="blue">BLUE</option> </select> <input type="radio" name="material" value="wood" checked="checked">wood <input type="radio" name="material" value="plastic">plastic <input type="radio" name="material" value="glass">glass </td> <td> <a href="#" class="rowSubmit">Save</a> </td> </tr> </table> But where to place the FORM that would make the function? Form can't be used, because of HTML validity. It has to be faked in jQuery cca like this: <script type="text/javascript"> $(document).ready(function(){ $(".rowSubmit").click(function() { var serialized = $(this).closest('tr').wrap('<form>').parent().serialize(); $.get('url2action', serialized, function(data){ // ... can be empty // $.fancybox({content:data}); }); }); }); </script>

One comment
Jacksonville Jaguars Jersey http://www.thefootballoutfit.com/
Leave a Comment