i have difficulty to get the search work. for my first horizontal tab with first vertical tab, the datagrid work fine with search etc.
But when come to third, 4th, the search input field passing empty data, my option has no value.
Can anyone help?
here is my code
home.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Material DO</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<script type='text/javascript'>
$(document).ready(function(){
$tabsp = $('#tabsProject');
var pselectedindex = -1;
var mselectedindex = -1;
$(window).resize(function(){
$("div.easyui-tabs").each(function() {
if($(this).is(':visible'))
$(this).tabs('resize',{})
})
$('table.easyui-datagrid').datagrid('resize');
});
$tabsp.tabs({
onSelect: function(title, index){
if (pselectedindex != index)
{
var p = $tabsp.tabs('getSelected'); // get the selected tab panel
var pid = p.panel('options').id.substr(4);
pselectedindex = index;
mselectedindex = -1;
$("div.easyui-tabs").each(function() {
if($(this).is(':visible'))
if($(this).attr('id') != 'tabsProject')
$(this).tabs({
onSelect: function(title, index){
if (mselectedindex != index)
{
var mp = $(this).tabs('getSelected');
var mid = mp.panel('options').id.substr(5);
mselectedindex = index;
mp.panel({
href:'load.do.grid.php?ProjectId='+ pid + '&MaterialId='+ mid
})
console.log($(this).attr('id') + ': '+ $('#tab').attr('id'));
}
}
})
});
};
}
})
})
</script>
<body>
<?php
require_once("connectdb.php");
require_once("..\common\html.php");
$psql = "
SELECT
ProjectId,
ProjectName,
GroupName
FROM
Project
WHERE Status <> 1
ORDER BY
ProjectName
";
$msql = "
SELECT
MaterialId,
MaterialName
FROM
materialtype
ORDER BY
MaterialName
";
echo '<div class="easyui-tabs" id="tabsProject" tabWidth="150px" >';
if ($presult = $mysqli->query($psql) )
while($prow = $presult->fetch_assoc() )
{
echo '<div title="'.$prow['ProjectName'].'" id="tab-'.$prow['ProjectId'].'"
data-options="fitcolumns:true", fit:true, border:false '.
' style="padding:5px;" >';
echo '<div id="mat-'.$prow['ProjectId'].'" class="easyui-tabs" tabPosition="left" headerWidth="200" style="padding:5px;"
data-options="fitcolumns:true, border:true ">';
if ($mresult = $mysqli->query($msql) )
while( $mrow = $mresult->fetch_assoc() )
{
echo '<div title="'.$mrow['MaterialName'].'" id="'.$prow['ProjectId'].'-'.$mrow['MaterialId'].'" style="padding:5px;" >';
echo '</div>';
};
echo '</div> <!-- M-'. $prow['ProjectId'] .'tabs -->';
echo '</div>';
};
echo '</div> <!--class="easyui-tabs"-->';
?>
</body>
</html>
here is the code for load.do.grid.php
<?php
require_once('connectdb.php');
echo '
<table id="dgMaterial" title="Material DO" class="easyui-datagrid" style="width:auto; height:auto" toolbar="#tb"
data-options=" singleSelect:true,
fitColumns:true,
pagination:true,
rownumbers:true,
pageList:[20,50,100],
pageSize:20,
pagePosition:\'both\',
url:\'get.do.json.php\',
queryParams:{
ProjectId:\'' . $_GET['ProjectId'] . '\',
\'MaterialId\':\'' . $_GET['MaterialId'] . '\',
keywords: $(\'#keywords\').val(),
Rec: $(\'#Rec\').val()
}
">';
echo '<thead>';
echo' <tr>';
/* custom define header with specific width size */
echo '<th data-options=" field:\'DoId\'" width="60">Do Id</th>';
echo '<th data-options=" field:\'DoDate\'" width="100" align="center">Do Date</th>';
echo '<th data-options=" field:\'DoNumbering\'" width="300">Do Numbering</th>';
echo '<th data-options=" field:\'Received\'" width="60" align="center">Received</th>';
echo '<th data-options=" field:\'ProjectName\'" width="60" align="left">ProjectName</th>';
echo '<th data-options=" field:\'MaterialName\'" width="100" align="left">MaterialName</th>';
echo '</tr>';
echo' </thead>
</table>';
// search box
echo '
<div id="tb" style="padding:3px; ">
<Label for="MultipleDo">DO Number:</label>
<input id="MultipleDo" name="MultipleDo" value="" style="line-height:18px; width:200px; margin:0 3px;">
<Label style="margin-left:10px;"for="Received">Received:</label>
<select id="Received" name="Received" >
<option value="0">No</option>
<option value="1">Yes</option>
<option value="2">Both</option>
</select>
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
</div>';
?>
<script type='text/javascript'>
function doSearch(){
$("table.easyui-datagrid").datagrid('load',{
"MultipleDo": $("#MultipleDo").val(),
"Received": $("#Received").val(),
"ProjectId": "<?php echo $_GET['ProjectId']; ?>",
"MaterialId": "<?php echo $_GET['MaterialId']; ?>",
}
);
console.log($('#MultipleDo').attr('id') +': '+ $('#MultipleDo').val());
console.log($('#tb').attr('id'));
}
</script>
and here is my last file for get.do.json.php
<?php
require_once("connectdb.php");
$MultipleDo = isset($_POST['MultipleDo']) ? mysql_real_escape_string($_POST['MultipleDo']) : '';
$Received = isset($_POST['Received']) ? mysql_real_escape_string($_POST['Received']) : '0';
$ProjectId = isset($_POST['ProjectId']) ? mysql_real_escape_string($_POST['ProjectId']) : '0';
$MaterialId = isset($_POST['MaterialId']) ? mysql_real_escape_string($_POST['MaterialId']) : '0';
if($Received == 2)
$Received = '';
$page = isset($_POST['page']) ? (int)($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? (int)($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
$where = " DoNumbering like '%$MultipleDo%' and Received like '%$Received%' ";
$sql = "
SELECT
count(*) as total
FROM
do
INNER JOIN
project ON do.projectid = project.projectid
INNER JOIN
materialtype ON do.materialid = materialtype.materialid
WHERE ".$where.
" AND
do.ProjectId = '$_POST[ProjectId]'
AND
do.MaterialId = $_POST[MaterialId]
";
if( $rs = $mysqli->query($sql) )
$result = $rs->fetch_assoc();
$sql = "
SELECT
DoId,
DATE_FORMAT(DoDate, '%d/%m/%Y') as 'DoDate',
DoNumbering,
IF(Received = 0,'No','Yes') as Received,
do.ProjectId,
project.ProjectName,
do.MaterialId,
materialtype.MaterialName
FROM
do
INNER JOIN
project ON do.projectid = project.projectid
INNER JOIN
materialtype ON do.materialid = materialtype.materialid
WHERE ".$where.
" AND
do.ProjectId = '$_POST[ProjectId]'
AND
do.MaterialId = $_POST[MaterialId]
ORDER BY
DoDate DESC
LIMIT $offset, $rows
";
if ( $rs = $mysqli->query($sql) )
$result['rows'] = $rs->fetch_all(MYSQLI_ASSOC);
echo json_encode($result);
?>
