[SOLVED] CActiveForm AjaxValidation doesn't work?!

Yii 1.1 General Discussion
1

Hey guys,

my problem is, that the ajax validation on a form doesn’t work at all and I can’t figure out, where the bug is hiding.

Short: the ajax POST isn’t sent to the server.

My view, where the form is placed in looks like this:


<div class="form">


    <?php

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

                'id' => 'comment-form',

                'enableAjaxValidation' => true,

            ));

    ?>


    <div id="comment_dialog_box<?php echo $entry->entry_id; ?>"></div>

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


    <div class="row" class="input_field">

        <span style="font-size:20px; color:#000; float:left; margin:10px 5px 0 0;">Wie sehen Sie das? </span>

        <span style="float:right;">

            <?php echo $form->textArea(Translation::model(), 'content', array('rows' => 1, 'cols' => 50, 'class' => 'input_focus', 'id' => 'comment_textArea' . $entry->entry_id, 'entry_id' => $entry->entry_id)); ?>

            <?php echo $form->error(Translation::model(), 'content'); ?>

        </span>

        <div style="clear:left; clear:right;"></div>

    </div>

    <div class="row buttons input_buttons" id="input_button<?php echo $entry->entry_id; ?>" style="float:right;">

        <?php echo CHtml::activeHiddenField($entry, 'entry_id'); ?>

        <?php

            echo CHtml::ajaxLink('Abbrechen', '', array(), array('id' => 'cancelButton' . $entry->entry_id)) . '   ';

            echo CHtml::ajaxSubmitButton('Posten', $this->createUrl('comment/create'), array('update' => '#comment_dialog_box' . $entry->entry_id));

        ?>

        </div>

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


<?php $this->endWidget(); ?>


</div><!-- form -->

so the "enableAjaxValidation" is set to true.

The controller functions etc. shouldn’t matter, because like I said, the POST isn’t even sent.

My thought is, that it has something to do with the jquery stuff, but even here I played around and couldn’t find a solution.

My "jQuery-situation" is as follows:

in my config/main.php I deactivated all the jQuery files to load them from google:




...

'components' => array(

        'clientScript' => array(

            'scriptMap' => array(

                'jquery.js' => false,

                'jquery.min.js' => false,

                'jquery.ajaxqueue.js' => false,

                'jquery.metadata.js' => false,

            ),

        ),

...

in my themes/.../views/layouts/main.php the situation is as follows:


...

<?php echo CGoogleApi::init(); ?>


        <?php

        echo CHtml::script(

                CGoogleApi::load('jquery.min', '1.6')

        );


        ?>


        <script>window.jQuery || document.write('<script src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery-1.6.1.min.js">\x3C/script>')</script>

...

so I’m loading the jQuery.min from google and as fallback option I’m loading my own jQuery.min. (If anyone got a better or smoother solution here … I’m happy for comments here as well ;-))

If I look at the network stuff in firebug the following files are loaded:

1744

Unbenannt.png

Maybe I took a wrong turn with searching the problem at the jQuery stuff, I’m wide open for other ideas … :stuck_out_tongue:

I just can tell again: when I set the focus in the edit field of the form (it just has one field) and than remove the focus … no POST is sent.

Thanks a lot in advance,

Mayjestic

2

whether it has been tested like this:




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

	'id'=>'comment-form',

	'enableClientValidation'=>true,

	'clientOptions'=>array(

		'validateOnSubmit'=>true,

	),

)); ?>
3

What should exactly happen with your options?

With these attributes for the CActiveForm he send’s the post to the server and runs in the actionCreate function … same like without any validation …

… I’d like to use the ajax validation from Yii including getting the edit fields red/green and stuff like that.

Another question I have is … at the moment I return this in my controller if the $translation model isnt valid:




echo CActiveForm::validate($translation);

Yii::app()->end();

the only problem I have is, that it’s not returned in the postition in the view it’s supposed to be:


<?php echo $form->error(Translation::model(), 'content'); ?>

instead the message above is returned here:


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

How can I put it in the $form->error? instead of the errorSummary?

And the third question is, that the $model I’m validating here stands in a MANY:MANY relationship to the model the actual form is from … so the return value of this echo in the controller:


echo CActiveForm::validate($translation);

returns something like this:

{"Translation_content":["Content darf nicht leer sein."]}

… not really a userfriendly message :stuck_out_tongue: … any idea how to extract the inner part which says “Content darf nicht leer sein.” (I’m validating the model “translation” and the field “content”)

Sorry for all the noob questions about the validation … but it’s actually the first time I’m working with the validation of Yii so please be forgiving. :wink:

4

I now generated an independent model / controller and / views from another table via gii … and even here the validation doesn’t work … so there must be something with the javascript stuff …

damned I want to get this s*** solved :-/

5

In the screen dump I noticed that jquery.min.js is loaded after the yii form jquery extension.

/Tommy

6

Thanks for your answer … ill check this out! (feels like something like this will be the solution) :wink: … just didn’t know in which order all the js files need to be loaded …

7

Well I tried this, but still no success :frowning: …

Check the new screenshot: 1767

Unbenannt.png

(the main.js and blog.js … aren’t the problem as well - removed them as well)

Edit: ouhh yeah, I made it work for the create user (just generated model) … ill tell what the problem was if I figured it out myself completely :stuck_out_tongue:

Ok, the main views still don’t work, but I’ve got a new idea now what the problem could be:

On the edit field I want the AjaxValidation working, I also have some js functions set to it. Like thisone:


$(".input_focus").focus(function(){

        var entry_id = $(this).attr('entry_id');

        $(this).addClass('input-focused')

        $("#input_button"+entry_id).show();

    });

It’s actually looking pretty similar to the youtube comment function. If you click in the comment box, it adds a class to the edit field and shows a div. On the other hand, if you remove the focus of the edit field (where the ajax post should be sent) this function is triggered:


$(".input_focus").blur(function(){

        var entry_id = $(this).attr('entry_id');

        $(this).removeClass('input-focused');

        // activate cancel button to delete content

        $('#cancelButton'+entry_id).click(function(){

            $('#comment_textArea'+entry_id).val("");

            $("#input_button"+entry_id).hide();

        });

    });

so it removes the class from the edit field and activates a cancel button.

Maybe this could be the problem? If yes, what’s a way to work around this?

8

Ahh and by the way … it seems like the order of jquery.min.js and yii form jquery extension doesn’t make a difference - validation worked with both ways (for the generated code)

9

For everyone who’s interested in the solution:

The problem were the following things:

1.)


Translation::model()

I generated a new model for the field, which was crap … solved this by generating the model in the controller and passing it to the view.

2.)


<?php echo $form->textArea(Translation::model(), 'content', array('rows' => 1, 'cols' => 50, 'class' => 'input_focus', 'id' => 'comment_textArea' . $entry->entry_id, 'entry_id' => $entry->entry_id)); ?>

I gave the text area an id for another purpose … this has overridden the actual id generated by yii (id=<model>_<column>)

These were the problems, why the validation didn’t take place / the class “validate” has never been set to the “row” div.

I hope this can help someone else … for any further questions / a more detailled solution just ask.