Cjuidialog Close Timeout

Ok, so my js/ajax skillz definitely do not pay the billz. However, I thought I had a solid base knowledge, but I can’t figure this out:

I have a link to a dialog box and it opens fine, but I want to have the box auto-close once the form in the box is submitted and the order is fulfilled. And I can close it immediately with:




...

'success':function(data){

        $('#assign-".$dialogId."').dialog('close');

}

...



But as soon as it’s in a setTimeout, it doesn’t work (firebug says “$(…).dialog is not a function”).




'success':function(data){

        //doesn't work

	setTimeout(function(){

		$('#assign-".$dialogId."').dialog('close');

	}, 2000)


        //doesn't work

	setTimeout(\"$('#assign-".$dialogId."').dialog('close')\",2000);


        //works

        $('#assign-".$dialogId."').dialog('close');

}



I’ve tried $(…).fadeOut(‘slow’) and that works, but the title bar stays, so that’s no good.

Here’s my view:




<?php

if (!empty($asDialog)):

    $this->beginWidget('zii.widgets.jui.CJuiDialog', array( // the dialog

        'id'=>'assign-'.$dialogId,

        'options'=>array(

	    'closeOnEscape'=>true,

            'title'=>'Assign Items to Move',

            'autoOpen'=>true,

            'modal'=>true,

            'width'=>600,

            //'height'=>300,

            'autoHeight'=>true,

			'close'=>"js:function(e,ui){

						jQuery('body').undelegate('#assignSubmit-".$dialogId."', 'click');

						jQuery(this).empty();

					}"

        ),

		'htmlOptions'=>array(

			'style'=>'font-size: 12px;'

		)

 ));

 

endif;

?>

<div id="hidden-<?php echo $dialogId; ?>" class="hidden"></div>

<?php if (!empty($asDialog)): ?>

<?php

//FORM STUFF

?>

<div class="row buttons" id="loadingSubmit-<?php echo $dialogId; ?>">

	<?php echo CHtml::submitButton('Assign',

							array('id'=>'assignSubmit-'.$dialogId)

				); ?>

	

</div>

<?php


Yii::app()->clientScript->registerScript('assign-exp',"$('#assignSubmit-".$dialogId."').click(function(){


	$.ajax({

		'type':'POST',

		'url':'".CHtml::normalizeUrl(array('DryHire/AssignItemsToMove','mId'=>$_GET['mId'], 'tId'=>$_GET['tId'], 'dialogId'=>$dialogId))."',

		'data':{ids:$.fn.yiiGridView.getChecked('assign-items-grid', 'assignCheck')},

		'dataType':'json',

		'beforeSend':function(){

			$('#loadingSubmit-".$dialogId."').addClass('loading');

		},

		'success':function(data){

			$('#loadingSubmit-".$dialogId."').removeClass('loading');

			if(data.fulfilled){

				setTimeout(function(){

						$('#assign-".$dialogId."').fadeOut('slow');

					},2000);

				setTimeout(function(){

					$('#assign-".$dialogId."').dialog('close');

				}, 3000)

				//setTimeout(\"$('#assign-".$dialogId."').dialog('close')\",2000);

				//$('#assign-".$dialogId."').dialog('close');

			}

			$('#hidden-".$dialogId."').html(data.message);

			$('#hidden-".$dialogId."').removeClass('flash-error flash-success hidden').addClass('flash-'+data.flag);

			);


		}

	});


})

 

", CClientScript::POS_READY); 


?>

<?php

  $this->endWidget();

  endif;

?>



I’m not sure but they have slightly alternate syntaxes. Try them :)

http://forum.jquery.com/topic/how-to-autoclose-a-jquery-ui-dialog-with-timeout

http://stackoverflow.com/questions/1457871/how-can-i-close-a-jquery-ui-dialog-after-a-x-seconds

Awwwh yeeeeah! Hacked myself a solution! I put this in my success function (in the ajax link within my dialog):




setTimeout(function(){

		$('#assign-".$dialogId."').fadeOut('slow');

},2000);

setTimeout(function(){

		$('.ui-dialog').hide();

		$('.ui-widget-overlay').hide();

},2600);