CJuiDialog not working properly

I am making a reservation system for a hotel. This is my thesis anyway. In my view I let the users input the check-in and check-out time of their reservations, after which i have an ajaxbutton “Check Available Rooms” to show the users the available rooms for their selected time. what it does is that when the user clicks the ajaxbutton, it reloads or refreshes a div in my page and show the available rooms, which is a table from another controller/view. My problem is that, every row in that table has a link to open a CJuiDialog box… the CJuiDialog appears., but it’s close button does not work. it doesn’t closes the CJuiDialog box. and also, when I click again the “Check Available Rooms” ajaxbutton this time, it now opens a CJuiDialog box and I don’t know why it happens. Please help me. I think the problem came when i used a renderPartial in the controller to show the available rooms.

here is my code: (i excluded to copy the #from and #to html code to minimize space)




	<?php




 

 echo CHtml::ajaxButton ("Available Rooms",

                              CController::createUrl('reservation/UpdateAjax'), 

                              array(

                                  'data' => array(

                                  	'from'=> 'js: $("#from").val()',

                                  	'to'=> 'js: $("#to").val()',

                                  ),

                              	  'update' => '#data',

							  ),

 								array('class'=>'btn btn-warning'));

 


?>




</div>




<div style="margin-top:20px;" id="data">

  

</div>



reservation controller:




	public function actionUpdateajax($from, $to)

	{

		$model = new reservation;

	

	

		

		

		if (Yii::app()->request->isAjaxRequest) {

			Yii::app()->clientScript->scriptMap['jquery.js'] = false;

			yii::app()->clientScript->scriptMap['jquery-ui.min.js'] = false;

			$this->renderPartial('availableRooms',array(

				'model'=>$model, 'from'=>$from, 'to'=>$to,

		),false, true);}

		

		

	}



and the table which contains the available rooms.





<?php




if($model->isDateSmaller($from,$to))

{

?>

<div class="alert alert-danger"><b>Invalid date</b></div>


<?php 


}


else

{ 

?>





<style>


.panel

{

width:750px;

height:200px;

background-color:#9A3334;

padding-left:20px;

padding-top:20px;

margin-bottom:20px;

}


.panel-header

{

width:170px;

height:170px;


float:left;

}


.panel-body

{

margin-left:10px;

width:350px;

height:170px;


float:left;


}


.panel-body span

{

font-family:Segoe Ui;

font-size:20px;

color:white;

}


</style>










<table id="rooms" class="table table-striped table-hover ">

  <thead>	

	<tr>

		<th> Room Image </th>

		<th> Room Type </th>

		<th> Room Rate </th>

		<th> Room Number </th>

		<th> - </th>

	</tr>

  </thead>

  <tbody>

<?php


	$loop = $model->allRooms();


foreach($loop as $room)

{

		if($model->isAvailable($from, $to, $room['RoomID']))

		{

?>




<tr>

	<td><img src="/reservationproject/roomImages/<?php echo $room['display_img'] ?>" style="width:50px; height:50px;" /></td>

	<td><?php echo $model->getRoomType($room['RoomID']) ?></td>

	<td><?php echo $room['RoomPrice'] ?></td>

	<td><?php echo $room['RoomNumber'] ?></td>

	<td><?php

			echo CHtml::ajaxLink(

			"Reserve This", //link label

			Yii::app()->createUrl('client/create'),

			array( // ajaxOptions

				'type' => 'GET',

				'success' => "function( data )

              	    { 

						//alert( data );

					  	 $('.ui-dialog-titlebar').css('visibility','hidden');

						$('#mydialog').dialog('open');

						$('#dlg-content').html(data);

              	    }",

				'data' => array('from'=>$from, 'to'=>$to, 'roomID'=>$room['RoomID'])

			),

			array('class'=>'btn btn-info')

			);

		?></td>				

</tr>	

	





<?php 

		}

}


?>

</tbody>

</table>




<?php 

}

?>


<?php

 		

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

			'id' => "mydialog",	

			'options' => array(

			'autoOpen' => false,

			'width' => '361px',

			'height' => 'auto',

			'show'=>'fade',

			'hide'=>'fade',

			'modal' =>true,

			'position' => array('my'=>'center', 'at'=>'top'),

			'buttons' => array(

					Yii::t('app', 'Close') => 'js:function() {$(this).dialog("close");}',

			),

					

			),


		 ));

		 

		 ?>

			<div id="dlg-content" style="dispay:none;"></div>

		 <?php 

			$this->endWidget('zii.widgets.jui.CJuiDialog');

         ?>






Hope you can help me guys! Thanks.

hi this is a yii2 forum. Please ask this in a yii1 forum.

Thank you

[color="#006400"]/* moved from 2.0 forum to 1.1 forum */[/color]

It should be controversial, but as far as I know, using renderPartial with the 4th parameter set to be true can usually be very problematic.

As you know, this sends back some javascript code along with the html in ajax response. This will complicate the things very much. For example, we have to take care not to re-send jQuery.

What I usually do is this:

  1. Sends all the required javascript code in the initial page loading.

  2. Sends only the plain html (or json data) in the ajax responses.

It sounds a bit stupid and tedious, but this strategy has always worked for me.

Thank you for your response sir. but since im new to yii and to ajax calls… Can you show me an example of sending only plain html(or json data) in the ajax responses? Thank you so much sir.

Sorry, but it’s very difficult for me to write a good sample.

The main idea is to divide the popup dialog into the outer frame and the inner content.

  1. Render the outer frame with an empty content (or dummy content) in the initial page loading.

The popup is closed initially.

At this point the required javascript for the popup dialog should also be sent. It includes an event handler to fire the ajax request to get the content of the popup.

  1. Sends only the inner content in the ajax response using renderPartial with the 4th parameter set to be false. The response is a plain html.

And the event handler that fired the ajax request will receive the content and open the popup.