I am using jqgrid 4 and i have got a lot of help from stackoverflow and especially Oleg.
The problem is that when i open my edit form for the first time the comboboxes do not show the selected values. And this happen only in the first open of the edit form. After the first time the comboboxes are set to the right value in the edit form. I have used things from this page : jqgrid incorrect select drop down option values in edit box but problem still exists.
I changed all things Oleg proposed.
The first problem that i mentioned still exists. Moreover the datepicker in the first field of the form does not appear until i press in a another field first.
My update code is
the html is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>Grid</title>
<?php
session_start();
include("showprogram.php");
?>
<link rel="stylesheet" type="text/css" media="screen" href="src/css/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="src/css/ui.jqgrid.css" />
<script type='text/JavaScript' src='Scripts/calendar.js'></script>
<!-- <script type='Text/JavaScript' src='scw.js'></script> -->
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<style type="text/css">
#list1 {
font-size : 12px
}
body {z-index: 1000}
</style>
<script type='text/JavaScript'>
function showprogram () {
document.all.Calculation.style.visibility = "visible";
try {
ShowSchedule('#list1', '#pager1');
} catch (e) {
alert("An exception occurred while fetching the schedule. Error name: " + e.name + ". Error message: " + e.message);
}
}
</script>
</head>
<body>
<div id="grid" style="display:inline;">
<table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager1" class="scroll" style="text-align:center;"></div>
</div>
</body>
and dataform is:
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
include ('../library/opendb.php');
$result = mysql_query("SELECT COUNT(*) AS count FROM customers ");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT ID as id,Day AS Day, CustomerName AS name
FROM customers";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") )
{
header("Content-type: application/xhtml+xml;charset=utf-8");
}
else
{
header("Content-type: text/xml;charset=utf-8");
}
$et = ">";
echo "<?xml version='1.0' encoding='utf-8'?$et\n";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>" . $total_pages . "</total>";
echo "<records>".$count."</records>"; // be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
echo "<row id='". $row[id]."'>";
echo "<cell>". $row[id]."</cell>";
echo "<cell>". $row[Day]."</cell>";
echo "<cell>". iconv("ISO-8859-7", "UTF-8", $row[name])."</cell>";
echo "<cell> Is this a button?<input type='button' value='E' onload=\"alert('ok');\"/> </cell>";
echo "</row>";
}
echo "</rows>";
include ('../library/closedb.php');
and the add.php is
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
$oper = $_POST['oper'];
if(!$sidx) $sidx =1;
$Day = $_POST['Day'];
$name = $_POST['name'];
include ('../library/opendb.php');
//Set at the right position
$name=$name+1;
if($oper == 'add')
{
$sql="INSERT INTO Customers (
Day,
CustomerName VALUES (
'".$Day."',
'".$name."')";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}
elseif($oper == 'del')
{
$id = $_POST['id'];
$id=mysql_real_escape_string($id);
$sql="DELETE FROM customers
WHERE ID=
'".$id."'";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}
elseif($oper == 'edit')
{
$id = $_POST['id'];
$id=mysql_real_escape_string($id);
$sql="UPDATE customers SET
Day = '".$Hmera."',
CustomerName = '".$name."'
WHERE ID = '".$id."'";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}
and showprogram.php:
function getDatacustomer()
{
include ('../library/opendb.php');
$SQL = "SELECT CustomerName FROM customers ORDER BY CustomerID ;";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$count = mysql_num_rows($result);
include ('../library/closedb.php');
$value="";
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
if ($i!=($count-1)){
$value=$value.''.$i.':'. $row[CustomerName].';';}
else
{$value=$value.''.$i.':'. $row[CustomerName].'';}
$i=$i+1;
}
$value='value:"'.$value.'"';
return $value;
}
?>
<script type='text/JavaScript'>
function ShowSchedule(list, pager) {
jQuery().ready(function (){
jQuery(list).jqGrid({
url:Url,
datatype: "xml",
height: "auto",
colNames:['id','Day','name'],
colModel:[
{name:'id',index:'id', width:40, align:'right', editable:false, editoptions:{readonly:true,size:10}},
{name:'Day',index:'Day', width:70, align:'right', editable:true, sorttype: 'date', editrules:{date:true},
editoptions:{dataInit:function(elem){setTimeout(function()
{$(elem).datepicker({dateFormat:"yy-mm-dd"});},100);}}},
{name:'name',index:'name', width:120, align:'right', editable:true, edittype:'select',editoptions:{<?php echo getDatacustomer() ?>}},
],
rowNum:30,
rowList:[10,20,30],
pager: pager,
sortname: 'Day',
viewrecords: true,
sortorder: "asc",
loadonce: true,
shrink: true,
//toppager: true, for toppage pager
editurl:'add.php',
caption:"Grid",
forceFit : true
});
jQuery(list).jqGrid('navGrid',pager,{edit:true,add:true,del:true,search:false,view:true, reload:true},
{width:600,height:"auto",
reloadAfterSubmit:true,
closeAfterEdit: true,
recreateForm: true,
onClose: function() {jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');},
beforeShowForm: function(form) {
var dlgDiv = $("#editmod" + jQuery(list)[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = "260 px";
dlgDiv[0].style.left = "600 px";
}
},
{width:600,height:"auto",reloadAfterSubmit:true,closeAfterAdd: true,recreateForm: true, onClose: function() {
jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');},beforeShowForm: function(form) {
var dlgDiv = $("#editmod" + jQuery(list)[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = "260 px";
dlgDiv[0].style.left = "600 px";
}
},
{width:600,height:"auto",reloadAfterSubmit:true,recreateForm: true},
{height:280,reloadAfterSubmit:true},
{width:650,height:"auto",reloadAfterSubmit:true,recreateForm: true, beforeShowForm: function(form) {
var dlgDiv = $("#viewmod" + jQuery(list)[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = "100 px";
dlgDiv[0].style.left = "600 px";
}},
{});
jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');
});
}
The table i want in the grid from the database is like:
id Day CustomerName
1 2011-09-09 John
Please help!
