Complete Ajax Forms

Hi all,

I want to make dynamically loadable ajax forms. For example: I first load index page with some content, when i want user to log in and I load login form through ajax. The problem is when I get error, only the errors are rendered without the page content. When I do ajax validation with changed url everything is fine.

I want to build single page app.

Here is my controller:




public function actionLogin()

    {

        $model=new LoginForm;


        // if it is ajax validation request

        if(isset($_POST['ajax']) && $_POST['ajax']==='login-form')

        {

            echo CActiveForm::validate($model);

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

        }


        // collect user input data

        if(isset($_POST['LoginForm']))

        {

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

            // validate user input and redirect to the previous page if valid

            if($model->validate() && $model->login()) {

                $user = User::model()->findByAttributes(array('username' => $model->username));

                $user->date_lastvisit = date('Y-m-d H:i:s', time());

                $user->update(array('date_lastvisit'), true);

                $this->redirect(Yii::app()->user->returnUrl);

            }

        }

        // display the login form

        $this->render('login',array('model'=>$model));

    }




and my view:


<?php $this->pageTitle=Yii::app()->name . ' - Login'; ?>


<div class="form center">

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

	'id'=>'login-form',

    'enableAjaxValidation'=>true,

	'clientOptions'=>array(

		'validateOnSubmit'=>true,

        'validateOnChange'=>false,

        'validateOnType'=>false,

	),

)); ?>


    <h1>Login</h1>


    <p>Please fill out the following form with your login credentials:</p>

	<p class="note">Fields with <span class="required">*</span> are required.</p>


	<div class="row">

		<?php echo $form->labelEx($model,'username'); ?>

		<?php echo $form->textField($model,'username'); ?>

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

	</div>


	<div class="row">

		<?php echo $form->labelEx($model,'password'); ?>

		<?php echo $form->passwordField($model,'password'); ?>

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

	</div>


	<div class="row rememberMe">

		<?php echo $form->checkBox($model,'rememberMe'); ?>

		<?php echo $form->label($model,'rememberMe'); ?>

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

	</div>


	<div class="row buttons">

		<?php echo CHtml::submitButton('Login'); ?>

	</div>


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

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

[size="2"]Thanks for any help[/size]

you can hidden the login form firstly ,then according to the situation to decide whether or not display it . then do a fully ajax form submit . see this topic Form Validation With Ajaxsubmitbutton

Thanks, I’m going to try it. But rendering everything and then hiding isn’t the optimal way.