Ajax submit problem inside a partially rendered view

Hi there,

In my scenario the end user can maintain several "Service Users". They are all displayed on the same page, and each "Service User" has its own CActiveForm in the view file _service_user.

The code of _service_user is :




    $form = $this->beginWidget('CActiveForm', array(

                'id' => 'serviceUser-form' . $index,

                'enableAjaxValidation' => true,

                'clientOptions' => array('validateOnSubmit' => true),

            ));


    echo CHtml::ajaxSubmitButton('Save', CHtml::normalizeUrl(array('maintainClient/saveUser/index/' . $index)), array(

        'success' => 'function(data) {

		

                    var index = ' . $index . ';


                    if (data.indexOf("{")==0) {


                          var json = $.parseJSON(data);

                          

                          $.each(json, function(key, value) {

                                $("#" + key).addClass("clsError");

                                $("#" + key + "_em_").show().html(value.toString());

                                $("label[for=" + key + "]").addClass("clsError");

                          });

                        

                    }

                    else {

                                       

                          $("#service_user" + index).replaceWith(data);

                          displayMode(index);

                          enableAllButtons(userIndexes);

                    }

                    

                    }',

        'error' => 'function(data) {

                   alert("error" + data);

    }',

            ), array('class' => 'rc-button service_users-save' . $index, 'id' => 'save' . $index)

    );



When the page is loaded the fist time I am using renderPartial this way in my service_users view:




    <?php for ($i = 0; $i < count($serviceUsers); $i++): ?>


        <?php

        $serviceUser = $serviceUsers[$i];


        $this->renderPartial('_service_user', array(

            'serviceUser' => $serviceUser,

            'index' => $i,

        ));

        ?>



The ajaxSubmitButton works perfectly in this scenario.

When the user adds a new "Service User" the following code is executed in the Controller:




    public function actionAddUser() {


        $clientId = Yii::app()->user->id;

      

        $serviceUser = new ServiceUser();


        $userIndexes = Yii::app()->session['UserIndexes'];

        $maxValue = max($userIndexes);

        $index = $maxValue + 1;

        $userIndexes[] = $index;

        Yii::app()->session['UserIndexes'] = $userIndexes;


        $output = $this->renderPartial('_service_user', array(

                    'serviceUser' => $serviceUser,

                    'index' => $index,

                        ), true);


        echo $output;

    }



Now my problem is that the "Save" button in this new Service User does not work anymore.

Two strange things:

  • I get a javascript error ReferenceError: $ is not defined

  • The previous action is triggered (here addUser, and not the one specified in the submit button: saveUser )

So I am wondering if it’s possible at all…

For the info the following works (I create a CHtml::button with id saveTest), the problem is I need to populate the form data properly




       $("#saveTest").click(function(){

            

            $.ajax({

                success: function(html){

                    

                     var index = ' . $index . ';


                    if (html.indexOf("{")==0) {


                          var json = $.parseJSON(html);

                          

                          $.each(json, function(key, value) {

                                $("#" + key).addClass("clsError");

                                $("#" + key + "_em_").show().html(value.toString());

                                $("label[for=" + key + "]").addClass("clsError");

                          });

                        

                    }

                    else {

                        

                          //alert("validation successful");

                    

                          $("#service_user" + index).replaceWith(html);

                          displayMode(index);

                          enableAllButtons(userIndexes);

                    }

                    

                    

                },

                type: 'post',

                url: '<?php echo CHtml::normalizeUrl(array('maintainClient/saveUser/index/' . $index))?>',

                data: {

                    form: $("form").serialize()

                },

                cache: false,

                dataType: 'html'

            });

                

        });  



Any help would be greatly appreciated.

Cheers

Renaud