pagination

Hi,

I used Cgridview in an iframe, and I created 3 menus: Map, Details and Edit which on Map menu contain html class’s name ‘mapZoom’.

In these 3 menus had problem with pagination. Example, when I clicked on Map menu, that function is work in the page 1 but not worked in the page 2.

I noted that when I click on that functions in page 2, immediately, it refreshed and turned to the page 1.

Please see code below:

View: manage_order.php




<?php


Yii::import('zii.widgets.grid.CGridView');


class MyGridView extends CGridView {


  /**

   * @var string a PHP expression that is evaluated for every table body row and whose result

   * is used as the CSS style for the row. In this expression, the variable <code>$row</code>

   * stands for the row number (zero-based), <code>$data</code> is the data model associated with

   * the row, and <code>$this</code> is the grid object.

   */

  public $rowCssStyleExpression;


  /**

   * Renders a table body row.

   * @param integer $row the row number (zero-based).

   */

  public function renderTableRow($row) {


    $data = $this->dataProvider->data[$row];


    $rowClass = '';

    if ($this->rowCssClassExpression !== null) {

      $rowClass = $this->evaluateExpression($this->rowCssClassExpression, array('row' => $row, 'data' => $data));

    }

    else if (is_array($this->rowCssClass) && ($n = count($this->rowCssClass)) > 0) {

      $rowClass = $this->rowCssClass[$row % $n];

    }


    $rowStyle = '';

    if ($this->rowCssStyleExpression !== null) {

      $rowStyle = $this->evaluateExpression($this->rowCssStyleExpression, array('row' => $row, 'data' => $data));

    }


    $rowAttributes = '';

    if ($rowClass) {

      $rowAttributes .= ' class="'.$rowClass.'" ';

    }

    if ($rowStyle) {

      $rowAttributes .= ' style="'.$rowStyle.'" ';

    }


    echo '<tr '.$rowAttributes.'>';


    foreach ($this->columns as $column) {

      $column->renderDataCell($row);

    }


    echo "</tr>\n";

    

  }


}

?>

<style type="text/css">

table.items tr.gone td

{

    text-decoration: line-through;    

}

</style>


<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/jsfunction.js"></script>

<h3>Manage Order</h3>

<?php 

