Description
The admin action is supposed to have the following behavior:
-
List all pending orders
-
Auto-refresh the gridview every 10 sec
-
If the gridview items are a result of a filtering action DON’T refresh
-
If the user is typing in a filter DON’T refresh
-
During the auto-refresh if there is a new order, play a sound.
-
The View button of the CButtonColumn must spawn a CJuiDialog instead of redirecting
Notes
To play the sound I use a JS library called "Scriptaculous" (Link Here)
The Problem
When I click the View Button nothing happens.
In the browser’s (Google Chrome) JS Console I get the following errors:
Uncaught TypeError: Cannot call method ‘css’ of null
Uncaught TypeError: Cannot read property ‘loadingClass’ of undefined
This is my order/admin file:
<?php
/* @var $this OrderController */
/* @var $model Order */
$this->breadcrumbs=array(
'Orders'=>array('admin'),
'Manage',
);
$this->menu=array(
array('label'=>'List Incomplete', 'url'=>array('incomplete'),'visible'=>!Yii::app()->user->isGuest),
//array('label'=>'List Orders', 'url'=>array('index'),'visible'=>!Yii::app()->user->isGuest),
//array('label'=>'Create Order', 'url'=>array('create'), 'visible'=>Yii::app()->user->isAdmin()),
);
Yii::app()->clientScript->registerScript('search', "
$('.search-button').click(function(){
$('.search-form').toggle();
return false;
});
$('.search-form form').submit(function(){
$('#order-grid').yiiGridView('update', {
data: $(this).serialize()
});
return false;
});
");
?>
<h1>Manage Orders</h1>
<p>
You may optionally enter a comparison operator (<b><</b>, <b><=</b>,
<b>></b>, <b>>=</b>, <b><></b> or <b>=</b>) at the
beginning of each of your search values to specify how the comparison
should be done.
</p>
<?php echo CHtml::link('Advanced Search','#',array('class'=>'search-button')); ?>
<div class="search-form" style="display: none">
<?php $this->renderPartial('_search',array(
'model'=>$model,
)); ?>
</div>
<!-- search-form -->
<?php
$cbutton = array(
'class'=>'CButtonColumn',
'template'=>'{view}{complete}{delete}{sms}',
'viewButtonImageUrl'=>Yii::app()->request->baseUrl.'/images/eye.png',
'buttons'=>array(
'view'=>array(
'id'=>'viewButton',
'url'=>'Yii::app()->createUrl("order/view", array("id"=>$data->order_id,"store"=>$data->store_url,"asDialog"=>1))',
'options'=>array(
'ajax'=>array(
'type'=>'POST',
// ajax post will use 'url' specified above
'url'=>"js:$(this).attr('href')",
'update'=>'#id_view',
),
),
),
'delete'=>array(
'id'=>'deleteButton',
'label'=>'Delete',
'imageUrl'=>Yii::app()->request->baseUrl.'/images/delete.png',
'url'=>'Yii::app()->urlManager->createUrl("order/delete", array("id"=>$data->order_id, "store"=>$data->store_url))',
'visible'=>'$data->order_status_id == 0',
),
'complete'=>array(
'id'=>'completeButton',
'label'=>'Complete',
'imageUrl'=>Yii::app()->request->baseUrl.'/images/tick.png',
'url'=>'Yii::app()->urlManager->createUrl("order/completeOrder", array("id"=>$data->order_id, "store"=>$data->store_url))',
'visible'=>'$data->order_status_id != 5',
),
'sms'=>array(
'id'=>'smsButton',
'label'=>'Send SMS',
'imageUrl'=>Yii::app()->request->baseUrl.'/images/sms.png',
'url'=>'Yii::app()->urlManager->createUrl("order/completeOrder", array("id"=>$data->order_id, "store"=>$data->store_url))',
),
'email'=>array(
'id'=>'emailButton',
'label'=>'Send SMS',
'imageUrl'=>Yii::app()->request->baseUrl.'/images/email.png',
'url'=>'Yii::app()->urlManager->createUrl("order/completeOrder", array("id"=>$data->order_id, "store"=>$data->store_url))',
),
)
);
Yii::app()->format->numberFormat=array(
'decimals'=>2,
'decimalSeparator'=>',',
'thousandSeparator'=>'.',
);
Yii::app()->format->datetimeFormat='d/m/Y H:i:s';
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'order-grid',
'dataProvider'=>$model->search(),
'filter'=>$model,
'afterAjaxUpdate'=>$this->playSound(),
'enableSorting'=>true,
'columns'=>array(
array(
'name'=>'store_name',
'header'=>'Store',
'value'=>'$data->store_name',
'htmlOptions' => array('style' => 'font-weight:bold; text-align:center; width:20%; overflow-x: none'),
),
array(
'name'=>'order_id',
'header'=>'Order No.',
'value'=>'$data->order_id',
'htmlOptions' => array('style' => 'text-align:center; width:5%; overflow-x: none'),
),
array(
'name'=>'date_modified',
'header'=>'Date Modified',
'value'=>'Yii::app()->format->formatDatetime($data->date_modified)',
'htmlOptions' => array('style' => 'text-align:center; width:15%; overflow-x: none'),
),
array(
'name'=>'payment_firstname',
'header'=>'Firstname',
'value'=>'$data->payment_firstname',
'htmlOptions' => array('style' => 'font-weight:bold; text-align:center; width:15%; overflow-x: none'),
),
array(
'name'=>'payment_lastname',
'header'=>'Lastname',
'value'=>'$data->payment_lastname',
'htmlOptions' => array('style' => 'font-weight:bold; text-align:center; width:15%; overflow-x: none'),
),
array(
'name'=>'total',
'header'=>'Price',
'value'=>'Yii::app()->format->formatNumber($data->total)',
'htmlOptions' => array('style' => 'font-weight:bold; text-align:center; width:5%; overflow-x: none'),
),
array(
'name'=>'order_status_id',
'header'=>'Status',
'value'=>'$data->status->name',
'htmlOptions' => array('style' => 'text-align:center; width:15%; overflow-x: none'),
'filter'=>OrderStatus::model()->getStatusNameArray(),
),
$cbutton,
),
)); ?>
<?php
//the view dialog
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'dlg-order-view',
'options'=>array(
'title'=>'Order Details',
'autoOpen'=>false, //important!
'modal'=>true,
'width'=>850,
'height'=>650,
),
));
?>
<div id="id_view"></div>
<?php $this->endWidget();?>
<?php
$cs=Yii::app()->clientScript;
$cs->registerScriptFile(Yii::app()->baseUrl.'/js/scriptaculous/prototype.js', CClientScript::POS_HEAD);
$cs->registerScriptFile(Yii::app()->baseUrl.'/js/scriptaculous/scriptaculous.js?', CClientScript::POS_HEAD);
Yii::app()->clientScript->registerScript('autoupdategrid',
"
var oldOdd=0;
var oldEven=0;
setInterval(
function refreshGrid(){
var refresh=true;
var row=$(\"#order-grid table.items thead tr.filters td\");
row.each(function(){
if ($(\"input\").is(\":focus\")) {
refresh=false;
}
});
if (refresh) {
var playSound=false;
$.fn.yiiGridView.update('order-grid', {
data: $(this).serialize()
});
//if ($(\"#order-grid table.items tbody tr\").hasClass(\"odd\")) {
if ($(\"#order-grid table.items tbody tr.odd\").length > oldOdd || $(\"#order-grid table.items tbody tr.even\").length > oldEven) {
oldOdd=$(\"#order-grid table.items tbody tr.odd\").length;
oldEven=$(\"#order-grid table.items tbody tr.even\").length;
playSound=true;
}
if (playSound) {
if ($(\"#order-grid table.items tbody tr.odd\").length >= 1) {
Sound.enable();
Sound.play(\"\",{replace:true});
Sound.play(\"iro/sounds/skype_sms.mp3\",{replace:true});
playSound=false;
}
}
//}
}
return false;
},10000);", CClientScript::POS_READY
);
?>