I use the code below to get data from a database. No issues here.....
$query = "SELECT * FROM takenlijst";
$from = 0;
$to = 999;
$query .= " LIMIT ".$from.",".$to;
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$taken[] = array(
'taaknummer' => $row['taaknummer'],
'naam' => $row['naam'],
'taak' => $row['taak'],
'prioriteit' => $row['prioriteit'],
'datum' => $row['datum']
);
}
echo json_encode($taken);
However, when i use the code below i get no data. What am i doing wrong?
<html lang="en">
<head>
<link rel="stylesheet" href="../../jquery/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../jquery/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jquery/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'taaknummer', type: 'string'},
{ name: 'naam', type: 'string'},
{ name: 'taak', type: 'string'},
{ name: 'prioriteit', type: 'string'},
{ name: 'datum', type: 'string'}
],
url: 'http://www.site.com/management/takenlijstdata.php',
cache: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columns: [
{ text: 'Taaknummer', datafield: 'taaknummer', width: 250},
{ text: 'Naam', datafield: 'naam', width: 150 },
{ text: 'Taak', datafield: 'taak', width: 180 },
{ text: 'Prioriteit', datafield: 'prioriteit', width: 200 },
{ text: 'Datum', datafield: 'datum', width: 120 }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>
The echo displays the data correctly. Even when i output the data to a txt file it can be read but not when i try to read it from this code.
Related
Everytime I load Datatables I get this error. Anyone has any idea why?
DataTables warning: table id=example - Ajax error. For more
information about this error, please see http://datatables.net/tn/7
The link:
http://cts360.ctscloudapp.com/simple.html
simple.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Editor example - Basic initialisation</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.14/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/dataTables/css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/dataTables/examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="/dataTables/examples/resources/demo.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"> </script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js"> </script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"> </script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"> </script>
<script type="text/javascript" language="javascript" src="/dataTables/js/dataTables.editor.min.js"> </script>
<script type="text/javascript" language="javascript" src="/dataTables/examples/resources/syntax/shCore.js"> </script>
<script type="text/javascript" language="javascript" src="/dataTables/examples/resources/demo.js"> </script>
<script type="text/javascript" language="javascript" src="/dataTables/examples/resources/editor-demo.js"> </script>
<script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "/queries/vendor.php",
table: "#example",
fields: [ {
label: "Company:",
name: "company"
}, {
label: "Brief Description:",
name: "briefDescription"
}, {
label: "Contact:",
name: "contact"
}, {
label: "Contact Title:",
name: "contactTitle"
}, {
label: "Work:",
name: "work"
}, {
label: "Mobile:",
name: "mobile"
}, {
label: "Email:",
name: "email"
}
]
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "/queries/vendor.php",
columns: [
{ data: "company" },
{ data: "briefDescription" },
{ data: "contact" },
{ data: "contactTitle" },
{ data: "work" },
{ data: "mobile" },
{ data: "email" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Company</th>
<th>Brief Description</th>
<th>Contact</th>
<th>Contact Title</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
</tr>
</thead>
</table>
</div>
</section>
</body>
</html>
vendor.php
<?php
/*
* Example PHP implementation used for the index.html example
*/
// DataTables PHP library
include( "../dataTables/php/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'vendors' )
->fields(
Field::inst( 'company' ),
Field::inst( 'briefDescription' ),
Field::inst( 'contact' ),
Field::inst( 'contactTitle' ),
Field::inst( 'work' ),
Field::inst( 'mobile' ),
Field::inst( 'email' )
)
)
->process( $_POST )
->json();
I have the following code in browser side.
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/jqGrid.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$("#tblevents").jqGrid({
url: "getGridData.php",
datatype: "json",
mtype: "POST",
postData: {
search: function() { return 'manage'; }
},
colModel: [
{name:'id',index:'id',label:'ID', width:10},
{name:'eventdate',index:'eventdate',label:'Event date', width:100, align:'center', sorttype:'date'},
{name:'reportdate',index:'reportdate',label:'Report date', width:180, align:'left'},
{name:'eventdescription',index:'eventdescription',label:'Description', width:430}
],
rowNum: 10,
rowList: [10,20],
pager: '#pager',
height: '100%',
width: 'autowidth',
viewrecords: true,
gridview: true,
caption: "ATM-ANS Occurrences"
});
});
</script>
</head>
<body>
<div class="mycenter">
<table id='tblevents'></table>
<div id='pager'></div>
</div>
</body>
</html>
The server side code.
<?php
$sqconn = "mysql:host=localhost;dbname=eoccurrence";
$dbh = new PDO($sqconn, 'user', '');
$page = $_POST['page'];
$limit = $_POST['rows'];
$sidx = $_POST['sidx'];
$sord = $_POST['sord'];
if(!$sidx) {$sidx =1;}
try {
$SQLQues = "SELECT COUNT(*) AS count FROM event";
$cmd = $dbh->query($SQLQues, PDO::FETCH_ASSOC);
$res = $cmd->fetchAll();
$count = $res[0]['count'];
if( $count > 0 && $limit > 0) {$total_pages = ceil($count/$limit);}
else {$total_pages = 0;}
if ($page > $total_pages) {$page=$total_pages;}
$start = $limit*$page - $limit;
if($start <0) {$start = 0;}
$SQLQues = "SELECT ID, date_format(eventdate, '%d-%m-%Y %H:%i') AS eventdate, " .
"date_format(reportDate, '%d-%m-%Y') AS reportdate, SUBSTRING(eventdescription,1,70) AS eventdescription " .
"FROM event" .
" ORDER BY event.eventdate DESC LIMIT $start , $limit";
$cmd = $dbh->query($SQLQues, PDO::FETCH_BOTH);
$i=0;
while ($row = $cmd->fetch()) {
$responce->rows[$i]['id']=$row['ID'];
$responce->rows[$i]['cell']=array($row['eventdate'],$row['reportdate'],$row['eventdescription']);
$i++;
}
echo json_encode($response);
return;
} catch (PDOException $exc) {
echo $exc->getTraceAsString();
}
The $response that is encoded from php to browser is shown in the following image, capture with XDebug.
The resulting grid is as shown below, with no row data at all.
What I'm doing wrong?
<script type="text/javascript">
$(document).ready(function () {
$("#tblevents").jqGrid({
url: "getGridData.php",
datatype: "json",
mtype: "POST",
colNames: ["Id","eventdate", "reportdat", "event
description"],
colModel: [
{name:'id'},
{name:'eventdate'},
{name:'reportdate'},
{name:'eventdescription'}
],
pager: "#pager",
rowNum: 10,
rowList: [10,20],
sortorder: "asc",
height: 'auto',
viewrecords: true,
gridview: true,
caption: "ATM-ANS Occurrences"
});
});
I have been trying to make a graph plot with flot, and have ran into a problem.I Think the problem is with the way m using the php variable with flot Aside from that the graph isn't showing so I must have done something wrong. Below is the graph code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.categories.js"></script>
</head>
<body>
<?php
//CONNECTING TO THE SERVER
$servername = "XXX";
$username = "YYY";
$password = "ZZZ";
conn = new mysqli($servername, $username, $password);
$sql = "SELECT NAME, AGE FROM pro_db";
$result = $conn->query($sql);
$wt=array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
//storing the values in the array
$wt[]=$row;//is this the right way
}
} else {
echo "0 results";
}
?>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script type="text/javascript">
$(function () {
//accessing the array
var data = <?php echo $wt; ?>;
$.plot($("#placeholder"), [data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center" }
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
});
</script>
</body>
</html>``
Here's completely working example i made. If something doesn't work - there's some error with data. Try var_dump how your $wt array looks like in the end;
$data = [
['Andrew', 31],
['Helen', 29],
['Dasha', 24],
['Denis', 23]
];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="canvas" style="width: 600px; height: 400px;"></div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.categories.js"></script>
<script>
var data = <?php echo json_encode($data) ?>;
$("#canvas").plot([data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
</script>
</body>
</html>
I am using codeigniter. When I call an ajax request to the page by giving the full path to file, it works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this example is demonstrated how to implement server filtering, sorting and paging with jqxGrid.</title>
<link rel="stylesheet" href="http://localhost/jqwidgets-ver3.2.1/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'ShipName', type: 'string'},
{ name: 'ShipAddress', type: 'string' },
{ name: 'ShipCity', type: 'string' },
{ name: 'ShipCountry', type: 'string' }
],
cache: false,
url: 'http://localhost/CodeIgniter_2.1.4/index.php/blog/controllerfunction',
filter: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
},
sort: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
},
root: 'Rows',
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
source: dataadapter,
width: "100%",
filterable: true,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function(obj)
{
return obj.data;
},
columns: [
{ text: 'Ship Name', datafield: 'ShipName'},
{ text: 'Address', datafield: 'ShipAddress'},
{ text: 'City', datafield: 'ShipCity'},
{ text: 'Country', datafield: 'ShipCountry'}
]
});
});
</script>
</head>
<body class='default'>
<h1>Shipment Records</h1>
<div style="width: 1000px" id="jqxgrid"></div>
</body>
</html>
works fine with
url: 'http://localhost/CodeIgniter_2.1.4/application/view/serverfiltering_paging_and_sorting_data.php',
but
url: 'http://server/CodeIgniter_2.1.4/index.php/controllername/controlerfunction',
shows an error : SyntaxError: JSON.parse: unexpected character
I did not make any other change in the code.
I have been looking around for an answer to this but have not been able to find one. I am currently taking data from a mssql database and everything seems to populate fine on the php end but here is the code anyway
$responce->total = $total_pages;
$responce->page = $page;
$responce->records = $count;
$i=0;
while($row = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
$responce->rows[$i]['id']=$row[Cell1];
$responce->rows[$i]['cell']=array($row[Cell1],$row[Cell2],$row[Cell3]);
$i++;
}
echo $json_encode($responce);
And my json file comes out like this:
{"total":"1","page":"1","records":"1","rows":[{"id":"1","cell":["1","2","3"]}]}
And finally my HTML looks like this:
<link rel="stylesheet" type="text/css" media="screen" href="css/south-street/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link href="css/ui.multiselect.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.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/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#list").jqGrid({
url: "retrieve.php",
datatype: "json",
mtype: "POST",
colNames: ["Cell1", "Cell2", "Cell3"],
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
jsonReader: { repeatitems: false },
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
scroll:1,
sortname: Cell1",
sortorder: "asc",
sortable:true,
viewrecords: true,
gridview: true,
ignoreCase:true,
autowidth:true,
ondblClickRow: function (id) {
$(this).jqGrid('viewGridRow', id, { caption: "Server Information" });
}
});
});
</script>
If someone could please help me to figure out why my grid wont properly populate I would really appreciate it!
The main errors in your code are the following:
you should fix syntax error sortname: Cell1" to sortname: "Cell1".
remove jsonReader: { repeatitems: false } which is wrong with thze format which you use.
remove the second version of jQuery. Either jquery.js or jquery-1.9.0.min.js should be used.
May be your JS file are conflicted.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
You should be use only one JS instead use of both jquery file.
and Change sequence of js file like this way..
<script src="js/jquery-1.9.0.min.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.layout.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
Please remove "," from colModel
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
to
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' }
],
I think it solve your all problem.