Yiigridview From Ajaxsubmitbutton Not Working

Hi there,

I’ve struggled with this problem for a while now. After searching hours on the web I found some really nice possibilities. However, those wouldn’t fit my situation. Hence, my question is whether my concept of doing this is wrong, or what else I am missing.

The idea:

I want to show a gridview triggered by a form via an ajaxSubmitButton.

The example of this page is ‘online’ at: This link

The problem is how to deal with a gridview which is loaded via an AjaxSubmitButton and then displayed as output of a widget?

In chronological order:

  1. The widget form the form and gridview div is loaded in a view of site ($this->render)

$this->widget('ext.widgets.searchTranslation.searchTranslationWidget', array('mustStartWithQuery' => true), false);

  1. In the widget after some admninistration, the form and ajaxSubmitbutton is loaded

private function placeInputs(){


		'id'			=> $this->formId,

		'type'			=> 'inline',

		'htmlOptions'	=> array('enctype' => 'multipart/form-data'),

		'enableAjaxValidation' => true,

		'clientOptions' => array(

			'validateOnChange'	=> false,

			'validateOnSubmit'	=> true,




	echo "<div class='inline-row'>".

			$form->textFieldRow($this->translationModel, 'language_word', array('name' => $this->inputName . '[language_word]')) . 

			$form->labelEx($this->translationModel, 'languageId', array('class'=>'languageLabel'))

		. "</div>"

		. "<div class='inline-row'>".

			$form->textFieldRow($this->translationModel, 'french_word', array('name' => $this->inputName . '[french_word]')) . 

			$form->labelEx($this->translationModel, 'french_id', array('class'=>'languageLabel'))

		. "</div>";


	$gridId = "results". (($this->mustStartWithQuery) ? '_start' : '');

	echo CHtml::ajaxSubmitButton(Yii::t("Site", 'zoek'), Yii::app()->createUrl('//dictionairyWord/search/'. $this->otherLang), array(

			'onClick'	=> 'js:$("#'. $this->resultsId .'_loading").show()',

			'success'	=> 'js:function(data){


								$("#'. $this->resultsId .'_loading").hide();

								$("#'. $this->resultsId .'").html(data);






  1. The search creates the model TranslationForm used to determine the results and executes the widget.

public function actionSearch($id){


		// prepare some variables ... like $startWith



			$this->widget('zii.widgets.grid.CGridView', array(

				'id'			=> 'results' . (($startWith) ? '_start' : ''),

				'dataProvider'		=> $model->search($startWith),

				'ajaxUpdate'		=> '#results' . (($startWith) ? '_start' : ''),

				'ajaxUrl'		=> Yii::app()->createUrl('dictionairyWord/search'),



			// print errors




  1. Retrieving the results via the TranslationForm model

public function search($startWith = true){

		$criteria = new CDbCriteria();

		// add criteria

		$criteria->select = "COUNT(*)";

		$itemCount = Yii::app()->db->commandBuilder->createFindCommand('dictionairy_word', $criteria)->queryScalar();

		$criteria->select = array(	'dictionairyWord.id as id',

									'dictionairyWord.word as language_word',

									'dictionairyWords.word as french_word');


		$q = Yii::app()->db->commandBuilder->createFindCommand('dictionairy_word', $criteria)->getText();


		return new CSqlDataProvider($q, array(	'params'			=> $criteria->params,

												'totalItemCount'	=> $itemCount,

												'pagination'		=> array( 'route' => 'dictionairyWord/search'),

												'sort'				=> array( 'route' => 'dictionairyWord/search')


	} else {

		return new CArrayDataProvider(array());



Hence. The widget SearchTranslationWidget loads a form with a ajaxSubmitButton.

That button then places the results of the DictionaryWord/search in the div.

That is the part where the scripts of gridview are not loaded.

I am familiar with some work-a-rounds with renderPartial (also with ZController etc.), but the problem is how to deal with a gridview which is loaded via an AjaxSubmitButton and then displayed as output of a widget?

I really hope someone is willing to help me!

With kind regards

and thank you so much in advance.


I would use an iframe instead of ajax,

because ajax-content with included js-libs/features or "ajax in ajax" always causes problems.