Refreshing Div After Modal Dialog Close

[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

**** UPDATE - Issue solved ****

I can’t believe that I did not see the obvious solution a couple of hours earlier: The solution for me was to add the function call ‘refreshDisciplines()’ to the setTimeout() call in AJAX success case:




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');refreshDisciplines();",3000);

            }


        } ,'cache':false});;

        return false; 

}