I am not sure what's missing in my code. I have a jqGrid loading json data. I am using jqGrid version 5.2.0.
Below is my html and script.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Data Grids</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jqGrid jQuery css -->
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" href="../static/plugins/jqGrid/css/jquery-ui.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" href="../static/plugins/jqGrid/css/ui.jqgrid.css" />
<!-- jqGrid jQuery js -->
<script type="text/javascript" src="../static/plugins/jqGrid/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../static/plugins/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../static/plugins/jqGrid/js/i18n/grid.locale-en.js"></script>
</head>
<body>
<table id="myGrid"></table>
<div id="myGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#myGrid").jqGrid({
url: "/pages/php/getGridData.php",
datatype: "json",
mtype: "GET",
colNames: ["Asset Number", "Cost", "Source", "Project ID", "Task ID", "PO Number"],
colModel: [
{ name: "ASSET_ID", width: 80 },
{ name: "FIXED_ASSETS_COST", width: 90, align: "right" },
{ name: "FEEDER_SYSTEM_NAME", width: 80 },
{ name: "PROJECT_ID", width: 80 },
{ name: "TASK_ID", width: 80 },
{ name: "PO", width: 80, sortable: false }
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
id: "id",
cell: "cell"
},
width: 700,
height: 'auto',
pager: "#myGridPager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "ASSET_ID",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Source Lines (FAR)"
});
$("#myGrid").jqGrid('navGrid','#myGridPager',{edit:false,add:false,del:false});
});
</script>
</body>
</html>
The json data is as follows:
{"page":1,"total":1,"records":10,"rows":[{"id":2432447,"cell":[2432447,1450410,57.23,"ORACLE PROJECTS",835711,3219040,"86652"]},{"id":2432451,"cell":[2432451,868512,0,"ORACLE PROJECTS",741610,3126807,"84605"]},{"id":2432453,"cell":[2432453,868512,5403.6,"ORACLE PROJECTS",741610,3126807,"84605"]},{"id":2432455,"cell":[2432455,1814091,0,"ORACLE PROJECTS",840842,3210792,"87986"]},{"id":2432456,"cell":[2432456,1814091,600,"ORACLE PROJECTS",840842,3210792,"87986"]},{"id":2432460,"cell":[2432460,841706,0,"ORACLE PROJECTS",767616,3226001,"85666"]},{"id":2432465,"cell":[2432465,1814095,0,"ORACLE PROJECTS",840842,3210293,"87986"]},{"id":2432466,"cell":[2432466,1814095,600,"ORACLE PROJECTS",840842,3210293,"87986"]},{"id":2432901,"cell":[2432901,1231634,0,"ORACLE PROJECTS",741610,3190901,"84605"]},{"id":2432915,"cell":[2432915,1231634,4651.72,"ORACLE PROJECTS",741610,3190901,"84605"]}]}
The page loads but with no data. Is there anything I am doing wrong?
From the code that you have posted it seems like href attribute is not set to a valid URL.
For example :
<link rel="stylesheet" href="../static/plugins/jqGrid/css/jquery-ui.css" />
(Similarly for other JS and CSS links added in the link and script tags)
Changing the links to a valid url will most probably solve your issue.
The problem was my php code (getGridData.php) which even though was giving the correct json output, but was also outputting some warnings and notices.
I had to disable E_WARNING and E_NOTICE errors in my php.
error_reporting(E_ERROR | E_PARSE);
I still have to take care of my php code not just to ignore the errors. But in the meantime, this worked.
Thanks Pratyay for your response.
Update This is a complete update to my question
<!doctype html>
<html>
<meta charset="utf-8">
<meta name="author" content="Amsul - http://amsul.ca">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Pickadate.js</title>
<link rel="stylesheet" href="../../lib/themes/default.css">
<link rel="stylesheet" href="../../lib/themes/default.date.css">
<link rel="stylesheet" href="../../lib/themes/default.time.css">
<!--[if lt IE 9]>
<script>document.createElement('section')</script>
<style type="text/css">
.holder {
position: relative;
z-index: 10000;
}
.datepicker {
display: block;
}
</style>
<![endif]-->
<body>
<?php
require 'connect-db.php';
try{
$stmt = $db->query("SELECT ddate FROM testdates");
$result = $stmt->fetchAll(\PDO::FETCH_ASSOC);
}catch(\PDOException $e){
echo $e->getMessage();
}
$json_array = json_encode($result)
?>
<section class="section">
<form>
<fieldset>
<h3><label for="datepicker_id">Pick a date.</label></h3>
<input
id="datepicker_id"
class="datepicker"
name="date"
type="text"
value=""
data-value="">
<br><br><br><br><br>
<h3><label for="timepicker_id">Pick a time</label></h3>
<input
id="timepicker_id"
class="timepicker"
value=""
type="time"
name="time">
<!-- valuee="2:30 AM"
data-value="0:00" -->
<!-- <button type="button">Disable all dates</button>
<input class="button" type="submit" value="open"> -->
</fieldset>
</form>
<div id="container"></div>
</section>
<script src="../jquery.1.9.1.js"></script>
<script src="../../lib/picker.js"></script>
<script src="../../lib/picker.date.js"></script>
<script src="../../lib/picker.time.js"></script>
<script src="../../lib/legacy.js"></script>
<script type="text/javascript">
//datepicker
var disdates = <?php echo $json_array; ?>
var $input = $( '.datepicker' ).pickadate({
formatSubmit: 'yyyy/mm/dd',
min: true,
container: '#container',
// editable: true,
closeOnSelect: true,
closeOnClear: false,
disable: [ disdates
]
})
var picker = $input.pickadate('picker')
// picker.set('select', '14 October, 2014')
// picker.open()
// $('button').on('click', function() {
// picker.set('disable', true);
// });
</script>
<script type="text/javascript">
//timepicker
var dtimes = new Date(2015,11,28,5,30);
var $timeinput = $( '.timepicker' ).pickatime({
disable: [
[2,0],
dtimes
]
})
var timepicker = $timeinput.pickatime('picker')
</script>
</body>
</html> // i must thank users in php chatroom for helping me fix the errors.
That above, is a page where you see a calendar, and some dates are disabled, which are fetched from the database. I'm using this picker
disable: [
[2015,29,9], // disables today strangely month -1 and only accepts yyy,mm,dd
[some other array]
]
})
In my databese 'ddate' is varchar, no primary key, no unique id, nothing, containing
2015,9,30
2015,9,31
2015,10,30
the values aren't being passed or something from mysql to javascript or something, and i guess i want multidimentional array.
what i want the javascript array to have is month -1 because as I explained above, in disable option to disable this day, you have to enter last month number. and if first month, means 12.
Note I want to use the same for timepicker but I guess I could do on my own if I understand the issue with calendar
I assume, that your db content is:
ddate: varchar()
Values stored in table testdates (as strings):
2015-10-29
2015-10-15
2015-10-10
Select is still as is plus create a string for array build to js
try{
$stmt = $db->query("SELECT ddate FROM testdates");
$db_ddates = $stmt->fetchAll(\PDO::FETCH_ASSOC);
$js_ddates = "";
foreach ($db_ddates as $row => $record) {
$js_ddates .= '"' . $record['ddate'] . '",';
}
}
catch(\PDOException $e) {
echo $e->getMessage();
}
Now use that inside building the script part
// take dates as array of strings from db
var ddates_str_arr = [ <?php echo $js_ddates; ?> ];
// build dates array for picker
var disdates = [];
for (var i = 0; i < ddates_str_arr.length; i++) {
disdates.push(new Date(ddates_str_arr[i]));
}
// just use it in picker
var $input = $( '.datepicker' ).pickadate({
formatSubmit: 'yyyy/mm/dd',
min: true,
container: '#container',
// editable: true,
closeOnSelect: true,
closeOnClear: false,
disable: disdates
});
ATTENTION: I have not test it but just write those lines from mind. There may some typing erratas but should work in general.
UPDATE:
Not sure about picker but give this a try too instead of the above script part
// just use it in picker
var $input = $( '.datepicker' ).pickadate({
formatSubmit: 'yyyy/mm/dd',
min: true,
container: '#container',
// editable: true,
closeOnSelect: true,
closeOnClear: false,
disable: [ <?php echo $js_ddates; ?> ]
});
Trying to recreate a simple example of html page with a Highstock plot with no success. Seem to do the same thing as in multiple examples I found online, but the plot is still empty.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>This is title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
marginRight: 130,
marginBottom: 25,
},
title: {
text: 'test plot'
},
xAxis: {
type: 'datetime',
categories: []
},
yAxis: {
text: 'value'
},
series: [{name:'myline',data:'<?php $data = array(2,3,1,4); echo json_encode($data) ?>'}]
}
chart = new Highcharts.Chart(options);
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
</body>
</html>
If I change the series line to
series: [{name:'myline',data:[2,3,1,4]}]
it works. So, the problem must be on this line and with the php script.
However, I can't make it to work with php. Tried printing a string with properly formatted numbers, json_encrode and some other things, but can't seem to make it work. All I see in such case is chart with no line on it. Printing out result from php execution script doesn't seem to produce the output of the script as well, only an empty line... What am I doing wrong?
It turned out to be a stupid mistake due to the fact that I'm a noob in this. I had to set up a web server on my computer (I used LAMP) and put my php file into /var/www/ directory. Apter that this data:<?php $data = array(2,3,1,4); echo json_encode($data); ?> works as it should.
I have some code for a tootlip in a calendar. i want to be able to display html in the tool tip is this possible? every time i try and change it to accept html it crashes it only allows text right now and i do not understand how to change it to allow for html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type='text/javascript' src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type='text/css'>
.pink > a {
background-color: pink !important;
background-image:none !important;
}
.green > a {
background-color: green !important;
background-image: none !important;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var Event = function(text, className) {
// would like to convert this to allow for html
this.text = text;
// this.html = text; // does not work
this.className = className;
};
var events = {};
events[new Date("01/01/2013")] = new Event("New Years Day", "pink");
events[new Date("12/25/2012")] = new Event("<B>Merry</b> Christmas", "green");
console.dir(events);
$("#dates").datepicker({
beforeShowDay: function(date) {
var event = events[date];
if (event) {
return [true, event.className, event.text];
}
else {
return [true, '', ''];
}
}
});
});//]]>
</script>
</head>
<body>
<div id="dates"></div>
</body>
</html>
thank you in advance for any code or help you may provide
Johnny
The title attribute does not allow html code.
But there are several frameworks out there that allow you to modify the hover.
I used jQuery Tooltip
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
$('*').tooltip();
Here you will see that they tooltip has been modified and the bold is in place.
http://jsfiddle.net/Morlock0821/WqrMK/
Hi guys i m trying to pass value from my php to highchart dataset but its not working help needed.
<?php $count2=$decode[nextPage][totalResults];
echo("<input type=hidden name=aaqib value=".$count.">");
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
var j= $("input[name=aaqib]").val();
var k=100;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: [j,k,
pointStart: 1
}]
});
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Hi guys i m trying to pass value from my php to highchart dataset but its not working help needed.
i need to use value of J and K in data so that they are shown in highcharts
Store your php vars into a js vars and then pass to highcharts.
Fix the following too.
echo('<input type="hidden" name="aaqib" value="{$count}"/>');
Update according to this comment.
series: [{
data: [[j,k]]
}]
Tthis demo should help you.
why are you echoing the input above your doctype declaration? I think that belongs inside your body. And you should also '-signs around the attribute values in you echo. something like this:
<?php $count2=$decode[nextPage][totalResults];
echo("<input type='hidden' name='aaqib' value='$count'>");
?>
Some browsers might threat this correctly, but it's actualy invalid html