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.
I have an FTP setup on zymic.com. I have a jsonfile names testJson.json and a php file named index.php (obviously the default). I have some temperature data in the testJson.json file coming from a sensor. I want to display that onto the website (index.php) using highcharts. I have both testJson.json and index.php file on the same directory.
Although I believe that I am doing right but I am not getting the results. Below is my code of index.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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('testJson.json', function(data) {
// Create temperature chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'Temperature graph in °C'
},
series : [{
name : 'Temperature',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
</head>
<body>
<script src="Highstock-1.3.2/js/highstock.js"></script>
<script src="Highstock-1.3.2/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
I think you need to put your script after you load the hightstock.js and exporting.js
I'm trying to bind a JQXListbox to JSON data and display two fields in the result.
I want to access the datafields in the source object as strings in order to concatenate them so as I can set the resulting string as the displayMember property of jqxListBox. I've tried calling ToString() on the source.datafields[x] array but that doesn't work either.
I'm not sure if the terminology was correct there. Thanks for any help you can give.
Here is the code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="scripts/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css">
<link href="scripts/jqwidgets/styles/jqx.classic.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxcore.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxbuttons.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxscrollbar.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxdata.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxlistbox.js" type="text/javascript"></script>
</head>
<body>
<div id="jqxlistbox"></div>
<script type="text/javascript">
var string;
$(document).ready(function() {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{name: 'firstname'},
{name: 'lastname'}
],
url: 'my url is here'
};
string = source.datafields[0] + source.datafields[1];
alert(string);
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxlistbox").jqxListBox(
{
source: dataAdapter,
theme: 'classic',
width: 200,
height: 250,
displayMember: 'string',
valueMember: 'firstname'
});
});
</script>
</body>
</html>
I think that the "beforeLoadComplete" callback of the jqxDataAdapter plug-in will help you to customize the loaded data through the plug-in. For more information about that function, please look at: jqxDataAdapter plug-in
I am using cluetip jquery plugin and I want to show laoding image inside the tooltip popup.
Just like facebook do. It shows a "loading..." text inside the popup window and then show the data.
Thanks
Here is an demo which can help you
My root folder contains the following files
index.html
demo.html
jquery.cluetip.css
jquery.cluetip.js
jquery.min.js
Koala.jpg
My index.html has the following code
<html >
<head>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script src="jquery.min.js"></script>
<script src="jquery.cluetip.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.sticky').cluetip();
$('#sticky').cluetip({
arrows: true,
sticky: true,
tracking: true,
mouseOutClose: true,
closePosition: 'title',
cursor: 'pointer'
});
});
</script>
</head>
<body >
<strong>Demo for tooptip</strong> <br>
<a id="sticky" href="#" rel="demo.html" title="Demo">ToopTip with arrows</a>
</body>
</html>
Here is the code for demo.html
<html >
<head>
</head>
<body class="page">
<img src="Koala.jpg" width="65" height="65" alt="Koala" />
<p>The koala is an arboreal herbivorous marsupial native to Australia, and the only extant representative of the family Phascolarctidae.</p>
</body>
</html>
Now open the index.html page and get the clueTip working
This is my coding for Qtip.But it wont be work .I dont know why?
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Qtip</title>
<script type="text/javascript" src="/jquery demos/jquery1.4.2.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.js"></script>
<script>
$(document).ready(function()
{
// Match all link elements with href attributes within the content div
$("#content a[href]").qtip({
content: 'This is an active list element',
show: 'mouseover',
hide: 'mouseout'
});
});
</script>
</head>
<body>
sdfsfsd
</body>
</html>
Thanks in advance?
Your selector is lookinf for <a href="something"> inside #content , so just remove that part, like this:
$("#content").qtip({
content: 'This is an active list element',
show: 'mouseover',
hide: 'mouseout'
});
A space between selectors means look for descendants of matches of the preceding selector...the corrected, yet overkill selector would look like this: "a[href]#content", but...that's overkill (and therefore inefficient). The selector you're using is meant for the #content element to have links inside, like this:
<div id="content">
sdfsfsd
</div>
Or just use the qtip class you already have, like this:
$(".qtip").qtip({
content: 'This is an active list element',
show: 'mouseover',
hide: 'mouseout'
});