ajaxsubmitButton Response Rendering a New Page

Yii 1.1 General Discussion
1

I finally have to admit defeat with this one and ask for help, I have searched for hours now and can not get this working.

Basically all I want to do is submit a form with Ajax and load a new view if the submission has been successful.

View: Connect


<?php


    echo $this->renderPartial('_createaccount', array('model'=>$model, 'userID'=>$userID));


?>

View: Create Account


<div class="form">


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

                                   'enableAjaxValidation'=>true,

                                   'focus'=>array($model,'EmailAddress'),

                                   )); ?>

    

        

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

            <div id="error"></div>

            <div class="row">

                    <?php echo CHtml::activeLabelEx($model,'Email Address'); ?>

                    <?php echo CHtml::activeTextField($model,'EmailAddress'); ?>

                    <?php echo CHtml::error($model,'EmailAddress'); ?>

            </div>


            <div class="row">

                    <?php echo CHtml::activeLabelEx($model,'Email Password'); ?>

                    <?php echo CHtml::activePasswordField($model,'EmailPassword'); ?>

                    <?php echo CHtml::error($model,'EmailPassword'); ?>

            </div>


            <div class="row_hidden">

                    <?php echo CHtml::activeLabel($model,'Type'); ?>

                    <?php echo CHtml::activeTextField($model,'Type', array('value'=>'gmail')) ?>

            </div>


            <div class="row_hidden">

                    <?php echo CHtml::activeLabel($model,'User_idUser'); ?>

                    <?php echo CHtml::activeTextField($model,'User_idUser', array('value'=>$userID)) ?>

            </div>


            <div class="row buttons">

               

                    <?php

                            echo CHtml::ajaxsubmitButton('Add Gmail Account',

                                'gmail/connect',

                                array("type"=>"POST",

                                    "update" => "#wizard_tile",

                                    "beforeSend"=> "function(){ FadeOutWizardInfo(); }",

                                    "complete"=> "function(){ FadeInWizardInfo(); }"),

                                    array('id'=>'creategmailaccount', 'live'=>false));

                        ?>

            </div>


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


</div>

Controller/Action: Connect


public function actionConnect()

	{


            $model = new Account();

            $CComp =  new CustomComponent();

            $CComp->user = Yii::app()->getModule('user')->user(); // Get User


            $this->performAjaxValidation($model);

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

            {

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


                // Save the model

                    //if($model->save())

                    //    $this->redirect('index');

                $this->renderPartial('connected');

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

            }

            $this->renderPartial('connect', array('model'=>$model, 'userID'=>$CComp->user['id']));

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

      }

The view ‘connected’ is just a simple one line to prompt the user they have successful. This ‘connected’ page actually loads as an entirely new page when I press the ajaxsubmitButton. I call ‘gmail/connect’ via an ajaxLink to load the form to begin with successfully with Ajax without the page reloading, although the ajaxsubmitButton causes the page to reload.

Can anyone help me figure out why?

Thanks,

Chris

P.S. You can assume that #wizard_tile definitely exists at this point to be updated.

2

Hi,

Have you found a solution for this problem? I’m facing the same issue. Tried everything but my ajax button is loading a complete new page. Although the correct content.

When I debug in firebug there’s no Event handler registered to that button at all. :(

3

how about changing ‘gmail/connect’, to array(‘gmail/connect’) in your ajaxsubmitButton.

4

Just want to throw this back to the top of the list and see if anyone has figured out a solution for this?

5

i am looking for this kind of error - any solution?

6

You have incorrectly positioned parameters.

Here is my working example:




echo CHtml::ajaxSubmitButton('Save changes', '', array(

	'data' => array(

		// inject your own attribute

		'action' => $form->id,

		// this is originally posted formular

		'SaveIpdfDocument' => new CJavaScriptExpression('jQuery(this).parents("form").serialize()'), 

	),

	// display nice ajax loader

	'beforeSend' => new CJavaScriptExpression('showLoaderNextTo("#ifield-save-doc-props")'),

	// process returned AJAX response

	'success' => new CJavaScriptExpression('function(response){ipdfHandleResponse(response)}'),

	), array(

		// custom button ID

		'id' => 'ifield-save-doc-props')

);

In your code, you have three errors:

  • beforeSend, complete - should be located outside of the array. Currently you are send those functions as POST data to server.

  • instead of the "complete" you may want consider using "success", which will handle response from the server. Complete occurs before response processed.

  • you need to catch response from server into your function via argument, like function(response){…}

So your code should look like:




echo CHtml::ajaxsubmitButton('Add Gmail Account', 'gmail/connect',

    array("type"=>"POST",

        array('id'=>'creategmailaccount', 'live'=>false),

        "update" => "#wizard_tile",

        "beforeSend"=> "function(){ FadeOutWizardInfo(); }",

        "success"=> "function(response){ handleResponse(response);FadeInWizardInfo(); }"

    ));

Please check documentation for more details:

http://www.yiiframework.com/doc/api/1.1/CHtml#ajax-detail