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:
- 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);
- In the widget after some admninistration, the form and ajaxSubmitbutton is loaded
private function placeInputs(){
$form=$this->beginWidget('bootstrap.widgets.TbActiveForm',array(
'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){
alert(data);
$("#'. $this->resultsId .'_loading").hide();
$("#'. $this->resultsId .'").html(data);
}',
'type'=>'POST',
));
$this->endWidget();
}
- The search creates the model TranslationForm used to determine the results and executes the widget.
public function actionSearch($id){
if(Yii::app()->request->isAjaxRequest){
// prepare some variables ... like $startWith
if($model->validate()){
$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'),
));
}else{
// print errors
}
}
}
- 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.
Reinier