Difference between #96 and #97 of
Yii for beginners

Revision #97 has been created by rackycz on Mar 8, 2013, 9:02:57 PM with the memo:

5.7 - Table row as form
« previous (#96) next (#98) »

Changes

Title unchanged

Yii for beginners

Category unchanged

Tutorials

Yii version unchanged

Tags unchanged

yii, tutorial, fresher, newbie, MVC

Content changed

[...]
}
```

... Let me know if everyting works or suggest enhancements, I will love to learn something new :)


 
                                    
 
## 5.7. Table row as a FORM
 
I guess that everybody has experienced a situation when it would be great to display list of records to user as a table where each row would be a an active form that would allow user to directly change the record via ajax. 
 
 
Imagine that you have an eshop with pencils and you want user to confirm all items that are in his cart. You want him to specify color, quantity and material of all pencils he wants to buy. 
 
 
Basically there are 2 possibilities.
 
 
1. On the end of each row you can place an edit-icon. If user clicks it a new screen with usual form will be shown. Each row will be edited separetly.
 
2. The same but via Fancybox and Ajax. It's faster for user and more user-friendly.
 
 
But you can also place on each row a html select (with list of colours), radio-button group (with list of materials) and one textbox for quantity, plus "save" button that will instantly save the record via Ajax.
 
 
In this case your html table will look cca like this:
 
 
 
```php 
<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:
 
 
 
```php 
<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>
 
```
 
 
First we place the whole TR into a fictive FORM and than it can be serialized.
 
 
And a tip/trick for you. If you write $("my html code") or $(myStringVariableWithHtml) it will be turned into "jQuery object" and you can append next jQuery functions. For example .serialize(), .html() etc. **I'm sorry, I had to split this article into more parts.** Next is [**Yii for beginners 2**](http://www.yiiframework.com/wiki/462/yii-for-beginners-2/ "Yii for beginners 2")
68 0
75 followers
Viewed: 442 902 times
Version: 1.1
Category: Tutorials
Tags: fresher, mvc, newbie, tutorial, Yii
Written by: rackycz
Last updated by: rackycz
Created on: Oct 9, 2011
Last updated: 5 years ago
Update Article
Revert to #96 | Revert to #97

Revisions

View all history