Help.
Datagrid EasyUI Not Work
Error :
jquery.easyui.min.js:11286 Uncaught TypeError: Cannot read property 'length' of undefined
at Object.renderTable (jquery.easyui.min.js:11286)
at Object.render (jquery.easyui.min.js:11263)
at _6e1 (jquery.easyui.min.js:10149)
at HTMLTableElement.<anonymous> (jquery.easyui.min.js:11055)
at Function.each (jquery.min.js:2)
at m.fn.init.each (jquery.min.js:2)
at Object.loadData (jquery.easyui.min.js:11054)
at m.fn.init.$.fn.datagrid (jquery.easyui.min.js:10816)
at jquery.easyui.min.js:10770
at Object.success (jquery.easyui.min.js:11526)
Code in : https://pastebin.com/Y2L8UyeV
Controller Pencatatan.php
class Pencatatan extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('url');
$this->load->model('M_Pencatatan');
}
function index(){
$data['title'] = 'Pencatatan Transaksi';
$data['content'] = 'V_Pencatatan';
$this->load->view('Template/full',$data);
}
function data()
{
$data['datatables'] = $this->M_Pencatatan->show_keuangan_all();
echo json_encode($data);
}
}
Model M_Pencatatan.php
function show_keuangan_all(){
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'id_keuangan';
$order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
$offset = ($page-1) * $rows;
$result = array();
$result['total'] = $this->db->get('keuangan')->num_rows();
$row = array();
$this->db->limit($rows,$offset);
$this->db->order_by($sort,$order);
$criteria = $this->db->get('keuangan');
foreach($criteria->result_array() as $data)
{
$row[] = array(
'id'=>$data['id_user'],
'keterangan'=>$data['keterangan'],
'value'=>$data['value'],
'tanggal'=>$data['tanggal_transaksi']
);
}
$result=array_merge($result,array('rows'=>$row));
return $result;
}
}
Full View
<html>
<head>
<meta charset="UTF-8">
<title>Pencatatan</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>asset/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>asset/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>asset/demo/demo.css">
<script type="text/javascript" src="<?php echo base_url(); ?>asset/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>asset/jquery.easyui.min.js"></script>
<script type="text/javascript">
window.setTimeout("waktu()",1000);
function waktu() {
var tanggal = new Date();
setTimeout("waktu()",1000);
document.getElementById("jam").innerHTML = tanggal.getHours();
document.getElementById("menit").innerHTML = tanggal.getMinutes();
document.getElementById("detik").innerHTML = tanggal.getSeconds();
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding-left:5px;padding-right:5px">
<table width="100%">
<tr>
<td style="width:50%;"><font size="5px;" color="#00004d"><b>Pencatatan Keuangan</b></font></td>
<td style="width:50%;" align="right">
</td>
</tr>
<tr>
<td><font size="2px;" color="#7c7c50">Selamat Datang, </font></td>
<td align="right"><font size="3px;" color="#00004d"><b><?php echo date('d F Y'); ?> <Font id="jam" style=""></Font>:
<Font id="menit"></Font>:
<Font id="detik"></Font></b></font></td>
</tr>
</table>
</div>
<div data-options="region:'west',split:true,title:'Main Menu'" style="width:150px;" class="easyui-accordion">
<div title="Transaction" data-options="iconCls:'icon-search'">
<ul class="easyui-tree">
<li>
<span>Transaction</span>
<ul>
<li>
<a style="color:black;text-decoration:none;" href="<?php base_url();?>Pencatatan" data-options="plain:true" onclick="addPencatatan()">Pencatatan</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false,split:false" style="height:25px;background:#A9FACD;padding:0px;"><font size="2px;" color="#00004d"><b><center>© Tuyullie</center></b></font></div>
<!-- Sub Main -->
<div data-options="region:'center',title:'Web Dashboard'">
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:100%;height:100%">
<?php if(isset($content)) {$this->load->view($content);} ?>
</div>
</div>
<script type="text/javascript">
function addPencatatan(){
$('#tt').tabs('add',{
title: 'Pencatatan',
closable: true
});
}
</script>
<!-- End Sub Main -->
</body>
</html>
V_Pencatatan.php View
<table id="dg"></table>
<!-- Toolbar -->
<div id="toolbar">
</div>
<script>
$(document).ready(function(){
$('#dg').datagrid({
border: false,
title: "Pencatatan",
fit: true,
class: "easyui-datagrid",
pagination: true,
pageSize: 50,
striped: true,
sortName: "id_user",
sortOrder: "desc",
pageList: [50, 100, 150, 200, 250],
rownumbers: true,
fitColumns: true,
singleSelect: true,
url:'Pencatatan/data',
columns:[[
{field:'id',tittle:'ID',width:100},
{field:'keterangan',tittle:'Keterangan',width:100},
{field:'value',tittle:'Value',width:100},
{field:'tanggal',tittle:'Tanggal',width:100}
]]
})
})
</script>
Related
after I post it use ajax,the value of radio disappear,but I want the radio part to remember the selection. I need the page to remember the radio button selections when I leaves and returns. Would this require database? If so, how do i implement it? I try to add the select =selected ,but it do not help.
<input value="<?php echo $key; $key++;?>" type="radio" class="radioOrCheck" name="answer<?php echo $num_select;?>"
id="0_answer_<?php echo $num_select;?>_option_<?php echo $key;?>"
below it is the full code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<link href="css/test.css" rel="stylesheet" type="text/css" />
<style>
.hasBeenAnswer {
background: #5d9cec;
color:#fff;
}
</style>
</head>
<body>
<p>
</p>
<div class="main">
<!--nr start-->
<div class="test_main">
<div class="nr_left">
<div class="test">
<form action="" method="post">
<div class="test_title">
<!--
<p class="test_time">
<i class="icon iconfont"></i><b class="alt-1">01:40</b>
</p>-->
<font><?php echo "<input type='button' name='test_jiaojuan' value='sub' onClick='getinput($ans_json,$id_json)'>";?>
</font>
</div>
<div class="test_content">
<div class="test_content_title">
<h2>word</h2>
<p>
<span>has</span><i class="content_lit"><?php echo $cnt_sel;?></i><span>title</span><span>sum</span><i class="content_fs"><?php echo $cnt_sel*10;?></i><span>min</span>
</p>
</div>
</div>
<div class="test_content_nr">
<ul>
<!--begin select-->
<?php
foreach($results as $temp){
$sql_2="SELECT `description`,`input`,`select_id` FROM `select` WHERE `select_id`=?";
$res_2=pdo_query($sql_2,$temp[0]);
$row = $res_2[0];
?>
<li id="qu_0_<?php echo $num_select;?>">
<div class="test_content_nr_tt">
<i><?php echo $num_select;?></i><font>
<p>
<?php
echo $row[0];
?>
</p>
</font>
</div>
<div class="test_content_nr_main">
<ul>
<?php
if ($row[1]) {
$arr = rtrim($row[1],"<br />");
$arr = explode('<br />', $arr);
foreach($arr as $key => $a){
?>
<li class="option">
<input value="<?php echo $key; $key++;?>" type="radio" class="radioOrCheck" name="answer<?php echo $num_select;?>"
id="0_answer_<?php echo $num_select;?>_option_<?php echo $key;?>"
/>
<label for="0_answer_<?php echo $num_select;?>_option_<?php echo $key;?>">
<p class="ue" style="display: inline;"><?php echo strip_tags($a,"<img>");//echo trim($a); ?></p>
</label>
</li>
<?php
}
}
if ($row['hint']) {
?><h4><?php echo $MSG_HINT;?></h4><?php
echo $row['hint'];
}
?>
</ul>
</br></br>
</div>
</li>
<?php
$num_select=$num_select+1;
}
?>
<p>
<?php
?>
</p>
<!--end select-->
</ul>
</div>
</form>
</div>
</div>
<div class="nr_right">
<div class="nr_rt_main">
<div class="rt_nr1">
<div class="rt_nr1_title">
<h1>
<i class="icon iconfont"></i>answer
</h1>
<!-- <p class="test_time">
<i class="icon iconfont"></i><b class="alt-1">01:40</b>
</p>-->
</div>
<div class="rt_content">
<div class="rt_content_tt">
<h2>chose</h2>
<p>
<span>sum</span><i class="content_lit"><?php echo $cnt_sel;?></i><span>answer</span>
</p>
</div>
<div class="rt_content_nr answerSheet">
<ul>
<?php
$temp=1;
for($temp=1;$temp<=$cnt_sel;$temp++){
?>
<li><?php echo $temp;?></li>
<?php
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--nr end-->
<div class="foot"></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.easy-pie-chart.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
$(function() {
$('li.option label').click(function() {
debugger;
var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id');
var cardLi = $('a[href=#' + examId + ']');
if(!cardLi.hasClass('hasBeenAnswer')){
cardLi.addClass('hasBeenAnswer');
}
});
});
$(function() {
$('li.option').click(function() {
debugger;
var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id');
var cardLi = $('a[href=#' + examId + ']');
if(!cardLi.hasClass('hasBeenAnswer')){
cardLi.addClass('hasBeenAnswer');
}
});
});
/*window.onbeforeunload = function(event){
var msg = '';
msg +='do not like?\n';
//msg += '';
return msg;
};*/
function getinput(ans_json,results_json) {
var sum=<?php echo $cnt_sel;?>;
var blank_cnt=0;
var well_cnt=0;
for (var i = 1; i <= sum; i++) {
var radio_name = new String("answer" + i.toString());
var ans_s = $('input:radio[name=' + radio_name + ']:checked').val();
if(!(ans_s)){
blank_cnt++;
}}
//var json = getjson();
var msg = "ok";
if (confirm(msg) == true) {
var radio = new Array();
for (var i = 1; i <= <?php echo $cnt_sel;?>; i++) {
var radio_name = new String("answer" + i.toString());
var ans_s = $('input:radio[name=' + radio_name + ']:checked').val();
if(!(ans_s)){
ans_s=-1;
}
var judge=0;
var answer_true= parseInt(ans_json[i-1]);
var id_true=parseInt(results_json[i-1]);
if(ans_s == answer_true){
judge=1;
}
$.ajax({
type: "GET",
url: "select_ajax.php",
data: {
select_id: id_true,
contest_id:<?php echo $cid;?>,
result:judge
},
success: function(msg){
well_cnt++;
}
});
}
if(well_cnt==5){
alert('success');
}
setTimeout(function (){
window.location.href = "contest.php?cid="+<?php echo $cid;?>;
}, 1000);
} else {
return false;
}
}
</script>
</body>
</html>
You can do it by storing your radio button value in javascript localStorage and then set that localStorage value to your radio button again.
Hi everybody I have the following code. When I run it on a testing environment it works quite fast, but when I deploy in production it takes up to 32 seconds to load all the icons. Could be the queries the problem? Because in testing I have only few records in DB but in production 2 tables have about 9000 entries each... I really don't know how to speed up.. I put everything inside $(document).ready, put some script in the header and 3 in the footer. Or the Ajax call could make everything working slower in production?
Thank you in advance
<?php
ini_set('memory_limit', '-1');
session_start();
include("function.php");
// if ( (empty($_SESSION['email']) ) || (empty($_SESSION['password'])) ){
if ( (empty($_SESSION['email'])) && ($_SESSION['flagVariable'] !== 1) ) {
Header("location: index.php");
}
else {
$conn = connessioneDB();
?>
<!--
*
* Copyright �<?php echo date("Y"); ?>. Poste Italiane. All Rights Reserved.
* Permission to use, copy, modify, and distribute this software and its
* documentation for educational, research, and not-for-profit purposes,
* without fee and without a signed licensing agreement, is hereby granted,
* provided that the above copyright notice, this paragraph and in all copies,
* modifications, and distributions.
*
* Contacts for commercial licensing opportunities:
*
* Author: Daniel
* Reviewed By: Emilio
* Email:
* Mobile:
*
*
-->
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PCMDBtool ver 2.2.0 | REPORTS</title>
<meta name="description" content="A responsive, magazine-like website layout with a grid item animation effect when opening the content" />
<meta name="keywords" content="grid, layout, effect, animated, responsive, magazine, template, web design" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="shortcut icon" href="DataTables/extensions/Buttons/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
<link href="rete/css.css?family=Fjalla+One|Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<!--<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">-->
<script src="rete/jquery-1.12.4.js"></script>
<script src="rete/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="zebra_form.css">
<script type="text/javascript" charset="utf8" src="DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/fnSetFilteringDelay.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="rete/jquery-confirm.min.css">
<script src="rete/jquery-confirm.min.js"></script>
<script language="javascript" type="text/javascript" src="catalog.js"></script>
<link type="text/css" href="css/base.css" rel="stylesheet" />
<link type="text/css" href="css/Spacetree.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="js/jit-yc.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.sumoselect.min.js"></script>
<link rel="stylesheet" href="css/sumoselect.css">
<style type="text/css">
.blurred{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
</style>
</head>
<body>
<div class="container">
<button id="menu-toggle" class="menu-toggle"><span>Menu</span></button>
<div id="theSidebar" class="sidebar">
<?php navigationRole($_SESSION['role_id']); ?>
<button class="close-button fa fa-fw fa-close"></button>
</div>
<div id="theGrid" class="main">
<section class="grid">
<a class="grid__item hvr-border-fade" onclick="" href="#">
<h2 class="title title--preview">Servizi</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i> Elenco Servizi Operativi</span>
</a>
<a class="grid__item hvr-border-fade" onclick="" href="#">
<h2 class="title title--preview">BC</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i> Business Criticality</span>
</a>
<a class="grid__item hvr-border-fade" onclick="" href="#">
<h2 class="title title--preview">Apparati/Servizi</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i>Elenco Apparati / Servizi </span>
</a>
<a class="grid__item hvr-border-fade" onclick="javascript:AssetSoServ()" href="#">
<h2 class="title title--preview">S.O. in Servizi</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i> Vista completa Sistemi Operativi in Servizi</span>
</a>
<a class="grid__item hvr-border-fade" onclick="" href="#">
<h2 class="title title--preview">Tripletta</h2>
<div class="loader"></div>
<span class="category"><i class="fa fa-angle-right" aria-hidden="true"></i> Vista completa Tripletta</span>
</a>
</section>
<section id="content" class="content">
<div class="scroll-wrap">
<script type="text/javascript" class="init">
$(document).ready( function () {
var table = $('#REPORT_SERVIZI').DataTable( {
paging: true,
"processing": true,
"deferLoading": 57,
"deferRender": true,
"scrollY": 350,
"scrollX": true,
"bDestroy": true,
"bRetrieve": true,
"ordering": false,
"iDisplayLength": 100,
"info": true,
"sDom": 'ltipr',
"bDestroy": true
} );
$("#filterboxA").keyup(function() {
table.search(this.value).draw();
});
var tables = $('#TRIPLETTA').DataTable( {
"paging": false,
"bFilter": false,
"processing": true,
"serverSide": false,
"deferLoading": 57,
"deferRender": true,
"scrollY": 300,
"scrollX": true,
"info": false,
"bPaginate": false,
"bRetrieve": true
} );
//tables.fnStandingRedraw();
var tableBC = $('#BC').DataTable( {
paging: true,
"processing": true,
"ajax": "asset_BC.php",
"deferLoading": 57,
"deferRender": true,
"scrollY": 350,
"iDisplayLength": 100,
"scrollX": true,
"bRetrieve": true,
"bDestroy": true,
"ordering": false,
"info": true,
"sDom": 'ltipr',
"bDestroy": true
} );
$("#filterboxE").keyup(function() {
tableBC.search(this.value).draw();
});
tableSA = $('#SA').DataTable(
{
paging: true,
"processing": true,
"ajax": "asset_SA.php",
"deferLoading": 57,
"deferRender": true,
"scrollY": 350,
"iDisplayLength": 100,
"scrollX": true,
"bRetrieve": true,
"bDestroy": true,
"ordering": true,
"info": true,
"sDom": 'ltipr',
"bDestroy": true,
} );
$("#filterboxF").keyup(function() {
tableSA.search(this.value).draw();
});
document.getElementById('filterboxF').addEventListener('keypress', function (e)
{
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
tableSA.rows( { search:'applied' } ).data().each(function(value, index) {
//console.log(value, index);
var array = [];
array.push(value);
//console.log(array, index);
});
}
});
//table.buttons().container().appendTo( $('#stampaXls', table.table().container() ) );
tableSO = $('#SO').DataTable(
{
paging: true,
"processing": true,
"ajax": "asset_SO.php",
"deferLoading": 57,
"deferRender": true,
"scrollY": 350,
"iDisplayLength": 100,
"scrollX": true,
"bRetrieve": true,
"bDestroy": true,
"ordering": true,
"info": true,
"sDom": 'ltipr',
"bDestroy": true,
columns:
[{
title: "Operation",
class:"center" },
{ title: "Nome Servizio",
class:"center" },
{ title: "ID Servizio",
class:"center" },
{ title: "S.O.",
class:"center" },
{ title: "Patch Level",
class:"center" },
{ title: "Valida Dal",
class:"center" },
{ title: "N° di Apparati",
class:"center" }
]
} );
$("#filterboxG").keyup(function() {
tableSO.search(this.value).draw();
});
document.getElementById('filterboxG').addEventListener('keypress', function (e)
{
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
tableSO.rows( { search:'applied' } ).data().each(function(value, index) {
//console.log(value, index);
var array = [];
array.push(value);
//console.log(array, index);
});
}
});
// when a row is clicked, show a popup menu containing all the devices inside a Service
$('#SO tbody').on('click', 'tr', function () {
var data = tableSO.row( this ).data();
//alert( 'You clicked on '+data[0]+'\'s row' );
$.ajax({
type:'POST',
url:'utility3.php',
data: { opServizio: data[0], servizio: data[1], sistOp: data[3], midware: data[4], valido_dal: data[5] },
success: function(msg) {
$('#contextMenuIdConfApparati').fadeIn('slow');
$('#resultApparatiList').html(msg);
},
error: function(err) {
alert('Errore: ' + err);
}
});
} );
//table.buttons().container().appendTo( $('#stampaXls', table.table().container() ) );
} );
function exportSQL(tab){
location.href = "exportSQL.php?tab=" + tab;
}
var path = "<?php echo $_SERVER['REQUEST_URI']; ?>";
history.pushState(null, null, path + window.location.search);
window.addEventListener('popstate', function (event) {
history.pushState(null, null, path + window.location.search);
});
function clearObscuration(liv){
$("#closing").fadeIn();
$("#" + liv).fadeOut("slow", "swing");
}
function Obscuration(a){
$( a ).addClass("blurred");
removeHref();
}
function refreshDati( a ){
$('#' + a ).empty();
}
function exportREPORTS(tab){
location.href = "exportREPORTS.php?tab=" + tab;
}
function exportREPORTS2(tab){
location.href = "exportREPORTS_SA.php?tab=" + tab;
}
function exportREPORTS3(tab){
location.href = "exportREPORTS_SO.php?tab=" + tab;
}
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/fnSetFilteringDelay.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/media/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="DataTables/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<article class="content__item">
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Report Servizi</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca <input type="text" id="filterboxA">
<a style="color: white" href="javascript:exportREPORTS('PCMDB_CAT.REPORTS')"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Tutto</a>
</div>
<?php
echo "<table id=\"REPORT_SERVIZI\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "<thead>";
echo "<tr>\n";
echo "<th>Codice Iniziativa</th>\n";
echo "<th>Servizio Operativo</th>\n";
echo "<th>Owner</th>\n";
echo "<th>Acronimo</th>\n";
echo "<th>Stato</th>\n";
echo "<th>Piattaforma</th>\n";
echo "<th>Service</th>\n";
echo "<th>DR</th>\n";
echo "<th>Cert</th>\n";
echo "<th>Sla D</th>\n";
echo "<th>Sla T</th>\n";
echo "</tr>\n";
echo "</thead>\n";
echo "<tbody>\n";
$stid = oci_parse($conn, "SELECT * FROM PCMDB_CAT.V_SERVIZIO WHERE STATUS!='Da cancelare' AND NOME_SERVIZIO NOT LIKE 'Dummy%'");
oci_execute($stid);
while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS)) {
$qq = "select richiesto_dr from PCMDB_CAT.sic_servizio where id_servizio=".$row['ID_SERVIZIO'];
$stid2 = oci_parse($conn, $qq);
oci_execute($stid2);
$row2 = oci_fetch_array($stid2, OCI_ASSOC);
$DR = $row2['RICHIESTO_DR'];
if ($DR != "Si") { $DR = "No"; }
$ss = "select count(*) from PCMDB_CAT.V_VISTA_COMPLETA where ambiente = 'CERTIFICAZIONE' and id_servizio=".$row['ID_SERVIZIO'];
$stid3 = oci_parse($conn, $ss);
oci_execute($stid3);
$row3 = oci_fetch_array($stid3, OCI_ASSOC);
$numCert = $row3['COUNT(*)'];
if ($numCert > 0) { $CERT = "SI"; } else { $CERT = "NO"; }
echo "<tr>\n";
echo "<td>".$row['CODICE_INIZIATIVA']."</td>\n";
echo "<td>".$row['NOME_SERVIZIO']."</td>\n";
echo "<td>".$row['OWNER']."</td>\n";
echo "<td>".$row['ACRONIMO']."</td>\n";
echo "<td>".$row['STATUS']."</td>\n";
echo "<td></td>\n";
echo "<td>".$row['OPERATION']."</td>\n";
echo "<td>".$DR."</td>\n";
echo "<td>".$CERT."</td>\n";
echo "<td>".$row['SLA_D']."</td>\n";
echo "<td>".$row['SLA_T']."</td>\n";
echo "</tr>\n";
$CERT = "";
}
echo "</tbody>\n";
echo "</table><br>\n";
?>
</article>
<article class="content__item">
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Business Criticality</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca <input type="text" id="filterboxE">
</div>
<?php
echo "<table id=\"BC\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "<thead>";
echo "<tr>";
echo "<th>Apparato </th>\n";
echo "<th>BC </th>\n";
echo "<th>Servizio </th>\n";
echo "<th>Dominio </th>\n";
echo "<th>Indirizzo IP </th>\n";
echo "<th>SO </th>\n";
echo "<th>Assegnato a </th>\n";
echo "<th>Tipo </th>\n";
echo "<th>CED </th>\n";
echo "<th>Stato </th>\n";
echo "<th>Ambiente </th>\n";
echo "</tr>";
echo "</thead>";
echo "</table><br>";
?>
</article>
<article class="content__item">
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Elenco Servizi / Apparati</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca <input type="text" id="filterboxF">
<a style="color: white" href="javascript:exportREPORTS2('PCMDB_CAT.REPORTS')"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Tutto</a>
<a id="partialExport" style="color: white" onclick="var limiter = 0; var arrProva =[]; var arrFinal = []; var count = 0; var countTableRows = tableSA.rows( { search: 'applied' } ).count(); tableSA.rows( { search:'applied' } ).data().each(function(value, index) {
arrProva = [value];
count++;
$.ajax({
type:'POST',
url:'exportREPORTS_SA_Filtered.php',
data: { ok: 1, arrayFiltrato: arrProva, countRows: countTableRows },
success: function(msg) {
$('#downloadPartialExport').html('Download Export Parziale');
$('#downloadPartialExport').attr('href',msg);
$('#downloadPartialExport').css('display','inline-block');
},
error: function(err) {
alert('Errore ' + err);
}
});
});"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Parziale</a>
<a style="color:white; font-weight: bold;" id="downloadPartialExport" href=""></a>
</div>
<?php
echo "<table id=\"SA\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "<thead>";
echo "<tr>";
echo "<th>SERVIZIO</th>\n";
echo "<th>APPARATO</th>\n";
echo "<th>Ambiente </th>\n";
echo "<th>Indirizzo IP </th>\n";
echo "<th>Dominio </th>\n";
echo "<th>Sistema Operativo </th>\n";
echo "<th>Service Pack</th>";
echo "<th>Tipo </th>\n";
echo "<th>CED </th>\n";
echo "<th>ID Config </th>\n";
echo "<th>Operation </th>\n";
echo "</tr>";
echo "</thead>";
echo "</table><br>";
?>
</article>
<article class="content__item">
<div class="modal fade" id="contextMenuIdConfApparati" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Numero di Apparati</h5>
</div>
<div class="modal-body">
<p> </p>
<ul id="resultApparatiList" class="list-group list-group-flush"><!-- list-group e list-group-flush consentono di definire e stilizzare una lista di item -->
</ul>
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="document.getElementById('contextMenuIdConfApparati').style.display = 'none';">Close</button>
</div>
</div>
</div>
</div>
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Elenco Sistemi Operativi inclusi in un Servizio</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca <input type="text" id="filterboxG">
<a style="color: white" href="javascript:exportREPORTS3('PCMDB_CAT.REPORTS')"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Tutto</a>
<a id="partialExport2" style="color: white" onclick="var limiter = 0; var arrFinal = {}; var count = 0; var countTableRows = tableSO.rows( { search: 'applied' } ).count(); tableSO.rows( { search:'applied' } ).data().each(function() {
arrFinal = tableSO.rows( { search:'applied' } ).data();
count++;
});
$.ajax({
type:'POST',
url:'exportREPORTS_SO_filtered.php',
data: { ok: 1, arrayFiltrato: JSON.stringify(arrFinal), countRows: countTableRows },
success: function(msg) {
$('#downloadPartialExport2').html('Download Export Parziale');
$('#downloadPartialExport2').attr('href',msg);
$('#downloadPartialExport2').css('display','inline-block');
},
error: function(err) {
alert('Errore ' + err);
}
});"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Esporta Parziale</a>
<a style="color:white; font-weight: bold;" id="downloadPartialExport2" href=""></a>
</div>
<?php
echo "<table id=\"SO\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "</table><br />";
?>
<button class="close-button"><i class="fa fa-close"></i><span>Close</span></button>
</article>
<article class="content__item">
<h3 class="title title--fullo"> <i class="fa fa-angle-right" aria-hidden="true"></i> Report: Vista Tripletta</h3>
<div style="background: #999; color: white; font-weight: normal; padding: 10px; width: 100%">
Ricerca stringa <input type="text" id="paramic" name="paramic"> <input type="button" value="Trova" onclick="vistaCompletaTripletta()">
</div>
<?php
echo "<table id=\"TRIPLETTA\" class=\"display\" cellspacing=\"0\" width=\"100%\">";
echo "<thead>";
echo "<tr>";
echo "<th>Servizio</th><th>Sottoservizio</th><th>Funzione</th>";
?>
<script>
function vistaCompletaTripletta(){
var paramic = $("#paramic").val();
$.ajax({
type: "GET",
url: "tripletta.php",
data: {
"param": paramic
},
success: function(chicco){
$("#TRIPLETTA").html(chicco);
},
});
//$('#TRIPLETTA').dataTable().fnDestroy();
var table = $('#TRIPLETTA').DataTable( {
"paging": false,
"bFilter": false,
"processing": true,
"serverSide": false,
"deferLoading": 57,
"deferRender": true,
"scrollY": 300,
"scrollX": true,
"bPaginate": false,
"info": false,
"bRetrieve": true
});
}
</script>
</article>
</div>
</section>
</div>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/json2.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<?php } ?>
The header.php has a <div id="content"></div> and then will load the page user.php
Q1: Is javascript coding on the header.php can not interact with the loaded content?
Therefore I put the js code on the loaded page, but i found a little bit strange.
Q2:
The paging function is working, suppose it is on page 4.
After I editting one of the row, the page go back to first page. I want to keep it on page 4.
< 1 2 3 4 5 6>
I want to store the current link as a text within a after i click the paging, however the link is stored first and then page will refresh and clear the data.
The href of the paging links will look like
localhost://blog/index.php/admin/users/show/10
localhost://blog/index.php/admin/users/show/20
localhost://blog/index.php/admin/users/show/30
Please point out the solution or suggest another better solution
$("input[name=submit]").click(function() {
$(this).parents('.alert-box').hide();
$form = $(this).parent('form');
$.post(
$form.attr('action'),
$form.find(':input').serializeArray(),
function(data) {
$("#content").html(data);
}
);
});
View:header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="<?= $css; ?>bootstrap.css" rel="stylesheet" type="text/css">
<link href="<?= $css; ?>basic/basic.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<?= $js; ?>jquery.js"></script>
<script type="text/javascript" src="<?= $js; ?>jquery_validate.js"></script>
<script type="text/javascript" src="<?= $js; ?>form_control.js"></script>
<script type="text/javascript" src="<?= $js; ?>additional-methods.min.js"></script>
</head>
<body>
<style>
#content{
background-color: #D0D0D0;
float:left;
width:80%;
}
#main-frame{
width:100%;
}
#list{
width:18%;
float:left;
}
#delete-alert-box{
background-color: #269abc;
position: absolute;
z-index: 99999;
display: none;
}
#edit-alert-box{
background-color: #269abc;
position: absolute;
z-index: 99999;
display: none;
}
body{
font-size:2em;
}
</style>
<script language="javascript">
$(document).ready(function() {
init();
$('.open').click(function(e) {
e.preventDefault();
$.post($(this).attr('href'), function(data) {
$('#content').html(data);
});
});
});
function init() {
$.post(
"<?php echo site_url("admin/users/show");?>", function(data) {
$("#content").html(data);
}
);
}
</script>
<div id="header">
<div id="logo">
</div>
<?php if ($this->AuthModel->check_admin_log()) { ?>
Logout
<?php }
?>
</div>
<ul id="list">
<li>
Users Manage
</li>
<li>
Group Manage
</li>
<li>
Post Mange
</li>
<li>
System Setting
</li>
<li>
<a href="<?php echo site_url('logout/admin') ?>" >Logout</a>
</li>
</ul>
<div id="content" class="box"></div>
view:users.php
<table border="1">
<tr><th>User Id</th><th>User Name</th><th>Email</th><th>Registeration Date</th><th>Group</th><th>State</th><th>Operation</th></tr>
<?php foreach ($users as $user): ?>
<tr>
<td><?= $user->id; ?></td>
<td><?= $user->username; ?></td>
<td><?= $user->email; ?></td>
<td><?= mdate('%Y-%m-%d', $user->registeration_time); ?></td>
<td><?= $user->user_type; ?></td>
<td><?= $user->account_status; ?></td>
<td>
<button type="button" value="<?php echo $user->id; ?>" name="delete">X</button>
<button type="button" value="<?php echo $user->id; ?>" name="edit">edit</button>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php echo $links ?>
<div id="delete-alert-box" class="alert-box">
<div class="cancel">X</div>
<h3>Are you sure to delete the account?</h3>
<form action="<?php echo site_url('admin/users/delete') ?>" id="deleteForm">
<input type="hidden" value="" name="user_id">
<input type="button" value="Yes" name="submit">
<input type="button" value="No" name="cancel">
</form>
</div>
<div id="edit-alert-box" class="alert-box">
<div class="cancel">X</div>
<h3>Edit User:<span id="username"></span></h3>
<form action="<?php echo site_url('admin/users/edit') ?>" id="editForm">
<table>
<tr>
<td>Group</td>
<td>
<select name="group" id="group">
<option value="1">Nomal User</option>
<option value="2">Amin</option>
</select>
</td>
</tr>
<tr>
<td>State</td>
<td>
<select name="state" id="state">
<option value="1">Activated</option>
<option value="2">Non-Activated</option>
<option value="3">Blocked</option>
</select>
</td>
</tr>
</table>
<input type="hidden" value="" name="user_id">
<input type="button" value="Yes" name="submit">
<input type="button" value="No" name="cancel">
</form>
</div>
<script>
$(document).ready(function() {
$(".cancel").click(function() {
$(this).parent('.alert-box').hide();
});
$("input[name=cancel]").click(function() {
$(this).parents('.alert-box').hide();
});
$("button[name=delete]").click(function() {
var $user_id = $(this).attr('value');
if ($user_id !=<?php echo $this->session->userdata('user_id') ?>) {
$("#delete-alert-box").show();
$('#delete-alert-box').find('input[type=hidden]').attr('value', $user_id);
}
});
$("button[name=edit]").click(function() {
var $user_id = $(this).attr('value');
if ($user_id !=<?php echo $this->session->userdata('user_id') ?>) {
$("#edit-alert-box").show();
var $tr = $(this).parents('tr');
var $tds = $tr.find('td');
$('#edit-alert-box').find('input[type=hidden]').attr('value', $user_id);
$('#group').find('option').each(function(index) {
$(this).removeAttr('selected');
});
$('#group').find("option[value=" + get_group_code($($tds[4]).html()) + "]").attr('selected', 'selected');
$('#state').find("option[value=" + get_account_code($($tds[5]).html()) + "]").attr('selected', 'selected');
}
});
$("input[name=submit]").click(function() {
$(this).parents('.alert-box').hide();
$form = $(this).parent('form');
$.post(
$form.attr('action'),
$form.find(':input').serializeArray(),
function(data) {
$("#content").html(data);
}
);
});
$('.paging a').click(function(e) {
e.preventDefault();
$.post($(this).attr("href"), function(data) {
$("#content").html(data);
});
});
});
function get_group_code(name) {
switch (name) {
case "Normal User":
return 1;
case "Admin":
return 2;
}
}
function get_account_code(name) {
switch (name) {
case "Activated":
return 1;
case "Non-Activated":
return 2;
case "Blocked":
return 3;
}
}
</script>
Controller: admin/users.php
function pagination() {
$this->load->library('pagination');
$config['base_url'] = site_url('admin/users/show');
$config['total_rows'] = $this->UsersModel->get_num_rows();
$config['per_page'] = '10';
$config['uri_segment'] = 4;
$config['full_tag_open'] = '<p class="paging">';
$config['full_tag_close'] = '</p>';
$this->pagination->initialize($config);
return $this->pagination->create_links();
}
public function show() {
$data['users'] = $this->UsersModel->get_users(10, $this->uri->segment(4, 0));
$data['links'] = $this->pagination();
$this->load->view('admin/users', $data);
}
public function delete() {
$user_id = $this->input->post('user_id');
if (!$this->UsersModel->delete_user($user_id)) {
echo "Unknown error";
}
$this->show();
}
public function edit() {
$user_id = $this->input->post('user_id');
$state = $this->input->post('state');
$group = $this->input->post('group');
$data = array(
'id' => $user_id,
'account_status_code' => $state,
'group_status_code' => $group
);
if (!$this->UsersModel->edit_user($data)) {
echo "Unknown error";
}
$this->show();
}
The paging function is working, suppose it is on page 4. After I
editting one of the row, the page go back to first page. I want to
keep it on page 4.
When opening that 4-th page in a browser, you can save its number in session and then after editing you can read that value you stored in session i.e - 4.
#session_start();
function indexAction()
{
$_SESSION['curr_page'] = 4; // or take it from $_GET
}
function saveAction(){
// .... do stuff....
header('location: page.php?page=' . $_SESSION['curr_page']);
}
first the best way to do paging is via get, to get the url friendly and rotating the User in case it needs to pass it on.
you need set data in console.log(), for view if data this value,
if the expected values are coming up to the date, try switching by append html:
example.
$ ("# content") html ('.');
$ ("# content") append (date).;
Using JQuery Mobile I want to pop a dialog box where the user can enter in search filters and then when they submit the query show the jqmobile grid(trirand) inside a modal window. Is this possible. Here is my code below:
qr.php
<?php require_once '../auth.php'; require_once '../jqSuitePHP/jq-config.php'; // include the PDO driver class require_once '../../jqSuitePHP/php/jqGridPdo.php'; // Connection to the server $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Tell the db that we use utf-8 $conn->query("SET NAMES utf8"); if(isset($_REQUEST['a'])) { //get asset information $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); $sql = "SELECT asset_no, dept_id as dept, short_desc, `LOTO #` as loto FROM mfg_eng_common.machine WHERE asset_no ='".$_REQUEST['a']."'"; $result = $conn->query($sql); $row = $result->fetch(PDO::FETCH_ASSOC); //check to see if active work order exists in MWO system for current asset //status_id of 50 mean Approved/Closed $sql = "SELECT count(*) woCnt FROM mfg_eng_mwo.mwo WHERE asset_id ='".$_REQUEST['a']."' AND status_id != 50"; $result = $conn->query($sql); $woCnt = $result->fetch(PDO::FETCH_ASSOC); } else { header("Location: http://rworley-laptop.dayton-phoenix.com/dpg/mwo/forms/MWO.php"); } ?> <!DOCTYPE HTML> <html lang="en-US"> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript"> function getWOCnt() { var cntval = <?php echo $woCnt['woCnt'];?>; if(cntval > 0) { if (confirm(" There are already active work order(s) for asset <?php echo $_REQUEST['a']?>. \n To see active work orders:\n Click Cancel and then click 'Update Work Orders'. \n\n To enter a new work order for asset <?php echo $_REQUEST['a']?> \n Click OK .")) { window.open("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>", "new"); /* $(function () { $("#newMWO").on('click', (function (event) { event.preventDefault(); var loadVars=(encodeURI("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>")); var dialogName= $("#mwoForm").load(loadVars); $(dialogName).dialog({ autoOpen: false, resizable: true, modal: true, bigframe: true, height: 600, width: 1000, overflow: scroll, resizable: true, title: "MWO New Work Order" }); dialogName.dialog('open'); return false; })); }); */ } } else { window.open("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>", "new"); /* $(function () { $("#newMWO").on('click', (function (event) { event.preventDefault(); var loadVars=(encodeURI("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>")); var dialogName= $("#mwoForm").load(loadVars); $(dialogName).dialog({ autoOpen: false, resizable: true, modal: true, bigframe: true, height: 600, width: 1000, overflow: scroll, resizable: true, title: "MWO New Work Order" }); dialogName.dialog('open'); return false; })); }); */ } }; </script> </head> <body> <div data-role="page" data-theme="b" align="center"> <div data-theme="a" data-role="header"> <h1>Maintenance Work Orders</h1> <img alt="<?php echo $_REQUEST['a']?>" src="../../Machine Pictures/<?php echo $row['dept']?>/<?php echo $row['asset_no']?>.jpg" height="240" width="300"/> <b><br><?php echo $row['short_desc']?></b> </div><!-- /header --> <br> <div data-theme="c" data-content-theme="d" > <hr> <?php echo "PM Procedure" ?> <b>|</b> <?php echo "Loto Procedure" ?> </div> <div data-role="collapsible-set" data-theme="b" data-content-theme="d" > <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> <a id="newMWO" name="newMWO" data-role="button" data-inline="true" target="_blank" onclick=getWOCnt() > New Work Order </a> </li> </ul> <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> Update Work Order </li> </ul> <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> <a href="../../mwo/MWO_mobile.php?a=<?php echo $_REQUEST['a']?>" data-role="button" data-inline="true" data-rel="dialog" target="mwoSearch" data-transition="slidedown" > Search Work Orders </a> </li> </ul> </div> <?php if(!($_POST)) { echo " <a href='#popupBasic' data-rel='popup' data-role='button' data-inline='true'>Quick Search</a> <div data-role='popup' id='popupBasic' data-transition='flip' > <a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a> <form action='#' method='POST'> <div data-theme='a' data-role='header'> <h2>Look Up MWO</h2> </div> <p> Problem<textarea name='search_prob' data-theme = 'a' data-content-theme = 'd' rows = '3' cols = '50' id = 'search_prob' /></textarea> </p> <p> Solution<textarea name='search_sol' data-theme = 'a' data-content-theme = 'd' rows = '3' cols = '50' id = 'search_sol' /></textarea> </p> <p id = 'submit-area'> <input type='submit' data-theme='b' value='Search' id = 'sub1'/> </p> </form> </div> "; } else { echo " <ul data-role='listview' data-inset='true' align='center' data-filter='false' data-theme='b'> <li> <a href=\"QS.php?a=".$_REQUEST['a']."\" data-role='button' data-inline='true' data-rel='dialog' data-transition='slidedown'> Qucick Search Results </a> </li> </ul>"; } ?> <div data-role="footer" data-theme="a"> <h4>Dayton-Phoenix Group, Inc.</h4> </div><!-- footer --> </div><!-- page --> </body> </html>
QS.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MWO Quick Search</title>
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/ui.jqgridmobile.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/shCoreEclipse.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/shThemeEclipse.css" />
<script src="../../jquerymobile.jqGrid/js/jquery.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/jquerymobile.jqGrid.min.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/jquery.mobile.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/grid.locale-en.js" type="text/javascript"></script>
</head>
<body>
Paging, sorting and searching
</body>
</html>
quickSearch2.php
<!DOCTYPE html>
<html>
<body>
<div id="page" data-role="page" data-theme="b">
<div data-role="header" data-theme="b" style="margin-bottom: 10px">
<h1> MWO Quick Search Results</h1>
Home
</div>
<!-- HTML table Definition -->
<table id='grid'></table>
<div id='pager'></div>
<!-- Java Scruipt Code -->
<script type='text/javascript'>
var a = <?php echo json_encode($_REQUEST['a']); ?>;
var prob = <?php echo json_encode($_REQUEST['search_prob']); ?>;
jQuery('#grid').jqGrid({
"hoverrows":false,
"viewrecords":true,
//"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
"gridview":true,
"url":"../../mwo/mobile/quicksearch.php?a=" + a + "&search_prob=" + prob,
"loadonce": true,
"rowNum":10,
"height":200,
"autowidth":true,
"sortname":"mwo_id",
"rowList":[10,30,40],
"datatype":"json",
"colModel":[
{"name":"e", "index":"empty", "sorttype":"int", "hidden":true,"width":50,"editable":true},
{"name":"MWO #", "index":"mwo_id", "sorttype":"int", "key":true,"width":80,"editable":true},
{"name":"DPG #", "index":"asset_id", "sorttype":"string", "width":80, "editable":true},
{"name":"Assigned to", "index":"assigned_id", "sorttype":"string", "width":80, "editable":true},
{"name":"Entered", "index":"entered_time", "sorttype":"datetime", "width":80, "editable":true,"datefmt":"m/d/Y", "searchoptions":{sopt:['eq']}, "formatter":"date","formatoptions":{"srcformat":"Y-m-d H:i:s","newformat":"m/d/Y"}},
{"name":"Problem", "index":"long_desc", "sorttype":"string", "width":80, "editable":true},
{"name":"Solution", "index":"solution", "sorttype":"string", "width":80, "editable":true}
],
"pager":"#pager"
});
</script>
</div>
</body>
</html>
json data being used:
{"page":1,"total":2,"records":13,"rows":[{"mwo_id":"1302271211","cell":["","1302271211","38315","-1","2013-07-08 11:13:19","approved test",""]},{"mwo_id":"1302271213","cell":["","1302271213","38315","-1","2013-07-11 09:26:26","yo momma is so fattest","how fat is she? she's so fat she left the house in heels and came back in flip-flops"]},{"mwo_id":"1302271214","cell":["","1302271214","38315","-1","2013-07-12 12:13:55","july test",""]},{"mwo_id":"1302271215","cell":["","1302271215","38315","-1","2013-07-08 08:59:56","test","update2"]},{"mwo_id":"1302271216","cell":["","1302271216","38315","-1","2013-07-09 06:14:02","test",""]},{"mwo_id":"1302271217","cell":["","1302271217","38315","-1","2013-07-08 09:01:30","yep testing","no answer yet"]},{"mwo_id":"1302271218","cell":["","1302271218","38315","-1","2013-07-09 09:59:46","new test of email system",""]},{"mwo_id":"1302271219","cell":["","1302271219","38315","","2013-07-08 12:33:09","email new test",""]},{"mwo_id":"1302271221","cell":["","1302271221","38315","12","2013-07-11 13:20:55","ANOTHER TEST OF NEW ...WITH EMAIL","AND THE ANSWER IS ....."]},{"mwo_id":"1302271222","cell":["","1302271222","38315","","2013-07-11 09:29:58","test...add issue",""]},{"mwo_id":"1302271223","cell":["","1302271223","38315","","2013-07-11 13:11:15","testing",""]},{"mwo_id":"1302271224","cell":["","1302271224","38315","7","2013-07-11 13:27:32","test with auto assign","no solution its all good"]},{"mwo_id":"1302271226","cell":["","1302271226","38315","7","2013-07-12 12:05:02","Meeting test",""]}]}
I am new to PHP and JEasy UI.
I am actually running the demo application of JEasy UI Grid.
Whereas I am not getting the data from Php file to Grid.
Any Idea or suggestion please...!!
Below is My Code:
index.php
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
</div>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
url="http://www.jeasyui.com/tutorial/app/crud/get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
New User
Edit User
Remove User
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
Save
Cancel
</div>
<script type="text/javascript">
var url;
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('destroy_user.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
</script>
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>
</body>
</html>
PHP Code URL
http://www.jeasyui.com/tutorial/app/crud/get_users.php
to get the data from datagrid you need to code like this
public function get_user(){
/*Default request pager params from jeasyUI*/
$offset = isset($_POST['page']) ? intval($_POST['page']) : 1;
$limit = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$search = isset($_POST['search']) ? $_POST['itemid'] : '';
$offset = ($offset-1)*$limit;
//change this line to yours
$data = $this->user_model->get_user($offset,$limit,$search);
$i = 0;
$rows = array();
foreach ($data ['data'] as $r) {
$rows[$i]['first_name'] = $r->first_name;
$rows[$i]['last_name'] = $r->last_name;
$rows[$i]['phone'] = $r->phone;
$rows[$i]['email'] = $r->email;
$i++;
}
//keys total & rows is required on jEasyUI
$result = array('total'=>$data['count'],'rows'=>$rows);
echo json_encode($result);
}
more complete example here