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.
:is