Js And Ajax

Description

The admin action is supposed to have the following behavior:

  1. List all pending orders

  2. Auto-refresh the gridview every 10 sec

  3. If the gridview items are a result of a filtering action DON’T refresh

  4. If the user is typing in a filter DON’T refresh

  5. During the auto-refresh if there is a new order, play a sound.

  6. 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>&lt;</b>, <b>&lt;=</b>,

	<b>&gt;</b>, <b>&gt;=</b>, <b>&lt;&gt;</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

);


?>




I have also noticed that the problem disappears (partially) if I don’t register scriptaculous’ scripts. But then ,of course, I can’t play the sound.