I have a problem using CodeIgniter and jqGrid. The grid has the right design but does not load the data into the grid. The message displayed is "undefined".
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dark-hive/jquery-ui.css" type="text/css" rel="stylesheet"/>
<link href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" rel="stylesheet"/>
<link type="text/css" href="<?php echo base_url()?>asset/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<link type="text/css" href="<?php echo base_url()?>asset/jqgrid/css/jquery.searchFilter.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>'asset/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>asset/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>asset/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<title>Jqgrid</title>
</head>
<body>
<script type="text/javascript">
jQuery().ready(function (){
jQuery("#list").jqGrid({
url:'<?php echo base_url().'index.php/jqgrid/example'?>',
mtype : "post",
datatype: "json",
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:20},
{name:'invdate', index:'invdate', width:90, align:'center',editable:true, formatter:'date',editrules: { required: true, date:true}, formatoptions:{srcformat:'Y-m-d', newformat:'m/d/Y'}},
{name:'amount', index:'amount', width:80, align:'center',editable:true,edittype:'text'},
{name:'tax', index:'tax', width:80, align:'center',editable:true,edittype:'text'},
{name:'total', index:'total', width:80, align:'center',editable:true, edittype:'text'},
{name:'note', index:'note', width:150, align:'center', sortable:false,editable:true,edittype:'text'}
],
rowNum:10,
width: 800,
height: 200,
rowList:[10,20,30,40,50,60,70],
pager: '#gridpager',
sortname: 'invid',
viewrecords: true,
caption:"CLientes"
}).navGrid(
'#gridpager',
{view:true,edit:true,add:true,del:true,search:true},
{closeAfterEdit:true,modal:true}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{}, // enable the advanced searching
{closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
);
});
</script>
<table id="list"></table>
<div id="gridpager"></div>
</body>
class cliente extends CI_Model{
function __construct()
{
parent::__construct();
}
function cargar()
{
$q = $this->db->query("select * from invheader");
return $q;
}
}
class jqgrid extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper(array('url'));
$this->load->model('cliente');
$this->load->database();
}
function index()
{
$this->load->view('jqgrid/home');
}
function example()
{
$hal = isset($_POST['page'])?$_POST['page']:1;
$batas = isset($_POST['rows'])?$_POST['rows']:10;
$sidx = isset($_POST['sidx'])?$_POST['sidx']:'invid';
if(!$sidx) $sidx=1;
$q = $this->cliente->cargar();
$hitung = count($q);
if( $hitung > 0 ) {
$total_hal = ceil($hitung/$batas);
} else {
$total_hal = 0;
}
if ($hal > $total_hal) $hal=$total_hal;
$start = $batas*$hal - $batas;
$start = ($start < 0) ? 0 : $start;
$data->page = $hal;
$data->total = $total_hal;
$data->records = $hitung;
$i=0;
foreach($q->result() as $row) {
$data->rows[$i]['id']=$row->invid;
$data->rows[$i]['cell']=array($i+1,$row->invdate,$row->amount,$row->tax,$row->total,$row->note);
$i++;
}
echo json_encode($data);
}
}
I see the following problem/suspected places in your code:
First of all the file jquery.searchFilter.css will be not used in many resent jqGrid versions.
Including of both jquery.jqGrid.js and jquery.jqGrid.min.js is definitively wrong.
I don't use PHP myself, but "<?php echo base_url(); ?>'asset/jqgrid/js/i18n/grid.locale-en.js" seems me wrong. Probably you mean "<?php echo base_url(); ?>asset/jqgrid/js/i18n/grid.locale-en.js" (without ' charachter in the middle).
I don't know PHP syntax, but url:'<?php echo base_url().'index.php/jqgrid/example'?>' seems also suspected for mean something like url:'<?php echo base_url("index.php/jqgrid/example");?>'?
Related
When I type in my select box the result always show "The result cannot be load". I am using CodeIgniter for my framework and select2 in my select box and am a newbie in CodeIgniter and Select2. I have already search it through all articles that can be related to my problem but it still can't work. I think I messed my ajax but I don't know how and where I should fix it.
Here is my controller
<?php
class Admin extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('admin_model');
}
function search_book(){
$booksClue = $this->input->get('booksClue');
$data_book = $this->admin_model->get_book($booksClue, 'id_book');
echo json_encode($data_book);
}
}
?>
Here is my model
<?php
class Admin_model extends CI_Model{
function get_book($booksClue, $column){
$this->db->select($column);
$this->db->like('id_book', $booksClue);
$data = $this->db->from('book')->get();
return $data->result_array();
}
}
?>
And here is my view
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.searchingBook').select2({
placeholder: 'Masukkan ID Buku',
minimumInputLength: 1,
allowClear: true,
ajax:{
url: "<?php echo base_url(); ?>/admin/searchbook",
dataType: "json",
delay: 250,
data: function(params){
return{
booksClue: params.term
};
},
processResults: function(data){
var results = [];
$.each(data, function(index, item){
results.push({
id: item.id_book,
text: item.id_book
});
});
return{
results: results
};
}
}
});
});
</script>
<table>
<tr>
<td><b>ID Buku</b></td>
<td> : </td>
<td>
<select class="searchingBook" style="width: 500px">
<option></option>
</select>
</td>
</tr>
</table>
<br><br>
</body>
</html>
Big thanks for your help!
Update your model function like below:
function get_book($booksClue, $column){
$this->db->select($column);
$this->db->from('book');
$this->db->like('id_book', $booksClue);
return $this->db->get()->result_array();
}
I am building an application in which i am using the famous fullCalendar. Now i need to populate my calendar using the values that are present in my database. I am trying to do it using an AJAX call. But its not working . Any help would be appreciated.
This is my jsp . The one which im using to display my calendar.
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/jquery.min.js'></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<link href="jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" media = "all"/>
<link rel='stylesheet' type='text/css' href='cssdata/fullcalendar.css' />
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script type='text/javascript' src='js/fullcalendar.js'></script>
<pre>
<script>
$(document).ready(function() {
getEvents();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
events: [ getEvents()
/* {
title: 'All Day Event',
start: new Date(y, m, 1)
}, */
]
});
});
function getEvents(){
alert("hi");
$.post("http://localhost:8080/S360Portal/eventAjax.action", {},
function(data){
alert("Hello");
alert(data);
});
}
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Try using eventSources instead of events, this considering your function is in fact returning any events. Why not use $.Ajax({}) instead of $.post? It will make your life easier.
Here's an example of how i do it:
EventSources array.
var sources = {
sourceone: {
url: ajaxcallURL(),
type: 'POST',
data: { 'year': y },
cache: false, //this is optional
color: '#6C92A8', //this is optional
textColor: 'white' //this is optional
}
}
In Fullcalendar call I have this:
var calendar = $('#calendar').fullCalendar({
...
eventSources: [sources.sourceone],
...
});
This works for me, notice that I'm returning JSON so if you are returning XML for example you will have to iterate the XML.
Also if your events returns Dates different from the accepted they wont be mapped in the calendar, ( yyyy-mm-dd ) works.
Good Luck
I'm trying to edit a record in jqgrid ( trying to make a call to the server) using the navigator . However, when I click on the submit I'm getting error Status: 'Not Found'. Error code: 404
Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:url value="/main/csList" var="csListUrl"/>
<c:url value="/main/editVevaIndividual" var="editUrl"/>
<c:url value="/main/hostListByApp" var="hostListUrl"/>
<c:url value="/users/create" var="addUrl"/>
<c:url value="/users/update" var="editUrl"/>
<c:url value="/users/delete" var="deleteUrl"/>
<html>
<head>
<title>Individual Records </title>
<!--
<script src="/sam/resources/jqueryMenu/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/sam/resources/jqueryMenu/createMenu.js" type="text/javascript"></script>
<link rel="stylesheet" href="/sam/resources/jqueryMenu/menu.css"/>
-->
<script type='text/javascript' src='<c:url value="/resources/jqueryMenu/jquery-1.3.2.min.js"/>'></script>
<script src= '<c:url value="/resources/jqueryMenu/createMenu.js"/>'></script>
<link rel="stylesheet" href= '<c:url value="/resources/jqueryMenu/menu.css"/>'/>
<script>
$(document).ready(function(){
createMenu($("#content"));
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href='<c:url value="/resources/ui.jqgrid.css"/>' />
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src= '<c:url value="/resources/grid.locale-en.js"/>'></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src='<c:url value="/resources/jquery.jqGrid.src.js"/>'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
var mydata = [
],
grid = $("#list");
grid.jqGrid({
url:'${csListUrl}',
datatype: 'json',
ignoreCase: true,
mtype: 'GET',
colNames:['INDIVIDUAL ID','LAST NAME','FIRST NAME','VENDOR ID','INACTIVE REASON CODE','INACTIVE DATE'],
colModel:[
{name:'individualId',index:'individualId', width:50 },
{name:'lastName',index:'lastName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10} },
{name:'firstName',index:'firstName', width:50,editable:true, editrules:{required:true}, editoptions:{size:10} },
{name:'vendorID',index:'vendorID', width:30,} ,
{name:'inactiveReasonCode',index:'inactiveReasonCode', width:30} ,
{name:'inactiveDate',index:'inactiveDate', width:30}
],
postData: {},
rowNum:10,
rowList:[10,20,40,60],
height: 'auto',
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'individualId',
viewrecords: true,
sortorder: "asc",
editurl:'${editUrl}',
caption:" individual Records",
emptyrecords: "Empty records",
loadonce: true,
loadComplete: function() {},
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "individualId"
}
});
$("#search").click(function() {
var searchFiler = $("#filter").val(), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData,{filters:""});
}
f = {groupOp:"OR",rules:[]};
f.rules.push({field:"lastName",op:"cn",data:searchFiler});
f.rules.push({field:"firstName",op:"cn",data:searchFiler});
grid[0].p.search = true;
$.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
grid.trigger("reloadGrid",[{page:1,current:true}]);
});
grid.jqGrid('navGrid','#pager',
{edit:true, add:false, del:false,refresh:true,view:true},
{}, {}, {},
{ // search
sopt:['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
},
{ // vew options
beforeShowForm: function(form) {
$("tr#trv_id",form[0]).show();
},
afterclickPgButtons: function(whichbutton, form, rowid) {
$("tr#trv_id",form[0]).show();
}
});
});
//]]>
</script>
</head>
<body>
<div style="position:relative; z-index:3;" id="content"></div>
<br></br>
<fieldset >
<input type="text" id="filter"/>
<button type="button" id="search">Search</button>
</fieldset>
<div style="position:relative; z-index:1;">
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
</body>
</html>
the purpose is that after editing the text area in a line, and clicking on another row, the first one should get saved and the row should be restored. The code works till saving the record, but not restoring the edited row after saving.. Please help me to rectify the issue.
<?
if(isset($_GET)){
$startDate = $_GET['start_date'];
$endDate = $_GET['end_date'];
$type = $_GET['type'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="../js/powertip/jquery.powertip.css" />
<script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/powertip/jquery.powertip-1.1.0.min.js"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
</script>
<script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style>
.ratingDetails{
font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;
}
</style>
</head>
<body>
<table id="rowed2"></table>
<div id="prowed2"></div>
<script>
jQuery(document).ready(function(){
var lastSel;
jQuery("#rowed2").jqGrid({
url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>',
datatype: "json",
height:"auto",
colNames:['Booking<br>Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'],
colModel:[
{name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST
{name:'pick_city',index:'pick_city', width:90,align:"left"},
{name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true},
{name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false},
{name:'office_name',index:'office_name', width:150,align:"left",sortable:true},
{name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false},
{name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}},
{name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true},
{name:'act',index:'act',width:100,align:'center',sortable:false}
],
rowNum:15,
rowList:[15,25,50],
pager: '#prowed2',
sortname: 'driver_name',
viewrecords: true,
sortorder: "asc",
subGrid : true,
subGridUrl: 'feedbacks_bookings_rated_pagination.php?booking=424519',
subGridModel: [{
name:['Booked on','Trip Type/ Amount','Driver Details','Local Office Phone','Essential Feedbacks','Other Feedbacks'],
width: [90,90,130,100,160,200]}
],
onSelectRow:
function(id){
//alert(lastSel+"-hi-"+id);
if(id && id!==lastSel){
if (typeof lastSel !== "undefined") {
jQuery("#rowed2").jqGrid('saveRow',lastSel);
jQuery("#rowed2").jqGrid('restoreRow',lastSel);
//jQuery("#rowed2").trigger("reloadGrid");
}
lastSel = id;
}
jQuery(this).jqGrid('resetSelection');
jQuery(this).editRow(id, true);
},
editurl: "feedbacks_bookings_rated_pagination.php",
caption:"Edit Feedback Details",
});
// icons in pagination frame bottom
jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: true,save: true, del: false, reload: true});
jQuery.fn.editRow = function(param) {
var rowid = param;
var booking_id = jQuery("#rowed2").jqGrid ('getCell', param, 'booking_id');
jQuery("#rowed2").jqGrid('editRow',rowid, {
keys : true,
oneditfunc: function() {
}
});
};
jQuery.fn.saveRow = function(param) {
var rowid = param;
jQuery("#rowed2").jqGrid('saveRow',rowid, {
successfunc: function(response) {
//obj = eval('(' + response.responseText + ')');
//$.jgrid.info_dialog('Status','<div class="ui-state-successr"><br>'+obj.responseText +'<br></div>', $.jgrid.edit.bClose,{buttonalign:'center'});
return true;
},
url : "feedbacks_bookings_rated_pagination.php",
mtype : "POST",
});
};
jQuery.fn.restoreRow = function(param) {
var rowid = param;
alert("rstore-"+rowid);
jQuery("#rowed2").jqGrid('restoreRow',rowid, {
afterrestorefunc : function( response ) {
alert("aaaa");
obj = eval('(' + response.responseText + ')');
$.jgrid.info_dialog('Status','<div class="ui-state-successr"><br>'+obj.responseText +'<br></div>', $.jgrid.edit.bClose,{buttonalign:'center'});
return true;
}
});
};
})
function closeAction(bkId){
if(confirm("Are you sure to close the action?")){
//Ok button pressed...
$.post('feedbacks_bookings_rated_pagination.php?action=close',{booking_id: bkId},
function(response){
alert(response.responseText);
$("#rowed2").trigger("reloadGrid");
return true;
},
"json"
);
}
}
// Function to display rating crieteria values as a tooltip on mouseover of Rating caption
function showRatingDetailsToolTip(id) {
$('#rating'+id).data('powertiptarget', 'tooltip'+id);
$('#rating'+id).powerTip({placement: 'e',smartPlacement: true,mouseOnToPopup: true});
}
</script>
</body>
</html>
Again.. given below a rectified code.. here also, the previous row not getting back from edit mode on clicking next row. Can you tell me the problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
<script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
</script>
<script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="rowed2"></table>
<div id="prowed2"></div>
<script>
jQuery(document).ready(function(){
var lastSel;
jQuery("#rowed2").jqGrid({
url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>',
datatype: "json",
height:"auto",
colNames:['Booking<br>Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'],
colModel:[
{name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST
{name:'pick_city',index:'pick_city', width:90,align:"left"},
{name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true,editable:true,edittype:'text'},
{name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false},
{name:'office_name',index:'office_name', width:150,align:"left",sortable:true},
{name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false},
{name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}},
{name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true},
{name:'act',index:'act',width:100,align:'center',sortable:false}
],
rowNum:15,
rowList:[15,25,50],
pager: '#prowed2',
sortname: 'booking_id',
viewrecords: true,
sortorder: "asc",
onSelectRow:
function(id){
if(id && id!==lastSel){
if (typeof lastSel !== "undefined") {
jQuery("#rowed2").jqGrid('saveRow',lastSel,{url : "feedbacks_bookings_rated_pagination.php",mtype : "POST"});
jQuery(this).jqGrid('editRow',lastSel, false);
}
lastSel = id;
}
jQuery(this).jqGrid('editRow',id, true);
},
editurl: "feedbacks_bookings_rated_pagination.php",
caption:"Edit Feedback Details",
});
// icons in pagination frame bottom
jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: false,save: false, del: false, reload: true});
})
</script>
</body>
</html>
=====================
At last I could find the real problem.
It is not with the content of 'action_taken' field, but with the just previous field. In that I put a table inside a hidden DIV under the actual content, used for a tooltip content.
What happens is that after editing the action_taken field in next column and the server response is received, the edited content of 'action_taken' field was set to the content and title of the first TD of this table in previous column. Also, the edited column does not return from edit mode. If I remove the table from previous column, everything works ok. I tried with different id/style class for the table, but no change. What could be the problem? The table structure in previous column causing the issue is given below.
<table id='ratingdata32380' width='189' border='0' cellpadding='0' cellspacing='0' bordercolor='#000000' bgcolor='#4f9de2'>
<tr><td align='left' valign='middle' class='ratingDetails'>Was On Time?</td><td align='center' valign='middle' class='ratingDetails'>aaaa</td></tr>
</table>
The class 'ratingDetails' is nothing but just the font definition.
.ratingDetails{font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;}
Any idea ?
You should decide which behavior should have your grid. You you want save the data from the previously editing row then you should call saveRow. If you want to discard the current changes and to restore the previous one you should call restoreRow. Calling of restoreRow after saveRow like you do currently inside of onSelectRow callback has no sense.
So if I understand correctly what you want to implement you should remove the line with saveRow which is before calling of restoreRow.
I'm trying out very simple search popup on the JqGrid. Please see the code below. There are few issues:
The popup comes up with AND/OR and [+] controls at the very top. See screenshot below: (from FF 4)
You can click on [-] button to remove the very first (and only) filter row. It shouldn't be allowed. First filter row should never be allowed to be removed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JQGRID Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function() {
createGrid();
});
function createGrid() {
$("#jqgrid-table").jqGrid({
colNames:['First Name', 'Last Name', 'Age', 'IQ', 'Type'],
colModel:[
{name:'firstName',index:'firstName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'age', index:'age', width:50},
{name:'iq', index:'iq', width:50, stype:'select', searchoptions: {dataUrl:'/api/domains/putcalldomain'}},
{name:'type', index:'type', width: 56}
],
width: 800,
datatype:'local',
pager: '#pager2',
viewrecords: true,
caption:"JSON Example"
});
var searchOptions = {
caption: 'Filter...',
multipleSearch:true,
closeAfterSearch:true,
closeAfterReset:true,
Find: 'Filter'
};
jQuery("#jqgrid-table").jqGrid('navGrid',
'#pager2',
{search:true, edit:false, add:false, del:false, refresh:false},
null, null, null, searchOptions
);
var data = getData();
for(var i =0; i < data.length; i++) {
var r = data[i];
jQuery("#jqgrid-table").addRowData(r.id, r);
}
}
function getData() {
return [
{id:1, firstName: 'John', lastName: 'XXX', age:'30', iq:'200', type: 'Nice'},
{id:2, firstName: 'Ashley', lastName:'YYY', age:'31', iq:'210', type:'Nicer'},
{id:3, firstName:'Smith', lastName:'ZZZ', age:'23', iq:'90', type:'Nicest'}
];
}
</script>
</head>
<body>
<div id='jqgrid-div'>
<table id='jqgrid-table'></table>
<div id="pager2"></div>
</div>
</body>
</html>
I suggest to overwrite the internal reDraw method used by filtering (see my another answer for more description). To do this you should include in the searchOptions which you use the beforeShowSearch event handler with the following implementation:
beforeShowSearch: function($form) {
var searchDialog = $form[0],
oldrReDraw = searchDialog.reDraw, // save the original reDraw method
doWhatWeNeed = function() {
$('input.delete-rule:first',searchDialog).unbind('click');
// set fucus in the last input field
setTimeout(function() {
// set fucus in the last input field
$('input[type="text"]:last',searchDialog).focus();
}, 50);
}
searchDialog.reDraw = function() {
oldrReDraw.call(searchDialog); // call the original reDraw method
doWhatWeNeed();
}
doWhatWeNeed();
}
You can see the corresponding demo here.