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.