[SOLVED]
Hi all,
I hope one of you can help me. I have browsed the forum but did not find any solution for my problem.
Setup: I am using yii-1.1.14 with Yiistrap and Yiiwheels extension.
What I want to achieve: Refresh a DIV with a list view after data has been entered via modal create dialog.
Situation:
I do have a partial view with a WhBox and a TbListView inside. I have added two buttons on the box, one for creating a new data record (‘Add New’) and one for refreshing the box (‘Update’):
<?php /******* Box *******/
$this->beginWidget('yiiwheels.widgets.box.WhBox', array(
'id' => 'boxDisciplines',
'title' => 'Disciplines '.TbHtml::badge(count($model->disciplines), array('color' => TbHtml::BADGE_COLOR_DEFAULT)),
'headerIcon' => 'icon-home',
'headerButtons' => array(
TbHtml::button('Add New', array(
'style' => TbHtml::BUTTON_COLOR_PRIMARY,
'data-toggle' => 'modal',
'data-target' => '#dialogDiscipline',
'icon' => 'plus',
'onclick'=>"{addDisciplines();}",
)),
TbHtml::button('Update', array(
'style' => TbHtml::BUTTON_COLOR_PRIMARY,
'icon' => 'refresh',
'onclick'=>"{refreshDisciplines();}",
)),
),
)); ?>
<?php /******* List View *******/
$this->widget('bootstrap.widgets.TbListView', array(
'dataProvider'=>$this->disciplineDataProvider,
'id'=>'listDisciplines',
'itemView'=>'_sportDisciplines', // refers to the partial view named '_view'
));
?>
<?php /******* Modal Dialog *******/
$this->widget('bootstrap.widgets.TbModal', array(
'id' => 'dialogDiscipline',
'header' => 'Modal Heading',
'content' => '<div class="divModal"></div>',
));
?>
The ‘Add New’ button calls the function ‘addDisciplines’ which is actually loading the create form. After a successful call, the dialog displays the success message and remains open for some seconds:
function addDisciplines()
{
jQuery.ajax({'url':'/training/index.php?r=discipline/create','data':$(this).serialize(),'type':'post','dataType':'json','success':function(data)
{
if (data.status == 'failure')
{
jQuery('#dialogDiscipline div.divModal').html(data.div);
jQuery('#dialogDiscipline div.divModal form').submit(addDisciplines);
}
else
{
jQuery('#dialogDiscipline div.divModal').html(data.div);
setTimeout("jQuery('#dialogDiscipline').modal('hide');",3000);
//refreshDisciplines();
}
} ,'cache':false});;
return false;
}
The javascript function contains a call to ‘refreshDisciplines()’ which is currently commented out (don’t know whether it would be at the right position there…
The ‘Update’ button calls the ‘refreshDisciplines’ function:
function refreshDisciplines()
{
jQuery.ajax({'url':'/training/index.php?r=sport/refreshDisciplines&id=1','cache':false,'success':function(html){jQuery("#disciplines").html(html)}});
return false;
}
and the corresponding controller function:
public function actionRefreshDisciplines($id)
{
$model=$this->loadModel($id);
$this->disciplineDataProvider = new CActiveDataProvider('Discipline', array(
'criteria' => array('condition' => 'sport_id=' . $model->sport_id,)));
$this->disciplineDataProvider->pagination->pageSize=10;
$this->renderPartial('_sportDisciplinesBox', array(
'model'=>$model,
), false, false);
}
Ok, so if I click on the ‘Add New’ button now, the modal dialog opens properly, I can enter data and save it. The dialog is closed afterwards.
As the ‘refreshDisciplines’ function is not yet called, the listView is still displaying the ‘old’ values.
If I click now on the second button ‘Update’, the div in question is refreshed properly. No javascript errors, everything is fine.
But now comes the question: How can I combine the ‘Update’ call with the ‘Add New’ call? I just want to have one button that opens the dialog and updates the DIV after the dialog has been closed.
I have tried various combinations, but did obviously not find the right one
Hope somebody knows how to solve that.
Kind Regards,
Martin