Yii 1.1: javascript + tabular input

27 followers

Enhance tabular input managing. ΒΆ

If you tried this extension with success, maybe you thought how to do it without page submission or ajax calls.

This wiki is meant to be a prosecution of the wiki, so read the extension page and do some test before going forward this example.

The code of the controller and models is the same of the example in the wiki, we will do just some changes in the views.

First of all, a main view with the table of students:

<table id="students">
    <thead>
        <tr>
            <td>Name</td>
            <td>Surname</td>
            <td>
                <?php echo CHtml::link('add', '', array('onClick'=>'addStudent($(this))', 'class'=>'add'/* 'submit'=>'', 'params'=>array('Student[command]'=>'add', 'noValidate'=>true)/**/));?>
            </td>
        </tr>
    </thead>
    <tbody>
    <?php foreach($students->items as $id=>$model): ?> 
        <?php $this->renderPartial('form/studentRow', array('id'=>$id, 'model'=>$model, 'form'=>$form));?>
    <?php endforeach;?>
    </tbody>
</table>
 
<?php $this->renderPartial('form/studentJs', array('students'=>$students, 'form'=>$form));?>

This drows the header of the table, there is a first renderPartial in the foreach for drow the rows of the table, and a second renderPartial that add the needed javascript code.

As you can see, the button add now calls a javascript function instead submit the page, that is the only difference with the previous version.

The view form/studentRow should be like that:

<tr>    
    <td>
        <?php echo $form->textField($model,"[$id]name"); ?> 
    <td> 
        <?php echo $form->textField($model,"[$id]surname");?>
    </td>
 
    <td>
        <?php echo CHtml::link(
                'delete', 
                '', 
                array(
                    'class'=>'delete',
                    'onClick'=>'deleteStudent($(this))', /*
                    'submit'=>'', 
                    'params'=>array(
                        'Student[command]'=>'delete', 
                        'Student[id]'=>$id, 
                        'noValidate'=>true)/**/
                    ));?>
    </td>
</tr>

In this view too the button has been changed in order to call a js function instead of submit.

Let's now pass to the js file:

<script type="text/javascript">
// initializiation of counters for new elements
var lastStudent=<?php echo $students->lastNew?>;
 
// the subviews rendered with placeholders
var trStudent=new String(<?php echo CJSON::encode($this->renderPartial('form/studentRow', array('id'=>'idRep', 'model'=>new Student, 'form'=>$form), true));?>);
 
 
function addStudent(button)
{
    lastStudent++;
    button.parents('table').children('tbody').append(trStudent.replace(/idRep/g,'n'+lastStudent));
}
 
 
function deleteStudent(button)
{
    button.parents('tr').detach();
}
 
</script>

This do the trick.

At the beginning we initialize the variable lastStudent, it will count the student added with javascript in order to have all id different.

In the variable trStudent we save as string the view studentRow. We use the special place holder idRep, that js will replace with the proper id.

This method will replace in name, id and also in evenutally needed javascript functions in the view studentRow, so any javascript in the view will work correcly even in the js added views.

Total 4 comments

#16592 report it
nairgh at 2014/03/09 01:37pm
implement cjuiautocomplete on the studentRow form

Any idea how to implement cjuiautocomplete on the studentRow form ??

<?php
    $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'name'=>'test2',
    'source'=>array('ac1', 'ac2', 'ac3'),
));
    ?>
#16234 report it
Louvq029 at 2014/02/01 07:27pm
Complete scirpt for demo please

Could you please provide me with the complete script including the database since it is hard for me to follow your explanantion (where to start).

Thank you in advance.

#15809 report it
nakarin at 2013/12/19 03:16am
The client side validation

Does the client side validation work with the js added views?

#4890 report it
ibo_s at 2011/08/25 02:43pm
Activate JQuery

Don't forget to add ...

Yii::app()->clientScript->registerCoreScript('jquery');

... to your main Layout

Leave a comment

Please to leave your comment.

Write new article