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.
Related
I've a simple jQuery CRUD and php script running on my server.
Here the version included
<link href="jtable/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="jtable/scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css" />
<script src="jtable/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="jtable/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="jtable/jquery.jtable.js" type="text/javascript"></script>
The table works and shows all the data while loading the page, the error occurs when I edit a record.
Looking into firefox dev tools I get the error
Status: 500 Internal Server Error
Versione: HTTP/2
Referrer Policy: strict-origin-when-cross-origin
Priority:Highest
But there is not a cross origin call because the pages of the scripts are all in the same server and also the same directory.
Here you can see the call
<div id="PeopleTableContainer" style="width: 600px;"></div>
<script type="text/javascript">
$(document).ready(function () {
//Prepare jTable
$('#PeopleTableContainer').jtable({
title: 'Istruzione parentale',
paging: true,
pageSize: 50,
sorting: true,
defaultSorting: 'user ASC',
actions: {
listAction: 'istruzione_parentale_jquery.php?action=list',
createAction: 'istruzione_parentale_jquery.php?action=create',
updateAction: 'istruzione_parentale_jquery.php?action=update',
deleteAction: 'istruzione_parentale_jquery.php?action=delete'
},
fields: {
user: {
key: true,
title: 'User',
create: false,
edit: false,
list: true,
width: '60%'
},
mail_inviata: {
title: 'Mail Inviata',
width: '40%'
}
}
});
//Load person list from server
$('#PeopleTableContainer').jtable('load');
});
</script>
What's wrong?
Thank you for your support
Good day friends...
How to get the URL source code part of a jwplayer, I mean the mp4 part, and I found what I'm looking for here the source
I try to used it but I can't do it right, sorry for my bad english, can someone take a look at my php code below....I want to grab the link http://localhost/srt/43534234/viral022018SD.MP4 and http://localhost/srt/43534234/viral022018HD.MP4 or all mp4 URL inside it in the viral022018.html
Thank you hope someone help me...thank you
This is my php code
<?php
$html = file_get_contents('https://localhost/video/viral022018.html');
//$dom->loadHtml('', LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$dom = new DOMDocument();
$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
$sources = [];
foreach ($xpath->query("//script[#type=\"text/javascript\"]") as $script) {
if (stristr($script->nodeValue, 'playerInstance') !== false) {
preg_match_all('#file: \"(.+)\"#', $script->nodeValue, $match);
$sources = $match[1];
}
}
print_r($sources);
?>
This is the viral022018.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href='https://fonts.googleapis.com/css?family=Hanuman' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Scada" rel="stylesheet">
<link href="jwplayer-7.12.8/skins/prime.min2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jwplayer-7.12.8/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="I9HOJrL1NmqruQ60as34wt34/23422dsdrwer==";</script>
</head>
<body>
<div id="picasa" class="picasa"></div>
<script type="text/javascript">
var playerInstance = jwplayer("picasa");
playerInstance.setup({
id:'picasa',
controls: true,
displaytitle: true,
flashplayer: "//ssl.p.jwpcdn.com/player/v/7.12.5/jwplayer.flash.swf",
width: "100%",
height: "100%",
aspectratio: "16:9",
fullscreen: "true",
provider: 'http',
autostart: false,
image:'http://localhost/viral/viralvideo.jpg',
sources: [{file:"http://localhost/srt/43534234/viral022018SD.MP4",label:"SD",type: "video/mp4"},{file:"http://localhost/srt/43534234/viral022018HD.MP4",label:"HD",type: "video/mp4",default: true}],
sharing:{
link: "",
code: "",
heading: "Share",
sites: ["facebook","twitter","tumblr","googleplus","reddit","linkedin","interest","email"],
},
sharing:{
link: "",
code: "",
heading: "Share",
sites: ["facebook","twitter","tumblr","googleplus","reddit","linkedin","interest","email"],
},
tracks: [{
file: 'http://localhost/srt/viralvideo022018.srt',
label: 'English',
kind: 'captions',
"default":true
}],
captions: {
color: '#FFEB3B',
fontSize: 14,
fontFamily: 'Scada, Hanuman, sans-serif, Verdana, cursive',
fontOpacity: 100,
backgroundOpacity: 0,
backgroundColor: '#000000',
edgeStyle: 'raised',
windowColor: '#000000',
windowOpacity: 0
},
skin: {
name: 'prime',
},
});
</script>
</body>
</html>
Please try this regex:
{\s*file\s*:\s*["']\s*(http[^"']+\.mp4)
Try it out here: https://regex101.com/r/rmgKId/2
The matched URL is in group 1.
(EDIT: added \.mp4 to make it specific to those files)
EDIT: To implement in PHP generically you'd do something like this:
preg_match_all('/{\s*file\s*:\s*["\']\s*(http[^"\']+\.mp4)/i', $subject,
$result, PREG_PATTERN_ORDER);
$result = $result[1];
$result will be an array of all the text matched by numbering group 1 in the regex. But I leave it to you to slot into your code above (change variable names to match what you want).
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 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.
I have followed the example in creating a new jqGrid. The data loads and displays ok. The number of rows works ok. The only problem is that is just displays the data in plain grid boxes(like below). No layer. Even the sort buttons do not show/work. There is no css effect even though the link is pointed to the correct folder.
col1 | col2 | col3
--------------------------
data1a | data1b | data1c
--------------------------
data2a | data2b | data2c
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="../theme/css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 50%;
}
</style>
<script src="../theme/js/jquery-1.6.1.js" type="text/javascript"></script>
<script src="../theme/js/grid.locale-en.js" type="text/javascript"></script>
<script src="../theme/js/src/grid.loader.js" type="text/javascript"></script>
<script src="../theme/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src=“../theme/js/src/jqDnR.js” type=“text/javascript”></script>
<script src=“../theme/js/src/jqModal.js” type=“text/javascript”></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'JQ.php',
datatype: 'xml',
mtype: 'GET',
colNames:['UNIT ID','ROLE ID', 'CREATED DATE','CREATED BY','Inactive'],
colModel :[
{name:'UNIT_ID', index:'UNIT_ID', width:55},
{name:'ROLE_ID', index:'ROLE_ID', width:90},
{name:'CREATED_DT', index:'CREATED_DT', width:100},
{name:'CREATED_BY', index:'CREATED_BY', width:80},
{name:'INACTIVE', index:'INACTIVE', width:80, sortable:false}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30,50],
sortname: 'UNIT_ID',
sortorder: 'desc',
viewrecords: true,
gridview: true,
width: 500,
height: "100%",
caption: 'My first gridder'
});
});
</script>
You don't included on your page one very important CSS file:
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css" />
Moreover you included the same JavaScript code many times, which is wrong? Which grid.loader.js you use? What is inside? You can open it with any text editor. Why you insert jqModal.js and jqDnR.js? If you use jquery.jqGrid.src.js from jqGrid 4.0.0 you don't need include grid.loader.js, jqModal.js and jqDnR.js. The exact contain of jquery.jqGrid.src.js can depend on the list of modules which you selected as you downloaded the jqGrid. You can open jquery.jqGrid.min.js and examine the comment line at the beginning of the file. The standyrd (full) version of the file contain the following modules:
Modules: grid.base.js;
jquery.fmatter.js; grid.custom.js;
grid.common.js; grid.formedit.js;
grid.filter.js; grid.inlinedit.js;
grid.celledit.js; jqModal.js;
jqDnR.js; grid.subgrid.js;
grid.grouping.js; grid.treegrid.js;
grid.import.js; JsonXml.js;
grid.tbltogrid.js; grid.jqueryui.js;
So you must not inclde the same modules one more time.