Clientside Validation Rules Not Loading When Ajax Call Dialog

[b]SOLVED

[/b]

Hi,

I tried to search a lot using this forum and google but I haven’t found a solution to my problem.

I’m trying to load dialogs such as register and login from external php file and not storing their code on main page layout, so it will be loaded each time a user call a page but only on request.

The problem is that when I click on a button it opens correctly the dialog so I can see my form but the validation doesn’t work.

This is what I did:

[b]1. create a file called modals.php inside the views/layouts folder of my theme

[/b]


<?php $this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'registerModal')); ?>

<div class="modal-body ext-height">

    <a class="close close-sign-up" data-dismiss="modal">&times;</a>

    <?php /** @var BootActiveForm $form */

    $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(

        'id'=>'registration-form',

        'enableAjaxValidation'=>true,

        'htmlOptions' => array('name'=>'Registration'),

        'action'=>$this->createUrl('registration/Create'),

        'enableClientValidation'=>true,

        'clientOptions'=>array(

        'validateOnSubmit'=>true,

        'afterValidate'=>'js:function(form,data,hasError){

                        if(!hasError){

                               $.ajax({

                                "type":"POST",

                                "url":"'.CHtml::normalizeUrl(array("registration/Create")).'",

                                "data":form.serialize(),

                                "dataType":"json",

                                "beforeSend":function() {

                                    $(".modal-body").css("opacity","0.1");

                                    $(".preloader").show();

                                },

                                "success":function(data){

                                    if(data.status == "success") {

                                    setTimeout(function() {

                                        $("div.preloader").hide();

                                        $("div.success").show();

                                     }, 3000);

                                     setTimeout(function() {

                                        $("div.success").hide();

                                        $("#registration-form")[0].reset();

                                        $(".modal-body").css("opacity","1");

                                        $("#registerModal").modal("hide");

                                        window.location.reload(true);

                                     }, 6000);

                                    }

                                    else if (data.status == "ok")

                                    {

                                    alert(data.city);

                                    }

                                    else {

                                    setTimeout(function() {

                                        $("div.preloader").hide();

                                        $(".modal-body").css("opacity","1");

                                        $("#formResult").html("<p style=\'color:red;\'>Database Registration Error, please Contact Us to solve the problem</p>");

                                     }, 4000);

                                    }},

                                });

                        }}'

            ),

        

    )); 

    /*

     *  

     */

    echo '<h4>Sign Up using your Facebook Account</h4>';

    $fbsignup=CHtml::image(Yii::app()->theme->baseUrl.'/images/ext_logo/fb-signup.png', 'Sign Up with Facebook',array('id'=> 'fb-signup'));

    echo CHtml::link($fbsignup, '/eo');

    echo '<br /><p>Or fill out the form below...</p>';

    echo '<div class="errorMessage" id="formResult"></div>';

    echo $form->textFieldRow($regrmodel, 'first_name', array('class'=>'span4')); 

    echo $form->textFieldRow($regrmodel, 'last_name', array('class'=>'span4')); 

    echo $form->textFieldRow($regrmodel, 'username', array('class'=>'span3'));

    echo $form->passwordFieldRow($regrmodel, 'password', array('class'=>'span3'));

    echo $form->passwordFieldRow($regrmodel, 'password_repeat', array('class'=>'span3')); 

    echo $form->textFieldRow($regrmodel, 'email', array('class'=>'span4'));

    echo $form->labelEx($regrmodel,'city');

    $this->widget('zii.widgets.jui.CJuiAutoComplete', array(

           'name'=>'city',

           'source'=>CController::createUrl('/registration/cities'),

           'options'=>array(

           'showAnim'=>'fold',         

           'minLength'=>'3',

           'select'=>'js:function( event, ui ) {

               var state1 = "";

               if(ui.item.state) {

                var state1 = ui.item.state+", ";

               }

               $("#city").val(ui.item.name+", "+state1+ui.item.country);

               $("#Registration_city_id").val(ui.item.id);

               return false;

                 }',

           ),

           'htmlOptions'=>array(

           //'onfocus' => '',

           'class' => 'span3',

           ),

           ));

    echo $form->hiddenField($regrmodel,'city_id');

    echo $form->error($regrmodel,'city_id',

        array('clientValidation'=>'js:

        if(jQuery.trim(value)!= \'\' && $("#city").val().length <= 0)

        {

                $("#Registration_city_id").val("");

        }


        if(jQuery.trim(value)==\'\' && $("#city").val().length > 0)

        {

                        messages.push("You must select one of the city proposed!");

        }

'),true,true); 

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

        $("#city").data("autocomplete")._renderItem = function( ul, item ) {

        if (item.state === "") {

            var state = "";

        }

        else {

            var state = item.state+", ";

        }

        return $( "<li></li>" )

        .data( "item.autocomplete", item )

        .append( "<a href=\'#\' id=\'"+item.id+"\'>"+item.name+", "+state+item.country+"</a>")

        .appendTo(ul);

    };

    $(".close-sign-up").click(function() {

    $("#registration-form")[0].reset();

    });');

    echo '</div>

        <div class="preloader" style="display:none;position:absolute;width:42px;height:42px;top:50%;left:50%;margin-top:-21px;margin-left:-21px;z-index:999;opacity:1">'.CHtml::image(Yii::app()->theme->baseUrl.'/images/preload/sign-up-red.gif', 'Loading').'</div>

<div class="success" style="display:none;position:absolute;width:64px;height:64px;top:50%;left:50%;margin-top:-32px;margin-left:-32px;z-index:999;opacity:1">'.CHtml::image(Yii::app()->theme->baseUrl.'/images/preload/sign-up-success.png', 'Success').'</div><div class="modal-footer">';

    echo CHtml::submitButton('Submit',array('id' => 'send-link-'.uniqid(),'class'=>'btn btn-primary'));

    $this->widget('bootstrap.widgets.TbButton', array(

        'label'=>'Close',

        'url'=>'#',

        'htmlOptions'=>array('class'=> 'close-sign-up', 'data-dismiss'=>'modal'),

    ));

     $this->endWidget();?>

</div>

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

2. Then in the RenderModalController.php file …


class RenderModalController extends Controller

{

    public function actionRegistration() {

          Yii::app()->clientScript->scriptMap['jquery.js'] = false;


            $this->renderPartial('//layouts/modals',array('regrmodel' => new Registration));

        }

}

3. So in the main.php file inside views/layout


<?php $this->widget('bootstrap.widgets.TbButton', array(

                'label'=>'Register',

                'type'=>'primary',

                'htmlOptions'=>array(

                'id'=>'open_modal',

                ),

            )); ?>

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

    $('#open_modal').click(function(e) {

    e.preventDefault();

    var tag = $('#dialogplace');

  $.ajax({

    'url': '/eo/renderModal/registration',

    'success': function(data) {

      tag.html(data);

      $('#registerModal').modal('show');

    }

  });

        });");



and obviously I also created the div with ID dialogplace inside main.php

It worked before when I did’t use the renderpartial so the code inside modals.php was included in the main.php file, but now it doesn’t…

thanks!

Solved thanks to this Fantastic Wiki

Wiki

hi lucop1, i have same problem with you, can you describe what’s the solution, coz i read the Wiki, the key of this is


 $cs = Yii::app()->clientScript;

        $cs->reset();

        $cs->scriptMap = array(

            'jquery.js' => false, // prevent produce jquery.js in additional javascript data

            'jquery.min.js' => false,

        );

 

     $this->renderPartial('/liquor/add_new_liquor', array('model' => $model), false, true);

 }

i already tried but failed, the form validation didn’t work.

help me pliz…