javascript + tabular input | Wiki

javascript + tabular input Follow @yiiframework

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 3 comments

#10728

Ali Asad at 2012/11/19 02:20pm

Can someone please send me implementation code please?

Can someone please send me implementation code please? Thanks

#4890

ibo_s at 2011/08/25 02:43pm

Activate JQuery

Don't forget to add ...

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

... to your main Layout

#4505

Hermans at 2011/07/14 05:18am

thank you

thank you very helpful. but there seems to be an error:

<?php echo CHtml::link('add', '', array('onClick'=>'addPhoto($(this))', 'class'=>'add'/* 'submit'=>'', 'params'=>array('Student[command]'=>'add', 'noValidate'=>true)/**/));?>

should be:

<?php echo CHtml::link('add', '', array('onClick'=>'addStudent($(this))', 'class'=>'add'/* 'submit'=>'', 'params'=>array('Student[command]'=>'add', 'noValidate'=>true)/**/));?>

at this article:

http://www.yiiframework.com/extension/ztabularinputmanager

there is student and classRoom class (model). how the structure of its class? Could be an example

thanks

Please login to leave your comment.

javascript + tabular input Follow @yiiframework

Enhance tabular input managing. ¶

Total 3 comments

Leave a comment

Yii Supporters