Yii Framework Forum: cactiveform with ajaxSubmitButton - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

cactiveform with ajaxSubmitButton and validateOnSubmit => true Rate Topic: -----

#1 User is offline   RusAlex 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 54
  • Joined: 23-August 10

Posted 15 June 2011 - 01:17 AM

Im trying to switch on validateOnSubmit with ajaxSubmitButton, but it didn't work well.


<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'organization-form',
	'action'=>array('user/newOrganization'),
	'enableAjaxValidation'=>true,
	'enableClientValidation'=>true,
	'clientOptions'=>array(
		'validateOnSubmit'=>true,
		'validateOnChange'=>true,
	),
)); ?>

some form elements

echo CHtml::submitButton('Add',array('user/newOrganization'));
echo CHtml::ajaxSubmitButton('Add',array('user/newOrganization'));


ajaxValidation working good. and validates a specific fields when it's changed.
When i click on first Add button, validation before submit, work good. But when i press ajax Add button, validation before submit doesn't work.

Maybe i can use beforeSend of ajaxOptions for ajaxSubmitButton, and trigger ajax validation process.

Or any othes soluteion ?
0

#2 User is offline   zaccaria 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 2,232
  • Joined: 04-October 09
  • Location:Moscow

Posted 15 June 2011 - 01:43 AM

Take a look at this wiki.

Instead of use an ajax link, use the onSubmit of the form. If you follow the wik you can avoid to use the validate on submit.
0

#3 User is offline   maupv99 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 01-March 12

Posted 24 April 2012 - 01:19 PM

This topic is rather old, but still an issue I had to deal with. I came up with a solution that is not as nice as I would have liked, but works.

The basic idea is use what is working of each button, by that I mean that I create two buttons (submitButton and ajaxSubmitButton) and hide the ajaxSubmitButton. Once you click the submitButton, it will do the validation, but I stop the submit action from being done. If there were no errors, then I use the ajaxSubmitButton that was hidden to submit the form.

To do that without the need of creating the functionality each time you are going to use it, I simply extend CHtml:

protected/helpers/THtml.php:
<?php

class THtml extends CHtml {

	//This method allows to have a working ajaxSubmitButton that validates before doing the actual data submission
	//This requires the form to have the afterValidate param set to the ajaxAfterValidate function
	// 'afterValidate'=>'js:ajaxAfterValidate'
	public static function ajaxSubmitValidatedButton($label,$url,$ajaxOptions=array(),$htmlOptions=array()){
		
		if(isset($htmlOptions['id']))
			$id=$htmlOptions['id'];
		else
			$id=$htmlOptions['id']=isset($htmlOptions['name'])?$htmlOptions['name']:self::ID_PREFIX.self::$count++;
			
		$ajaxHtmlOptions['id'] = 'submitAjax_'.$id;
		
		$buttons = parent::ajaxSubmitButton($label,$url,$ajaxOptions,$ajaxHtmlOptions);
			
		$buttons .= parent::submitButton($label,$htmlOptions);
		
		$cs=Yii::app()->getClientScript();
		
		$cs->registerScriptFile("/js/ajaxSubmitButton.js");
		
		$cs->registerScript('Yii.THtml.#' . $id, 
			"$('body').on('submit','#$id',function(){return false;});
				$('#{$ajaxHtmlOptions['id']}').hide();");
		
		return $buttons;
		
	}
}


In the form I indicate the params:

$form=$this->beginWidget('CActiveForm', array(
	'id'=>'site-form',
	'enableAjaxValidation'=>true,
        'clientOptions'=>array('validateOnSubmit'=>true,
            'afterValidate'=>'js:ajaxAfterValidate'),


The afterValidate parameter what is going to do, is to call a js function to click the ajaxSubmitButton that was hidden once there are no validation errors

A sample of that function is:

js/ajaxSubmitButton.js
function ajaxAfterValidate(form, data, hasError){
	if(!hasError)
		$('[id^="submitAjax_"]',form).click();
}


Finally, I just use the newly created button with the same params as I would create the ajaxSubmitButton:
echo THtml::ajaxSubmitValidatedButton('Create',CController::createUrl( 'site/create'), array('update'=>'#content'),array('name'=>'buttonId')); 


Hope this helps!
0

#4 User is offline   beezee 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 18-December 12

Posted 20 December 2012 - 02:28 PM

I took Qiang Xue's suggestion from a related discussion on issue #2008 on the google code repository and created an extension of CActiveForm that encapsulates all of this and provides a clean API (almost identical to CActiveForm)

CActiveAjaxForm is available and documented on my github account (first post so can't link)

github.com / beezee / yii_cactiveajaxform
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users