Selected values in comboboxes are not marked in the first open of edit form
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 开发者_Go百科{
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!
Your code have too many errors. I recommend you to compare your code with the code from My First Grid part of jqGrid documentation. I point only on some from there because the list of all errors will be too long:
- You have to include
<!DOCUMENT ...>line as the first line of your HTML file which generate your PHP file. The simplest form has HTML5:<!DOCUMENT html>. Currently you use quirks mode which is not supported by jQuery UI and jqGrid. Moreover you include currentlyshowprogram.phpevent before<html>. - You include some JavaScript or CSS files many times in different versions (minimized and not minimized), full code and a part of the same code and so on. If you include for example
jquery-ui-1.8.1.custom.cssyou don't need includeui.datepicker.css. If you includeui.jqgrid.cssyou don't need includejqModal.css. Including bothjquery.jsandjquery-1.3.2.min.jsis the next error. Includingui.datepicker.js,jquery-ui-1.8.1.custom.min.jsandjquery.ui.datetimepicker.min.jsinstead of just onejquery-ui-1.8.1.custom.min.jsis the next error. If you includesjquery.jqGrid.min.jsit would be wrong to include non-minimized parts of the same codegrid.common.js, ...jqDnR.js. I can continue... - You should call the methods like
jQuery(list).setGridParamand so on only inside ofjQuery(document).ready(function () {...});(the usage of old styledjQuery().ready(function (){...});or out of the block is wrong). - Setting jqGrid parameter and calling
jQuery(list).trigger("reloadGrid")before the grid will be created (beforejQuery(list).jqGrid({...});) is wrong. - The code
jQuery(list).jqGrid({...});create the grid. It create many internal structures and create many HTML elements of the grid like title, column headers, pager and so on. The grid should be created only once. If you want to reload the data in the grid you should usejQuery(list).trigger('reloadGrid'). In your current code, for example in theonCloseevent handler you just callShowSchedulewhich will try to create the grid one more time, which is wrong.
So you should examine your fill code and redesign how you divide the code in ports. I can repeat that the above list of errors is not full. You have to examine your code vary careful and rewrite many its parts.
UPDATED: You modified code are still a mix from PHP code and JavaScript code. I don't use PHP myself, but I suppose that your problem with selection of the items in the comboboxes exist only because of the mix.
The only syntax error in your code is the usage of trailing commas at the end of colModel definition (,] is illegal). If I just use your code with some simple XML input and some simple result of <?php echo getDatacustomer() ?> (I use value:'John:John;Bob:Bob') the code works see the demo.
More better would be to make clear separation of JavaScript code from the PHP code. I would recommend you to use dataUrl property of editoptions. In the case the corresponding part of PHP code should generate
<select><option value='John'>John</option><option value='Bob'>Bob</option></select>
instead of value:"John:John;Bob:Bob".
UPDATED 2: The option
ajaxEditOptions: {cache: false}
should solve your problem if I understand your current problem correctly.
加载中,请稍侯......
精彩评论