Ajaxsubmit And Ajaxvalide In One Form?

Yii 1.1 General Discussion
1

Is it possible?

view:


<div class="form">

    <?php $model = new Newslettersubscribe; ?>

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

            'id'=>'newslettersubscribe-form',

            'action'=>array('hirlevel/feliratkozas'),

            'enableClientValidation'=>true,

            'enableAjaxValidation'=>true,

            'clientOptions'=>array(

                    'validateOnSubmit'=>true,

            ),

    )); ?>

                    <?php echo $form->textField($model,'email', array('title'=>'Add meg email címed, hogy értesülj az oldallal kapcsolatos hírekről')); ?>

                    <?php echo CHtml::ajaxSubmitButton(

                            'Elküld', 

                            array('hirlevel/feliratkozas'), 

                            array(

                                'success'=>'function(data) {

                                    $("#newslettersubscribe-form").children("input[type=text]").val("");

                                    $("#resultAjax").html(data);

                                    fadenotification();

                                }'

                            ), 

                            array('class'=>'superbutton')

                    ); ?>

                    <div class="row alignleft">

                        <?php echo $form->error($model,'email'); ?>

                        <div id="resultAjax"></div>

                    </div>


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

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

controller:


    public function actionFeliratkozas() {

        $model = new Newslettersubscribe;

        

        $this->performAjaxValidation($model);

        

        if(isset($_POST['Newslettersubscribe'])) {

            $model->attributes = $_POST['Newslettersubscribe'];

            if($model->validate()) {

                if($model->save()) {

                    if(!Yii::app()->request->isAjaxRequest) {

                        Yii::app()->user->setFlash('success', 'Sikeresen feliratkoztál a hirlevélre.');

                        $this->refresh();

                    } else {

                        echo $this->Createflash('success', 'Sikeresen feliratkoztál a hirlevélre.');

                    }

                }

            }

        }

        if(!Yii::app()->request->isAjaxRequest) {

            $this->render('subscribe', array(

                'model'=>$model

            ));

        }

        

    }

If i use, the ajaxsubmit always send the data-s to controller. How to use the 2 jquery code?

2

Hi Speeedfire,

I recently tried to do almost the same thing.

In fact, I didn’t use ajaxSubmitButto, I used normal submitButton. What I tried was attaching an event handler on the submit event of the form, and do an ajax submitting instead of the normal one.

Something like the following:




<?php 

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

	'id'=>'my-form',

	'action'=>array('something'),

	'method'=>'post',

	'enableAjaxValidation' => true,

	'clientOptions' => array(

		'validateOnSubmit' => true,

	),

));

?>


...


$('#my-form').on('submit', function(event){

	var href = $(this).attr('action');

	$.ajax({

		'type' : 'POST',

		'url' : href,

		'dataType' : 'json',

		'data' : $(this).serialize(),

		'success' : function(data){

			...

		},

	});

	event.preventDefault();

});

But it didn’t work as expected. This event handler function was called every time the ajax validation was executed. Ajax validation uses the ajax submission of the form.

And, so, what I did was to use ‘afterValidate’ of the CActiveForm::clientOptions.




<?php

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

	'id'=>'my-form',

	'action'=>array('something'),

	'method'=>'post',

	'enableAjaxValidation' => true,

	'clientOptions' => array(

		'validateOnSubmit' => true,

		'afterValidate' => 'js:myFormSubmit',

	),

)); 

?>


...


function js:myFormSubmit(form, data, hasError){

	if (!hasError) {

		var href = form.attr('action');

		$.ajax({

			'type' : 'POST',

			'url' : href,

			'dataType' : 'json',

			'data' : form.serialize(),

			'success' : function(data){

				...

			},

		});

	}

	return false;

}

CActiveForm.clientOptions

http://www.yiiframework.com/doc/api/1.1/CActiveForm#clientOptions-detail

3

Yes, i tried to use your first example. But is it send the request 2x. The ajax validation, and myFormSubmit.


    $('#newslettersubscribe-form').on('submit',function(e){

        var $this = $(this);

        setTimeout(function(){

            var $error = $this.find('.errorMessage');

            var urlaction = $this.attr('action');

            if($error.is(':visible') == false) {

                $.ajax({

                    url: baseurl+urlaction,

                    type: "POST",

                    data : $this.serialize(),

                    success: function(data) {

                        $('#resultAjax').html(data);

                        $this.children(':input[type=text]').val('');

                        fadenotification();

                    }

                });

            }

        },500);

       e.preventDefault(); 

    });
4

Hmm. The second solution is dont work for me. :rolleyes:


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

            'id'=>'newslettersubscribe-form',

            'action'=>array('hirlevel/feliratkozas'),

            'enableClientValidation'=>true,

            'enableAjaxValidation'=>true,

            'clientOptions'=>array(

                    'validateOnSubmit'=>true,

                    'afterValidate'=>'newsletterform(form, data, hasError)'

            ),

    )); ?>

In the js file:


function newsletterform(form, data, hasError) {

    if (!hasError) {

            var href = form.attr('action');

            $.ajax({

                    'type' : 'POST',

                    'url' : baseurl+href,

                    'data' : form.serialize(),

                    'success' : function(data){

                        $('#resultAjax').html(data);

                        form.children(':input[type=text]').val('');

                        fadenotification();

                    }

            });

    }

    e.preventDefault(); 

}



Uncaught TypeError: Property 'afterValidate' of object #<Object> is not a function

EDIT:

Not work. :(


            'clientOptions'=>array(

                    'validateOnSubmit'=>true,

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

                        if(!hasError) {

                            newsletterform(form, data);

                        } 

                        return false;

                    }'

            ),

//js file


function newsletterform(form, data) {

    var href = form.attr('action');

    $.ajax({

            'type' : 'POST',

            'url' : baseurl+href,

            'data' : form.serialize(),

            'success' : function(data){

                $('#resultAjax').html(data);

                form.children(':input[type=text]').val('');

                fadenotification();

            }

    });

}
5

What about this?




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

            'id'=>'newslettersubscribe-form',

            'action'=>array('hirlevel/feliratkozas'),

            'enableClientValidation'=>true,

            'enableAjaxValidation'=>true,

            'clientOptions'=>array(

                    'validateOnSubmit'=>true,

                    // 'afterValidate'=>'newsletterform(form, data, hasError)'

                    'afterValidate'=>'js:newsletterform'

            ),

    )); ?>


...

function newsletterform(form, data, hasError) {

    if (!hasError) {

            var href = form.attr('action');

            $.ajax({

                    'type' : 'POST',

                    // 'url' : baseurl+href,

                    'url' : href,

                    'data' : form.serialize(),

                    'success' : function(data){

                        $('#resultAjax').html(data);

                        form.children(':input[type=text]').val('');

                        fadenotification();

                    }

            });

    }

//    e.preventDefault(); 

}
6

Work it my solution. I excused… :)