Errorsummary Not Working With Ajax/different Mode/modal.

Yii 1.1 General Discussion
1

This is pretty straight forward but maybe it’s the combination of things that’s causing this not to work.

I have a model/controller Round that pulls (with renderPartial) a form for model Vote. After a key press, a modal will open with the Vote form. When entering in values any validation errors will become immediately apparent thanks to validateOnChange:




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

    'id'=>'vote-form',

    'action'=>'/vote/create',

    'enableAjaxValidation'=>true,

    'clientOptions'=>array(

        'validateOnSubmit'=>true,

        'validateOnChange'=>true,

        'validateOnType'=>true,

    ),

)); ?>

However when I submit (with the form not complete), nothing is populated into the errorSummary div that is generally the case. In fact, looking at the div in firebug shows me that the div is not being populated and it remains display:none;

When checking the net requests I can see that a post to vote/create fires off a request as expected but $this->performAjaxValidation($model) seems to accept all is fine even if no fields are populated.

Why is it that the errorSummary div is not being populated through jQuery/ajax?

Round controller that pulls in the Vote form:




$vote = new Vote;

$this->performAjaxValidation($vote);

Edit:

Error summary is included into the view with:




<?php echo $form->errorSummary($vote); ?>

Which creates the HTML:




<div id="vote-form_es_" class="errorSummary" style="display:none">

   <p>Please fix the following input errors:</p>

   <ul>

      <li>dummy</li>

   </ul>

</div>
2

OK, I’m partially answering my own question here.

The cause is from the submit button:




echo CHtml::ajaxSubmitButton('', 

    $this->createUrl('/vote/create'),

        array('type'=>'POST',

            'dataType'=>'json',

            'success'=>'js:function(data){ 

                if(data.success=="true") { callVoteSuccess(data); } 

            }'),

      array('width'=>'280','height'=>'35','id'=>'vote-submit'));

If I use a standard button it behaves as I expect. However I want it to achieve both things, an Ajax request that will populate errorSummary and then call my own Javascript function on success.

3

CONCLUSION:

I have created a new method to return JSON with the validation errors on the case the performAjaxValidation() does not return errors and yet $model()->save() fails:




private function returnJsonErrors($model)

{

    $errors = array('success'=>'false');


    foreach($model->getErrors() as $key=>$value)

    {

         $errors['errors'][$key] = $value;

    }


    $this->sendJson($errors); // my own method to return JSON to the browser

}

I then created an extra statement to catch the event of data.success==false;




echo CHtml::ajaxSubmitButton('', 

    $this->createUrl('/vote/create'),

        array('type'=>'POST',

            'dataType'=>'json',

            'success'=>'js:function(data){ 

                if(data.success=="true") { callVoteSuccess(data); } 

                if(data.success=="false") { callVoteFail(data); } 

            }'),

      array('width'=>'280','height'=>'35','id'=>'vote-submit'));

And then in the Javascript I added the function callVoteFail():




function callVoteFail(data) {

 

    var str = '';

    var key, count = 0;

    for(key in data.errors) {

       if(data.errors.hasOwnProperty(key)) {

       str += '<li>'+ data.errors[key] +'</li>';

       count++;

        }

    }


    $('#vote-form_es_ ul').html(str);


    $('.errorSummary').show();

}

Thanks for listening.