Yii::app()->clientScript->registerScript('search', "

$('.search-button').click(function(){

	$('.search-form').toggle();

	return false;

});

$('.search-form form').submit(function(){

	$.fn.yiiGridView.update('order-grid', {

		data: $(this).serialize()

	});

	return false;

});

");

?>





<?php $this->widget('MyGridView', array(

	'id'=>'order-grid',


	'dataProvider'=>$model->search(),

	'filter'=>$model,

	'rowCssStyleExpression' => '$data->order_action==1 ? "background-color:#F76251;" : ""',

    

	'columns'=>array(

		//'created_date',

		array(

		'name'=>'created_date',

		'type'=>'raw',

		'value'=>'$data->created_date',

		'filter'=>false

		),


		//'order_id',

		array(

		'name'=>'order_id',

		'type'=>'raw',

		'value'=>'$data->order_id',

		'filter'=>false

		),

		array(

		'name'=>'customer_id',

		'type'=>'raw',

		'value'=>'Customers::model()->findByPk($data->customer_id)->customer_first_name." ".Customers::model()->findByPk($data->customer_id)->customer_last_name',

		'filter'=>false

		),

		

		//'lat',

		//'lng',

		//'address',

		array(

		'name'=>'address',

		'type'=>'raw',

		'value'=>'$data->address',

		'filter'=>false

		),

		

		array(

		'header'=>'Staff',

		'value'=>'$data->staff_id!=null && ($data->order_status==3||$data->order_status==5||$data->order_status==4||$data->order_status==6)?Staff::model()->findByPk($data->staff_id)->getFullName():""',

  		'type'=>'raw',

		),

		array(

		'header'=>'Start Time',

		'value'=>'$data->received_date',

  		'type'=>'raw',

		),

		array(

		'header'=>'End Time',

		'value'=>'$data->completed_date',

  		'type'=>'raw',

		),

		array(

		'name'=>'order_status',

		//'value'=>'OrderStatus::model()->findByPk($data->order_status)->status_name',

		 'value'=>'Order::model()->getOnoff($data->order_status)',

        'filter'=>CHtml::listData(Order::model()->getOnoffs(), 'id', 'title'),

  		'type'=>'raw',


		),

		

		 array(

	

        'header'=>'Action',

		'type'=>'raw',

       	'value'=>'$data->order_status==6?"-----":CHtml::dropDownList($data->order_id, $data->order_action,

       		  

           

              CHtml::listData(Action::model()->findAll(),\'action_id\', \'action_title\'),

              

              array(\'empty\' => \'(Action)\',\'onchange\'=>\'js:confirm("Are you sure?")?isconfirm=1:isconfirm=0;\',

          

              "ajax"=>array(             \'type\' => \'POST\',

                                        \'url\' => Yii::app()->urlManager->createUrl(\'order/ChangAction\'),

                                        \'data\'=>"js:{clientId: $(this).val(),order_id: $data->order_id,getconfirm:isconfirm}",

                                        

                                        //refresh cgridview after onchange 

                                        \'success\'=>"function(data){js:$.fn.yiiGridView.update(\'order-grid\');} ",                              

                                        ),

              

                                        

          	),

             

              array(\'class\'=>$data->order_action)

                                        

              )',

       	

        

        'htmlOptions'=>array('confirm'=>'Are you sure you want to save?'),

		

        ),

        

        array(

        'header'=>'Map',

        'type'=>'raw',       

        'value'=>'$data->order_status==6?CHtml::link(\'Map\',array(\'\'),array(\'title\'=>$data->order_id,\'class\'=>\'mapZoom\',)):CHtml::link(\'Map\',array(\'\'),array(\'title\'=>$data->order_id,\'class\'=>\'mapZoom\',))',

        ),

        

        array(

        'header'=>'Details',

        'type'=>'raw',       

        'value'=> '$data->order_status==6?CHtml::link(\'Details\',array(\'\'),array(\'title\'=>$data->order_id,\'class\'=>\'order_view_detail\',)):CHtml::link(\'Details\',array(\'\'),array(\'title\'=>$data->order_id,\'class\'=>\'order_view_detail\',))',


        ),

        array(

        'header'=>'Edit',

        'type'=>'raw',       

	  'value'=> '$data->order_status==6?"-----":$data->order_status==5?"":CHtml::link(\'Edit\',array(\'\'),array(\'title\'=>Yii::app()->createUrl(\'Order/Update\',

		array(\'id\'=>$data->order_id)),\'class\'=>\'order_update\',))',

        ),

       // array(// display a column with "view", "update" and "delete" buttons

            //'class'=>'CButtonColumn',

       // ),


	),

)); ?>




View: layout/main.php




<script type="text/javascript">

$(document).ready(function(){

	$("#Frame2").load(function(){

		var staff=false;

		var url_map_zoom='<?php echo Yii::app()->createUrl("//Customers/AllMap");?>';	

		

		

		   $(this).contents().find(".mapZoom").click(function (){

			   var title = $(this).attr("title");

			   loadMap(url_map_zoom,staff);

			 	showMarker(title)


			   });


		 $(this).contents().find(".order_view_detail").bind('click',function (){

			   var title = $(this).attr("title");

			  alert(title);

			   OrderDetailView(title);

			   });


		 

		 $(this).contents().find(".order_update").bind('click',function (){

			 var title = $(this).attr("title");

			 alert(title);

			   onChangeUpdate_order(title);

			   //return false;

			   }); 

		

		});

</script>

<div id="order_frame">

<iframe src="<?php echo $this->createUrl('order/ManageOrder');?>" id="Frame2" width="100%" style="border:0; height:300px;"></iframe>

</div>




jsfunction.js




var defaultZoom = 2;

 

// variable for map

var map_main;

var icon_marker='http://maps.google.com/intl/en_us/mapfiles/ms/micons/red.png';

var icon_blue='http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue.png';

 

// variable for marker info window

var infowindow;

 

// List with all marker to check if exist

var markerList = {};

//set error handler for jQuery AJAX requests

$.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) {

	alert(textStatus);

	alert(errorThrown);

	alert(XMLHttpRequest.responseText);

}});

 

/**

 * Load Map

 */

function loadMap(url,staff){

	reload_Frame();

	// create new map make sure a DIV with id myMap exist on page

	var centerloc = new google.maps.LatLng(0.0, 0.0);

	map_main = new google.maps.Map(document.getElementById("map"), {

        center: centerloc,

        zoom: 2,

        mapTypeId: 'roadmap'

      });

 

	// create new info window for marker detail pop-up

	infowindow = new google.maps.InfoWindow();

 	

	if(staff==true){

		loadStaffMarkers(url);

	}else{

		// load markers

		loadMarkers(url);

	}

}




/**

 * Load markers via ajax request from server

 */

function loadMarkers(url){

 

	// load marker jSon data

	$.getJSON(url, function(data) {

 

		// loop all the markers

		$.each(data.markers, function(i,item){

			

			// add marker to map

			loadMarker(item);

 

		});

		 

		

	});

}


/**

 * Load Staff markers via ajax request from server

 */

function loadStaffMarkers(staff_url){

 

	// load marker jSon data

	$.getJSON(staff_url, function(data) {

 

		// loop all the markers

		$.each(data.markers, function(i,item){

			

			// add marker to map

			loadStaffMarker(item);

 

		});

		 

		

	});

}


/**

 * Load marker to map

 */

function loadStaffMarker(markerData){

	

	

	var staff_icon_marker='http://maps.google.com/mapfiles/ms/micons/hiker.png';

		

	

	//alert(markerData['order_status']);

	// create new marker location

	var myStaffLatlng = new google.maps.LatLng(markerData['lat'],markerData['lng']);

	//var fullname=markerData['first_name']+markerData['last_name'];

	var html = "<b>Staff Name:</b>"+markerData['first_name']+" "+markerData['last_name']+"<br><b>Address:"+markerData['description']+"</b><br>";

	

	// create new marker

	var marker = new google.maps.Marker({

	    id: markerData['track_id'],

	    map: map_main,

	    icon:staff_icon_marker,

	    title: html,

	    

	    position: myStaffLatlng

	});

	

 

	// add marker to list used later to get content and additional marker information

	markerList[marker.id] = marker;

	// add event listener when marker is clicked

	// currently the marker data contain a dataurl field this can of course be done different


	google.maps.event.addListener(marker, 'click', function() {

			

		// show marker when clicked		

		showMarker(marker.id);

		

 

	});

	

 

	// add event when marker window is closed to reset map location

	

	google.maps.event.addListener(infowindow,'closeclick', function() {

		map_main.setCenter(myStaffLatlng);

		map_main.setZoom(defaultZoom);

	});

	

}





/**

 * Load marker to map

 */

function loadMarker(markerData){

	

	if(markerData['order_status']==3){

		//icon_marker='http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue.png';

		

	}

	//alert(markerData['order_status']);

	// create new marker location

	var myLatlng = new google.maps.LatLng(markerData['lat'],markerData['lng']);

	var html = "<br><b>Address:"+markerData['address']+"</b><br>";

	

	// create new marker

	var marker = new google.maps.Marker({

	    id: markerData['order_id'],

	    map: map_main,

	    icon:markerData['order_status']==6?icon_marker:icon_blue,

	    title: markerData['address'] ,

	    position: myLatlng

	});

	

 

	// add marker to list used later to get content and additional marker information

	markerList[marker.id] = marker;

	// add event listener when marker is clicked

	// currently the marker data contain a dataurl field this can of course be done different


	google.maps.event.addListener(marker, 'click', function() {

 

		// show marker when clicked

		

		showMarker(marker.id);

		

 

	});

	

 

	// add event when marker window is closed to reset map location

	

	google.maps.event.addListener(infowindow,'closeclick', function() {

		map_main.setCenter(defaultLatlng);

		map_main.setZoom(defaultZoom);

	});

	

}





/**

 * Show marker info window

 */

function showMarker(markerId){

 

	// get marker information from marker list

	var marker = markerList[markerId];

	// check if marker was found

	if( marker ){

		

			// show marker window

		

		var data=marker.title;

		

			infowindow.setContent(data);

			infowindow.open(map_main,marker);

			map_main.setCenter(marker.position);

			

			map_main.setZoom(12);

			

		

	}else{

		alert('Error marker not found: ' + markerId);

	}

}


function show_A_Marker(markerId){

	 

	// get marker information from marker list

	var marker = markerList[markerId];

	// check if marker was found

	if( marker ){

	

			// show marker window

		var data=marker.title;

		

			infowindow.setContent(data);

			infowindow.open(map_main,marker);

			map_main.setCenter(marker.position);

			map_main.setZoom(12);

		

	}else{

		alert('Error marker not found: ' + markerId);

	}

}

/*

 * 

 * 

 * 

 * 

 * */


/*Zoom Map where cutomer id*/

function changZoomMap(changeVal,url_map_zoom) {

	var order_zoom=changeVal;

	var cus_id;

	

	$.getJSON(url_map_zoom,{cus_id:order_zoom}, function(data) {

			 

		 $.each(data, function(key,item) {	

			 

			 var latLng = new google.maps.LatLng(parseFloat(item.lat),parseFloat(item.lng)); //Makes a latlng

		      map.panTo(latLng); //Make map global

			 

			// map.panTo(new GLatLng();

			// map.setCenter(new GLatLng(parseFloat(item.lat),parseFloat(item.lng)), 12);

			 

   		 //var center = new google.maps.LatLng(parseFloat(item.lat),parseFloat(item.lng));

		 //map.setCenter(center);

		 map.setZoom(12);

		 return false; //this will cancel your navigation

		 });


		 });  


}




please give me any advice

sorry for my bad english.

thanks.

Hi you must add add callback (loadMap) to your gridview using

property the callback will be invoked when cgridview finish load the data from back-end

thanks a lot for your reply.

i have modified in Cgridview like this




$this->widget('MyGridView', array(

	'id'=>'order-grid',

	'dataProvider'=>$model->search(),

	'filter'=>$model,

	'rowCssStyleExpression' => '$data->order_action==1 ? "background-color:#F76251;" : ""',

    'afterAjaxUpdate'=>'loadMap()',



now the function in the page 2 is worked but after that it still turned to the page 1. why it didn’t keep in the page 2?

i dont understand what you trying say can you explain please you mean when you click on page 2 it goes back to page 1

yes, i mean when i click on the Map of page 2, the function is work but after that the whole frame refresh and load to page 1.

sorry for make you missunderstand.

hey buddy return false from you javascript function

thanks again!!

you are welcome

Yii::yes::it::is