Add Row Dynamically In Tabular Input On Ajax

Hello,

I have a link:


<?php echo CHtml::link('Add Child', '#', array('id' => 'loadChildByAjax')); ?>

Some code to renderPartial child _form:


<div id="children">

        <?php

        $index = 0;

        foreach ($model->goodsservices as $id => $child):

            $this->renderPartial('goods/_form', array(

                'model' => $child,

                'index' => $id,

                'display' => 'block'

            ));

            $index++;

        endforeach;

        ?>

    </div>

And script with AJAX:


<?php

Yii::app()->clientScript->registerScript('loadchild', '

var _index = ' . $index . ';

$("#loadChildByAjax").click(function(e){

    e.preventDefault();

    var _url = "' . Yii::app()->controller->createUrl("loadChildByAjax", array("load_for" => $this->action->id)) . '&index="+_index;

    $.ajax({

        url: _url,

        success:function(response){

            $("#children").append(response);

            $("#children .crow").last().animate({

                opacity : 1, 

                left: "+50", 

                height: "toggle"

            });

        }

    });

    _index++;

});

', CClientScript::POS_END);

?>

In my controlle:


public function actionLoadChildByAjax($index)

    {

        $model = new AppGoodsServices;

        $this->renderPartial('goods/_form', array(

            'model' => $model,

            'index' => $index,

        ), false, true);

    }

And at last me child _form:


<div style="margin-bottom: 20px; display: <?php echo!empty($display) ? $display : 'none'; ?>; width:100%; clear:left;" class="crow">

    <div class="row" style="float: left;">

        <?php echo CHtml::activeLabelEx($model, '['.$index.']goods_and_services'); ?>

        <?php echo CHtml::activeTextField($model, '['.$index.']goods_and_services', array('size' => 30, 'maxlength' => 150)); ?>

        <?php echo CHtml::error($model, '['.$index .']goods_and_services'); ?>

    </div>

 

    <div class="row" style="float: left;">

        <?php echo CHtml::activeLabelEx($model, '['.$index .']percentage'); ?>

        <?php echo CHtml::activeTextField($model, '['.$index.']percentage', array('size' => 5)); ?>

        <?php echo CHtml::error($model, '['.$index.']percentage'); ?>

    </div>

    <div style="clear: both;"></div>

    <div class="row">

        <?php echo CHtml::link('Delete', '#', array('onclick' => 'deleteChild(this, '.$index.'); return false;'));

        ?>

    </div>

</div>

<div style="clear: both;"></div>

<?php

Yii::app()->clientScript->registerScript('deleteChild', "

function deleteChild(elm, index)

{

    element=$(elm).parent().parent();

    /* animate div */

    $(element).animate(

    {

        opacity: 0.25, 

        left: '+=50', 

        height: 'toggle'

    }, 500,

    function() {

        /* remove div */

        $(element).remove();

    });

}", CClientScript::POS_END);

?>

I need when my button being clicked, the child _form should be dynamically rendered, but id doesn’t work. What do I miss here?

Check your script console to see if the ajax link is actually firing or not, and if you’re getting the appropriate content back.

I have not used the ajax stuff much, but it looks like you are not attaching the onClick event to the link. You might look into the CHtml::ajaxLink() and/or look into the code that is generated by gii for the delete link in the view.php of the crud. it has a confirm function call and this may give you a direction to look in.