jQWidgets Forums

Tagged: DOCTYPE, grid, jqxgrid, json, php

This topic contains 6 replies, has 3 voices, and was last updated by Dimitar 9 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Need help with jqxGrid – not working for me Posts
May 15, 2013 at 1:57 am Need help with jqxGrid – not working for me #21155

damerval
Participant

Hi,

I have been trying to follow the demo at bind-jquery-grid-to-mysql-database-using php.htm. Instead of a MySQL database I am using a SQL server database with PHP SQL server drivers. When I create data.php according to the example, and call it in a url, it returns the expected JSON data.

I do everything else according to the example and get nothing – a blank page. Looking at the source, the javascript is there. I placed an “alert” statement inside my $(document).ready function to make sure it was executing. I got the alert.

I noticed the example did not include a jqxDataAdapter line to convert the JSON source into something the jqxGrid could bind to. I added that, no change.

here is my code, with some sample data – please help me figure out what I left out.

thanks!

a call to data.php returns this:

[{“ofndr_num”:”159027″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”MISDEMEANOR CLASS A”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”477505″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”NON-CRIMINAL HOLD”,”assign_reason”:”HOLD NON-CRIMINAL”},{“ofndr_num”:”599450″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”MISDEMEANOR CLASS A”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”224604″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”MISDEMEANOR CLASS A”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”480268″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”UNKNOWN FELONY”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”467448″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”FELONY CLASS B”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”599465″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”UNKNOWN MISDEMEANOR”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”599455″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”MISDEMEANOR CLASS A”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”599460″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”MISDEMEANOR CLASS A”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”457224″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”UNKNOWN MISDEMEANOR”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”580950″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”MISDEMEANOR CLASS A”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”599470″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”MISDEMEANOR CLASS A”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”599475″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”UNKNOWN MISDEMEANOR”,”assign_reason”:”ARRESTED\/REMANDED”},{“ofndr_num”:”323352″,”first_name”:”XXXXXX”,”last_name”:”XXXXXX”,”highest_crime”:”FELONY CLASS C”,”assign_reason”:”ARRESTED\/REMANDED”}]

My code:

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>UI framework testing</title>
<link rel=”stylesheet” href=”jqw282/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqw282/jqwidgets/styles/jqx.classic.css” type=”text/css” />
<script type=”text/javascript” src=”jqw282/scripts/jquery-1.8.3.min.js”></script>
<script type=”text/javascript” src=”jqw282/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqw282/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqw282/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqw282/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqw282/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqw282/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqw282/jqwidgets/jqxgrid.selection.js”></script>

<script type=”text/javascript”>
$(document).ready(function() {
alert(‘ready.’);
var source = {datatype: “json”,
datafields: [{name: ‘ofndr_num’}, {name: ‘first_name’}, {name: ‘last_name’},
{name: ‘highest_crime’}, {name: ‘assign_reason’}
],
url: ‘data.php’
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#mygrid”).jqxGrid({
width: 750,
source: dataAdapter,
theme: ‘classic’,
columns: [ {text: ‘Off. #’, datafield: ‘ofndr_num’, width: 150},
{text: ‘First name’, datafield: ‘first_name’, width: 150},
{text: ‘Last name’, datafield: ‘last_name’, width: 150},
{text: ‘Crime’, datafield: ‘highest_crime’, width: 150},
{text: ‘Action’, datafield: ‘assign_reason’, width: 150}
]
});
});
</script>

</head>

<body>

<div id=”mygrid”></div>

</body>

</html>

May 15, 2013 at 6:10 am Need help with jqxGrid – not working for me #21174
Dimitar
Participant
Hello damerval,

We have tested your code locally and were able to run it successfully. Here is what we tested:
```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
    <title>UI framework testing</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert('ready.');
            var data = '[{"ofndr_num":"159027","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"MISDEMEANOR CLASS A","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"477505","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"NON-CRIMINAL HOLD","assign_reason":"HOLD NON-CRIMINAL"},{"ofndr_num":"599450","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"MISDEMEANOR CLASS A","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"224604","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"MISDEMEANOR CLASS A","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"480268","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"UNKNOWN FELONY","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"467448","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"FELONY CLASS B","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"599465","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"UNKNOWN MISDEMEANOR","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"599455","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"MISDEMEANOR CLASS A","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"599460","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"MISDEMEANOR CLASS A","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"457224","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"UNKNOWN MISDEMEANOR","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"580950","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"MISDEMEANOR CLASS A","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"599470","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"MISDEMEANOR CLASS A","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"599475","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"UNKNOWN MISDEMEANOR","assign_reason":"ARRESTED\/REMANDED"},{"ofndr_num":"323352","first_name":"XXXXXX","last_name":"XXXXXX","highest_crime":"FELONY CLASS C","assign_reason":"ARRESTED\/REMANDED"}]';
            var source = { datatype: "json",
                datafields: [{ name: 'ofndr_num' }, { name: 'first_name' }, { name: 'last_name' },
{ name: 'highest_crime' }, { name: 'assign_reason' }
],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#mygrid").jqxGrid({
                width: 750,
                source: dataAdapter,
                theme: 'classic',
                columns: [{ text: 'Off. #', datafield: 'ofndr_num', width: 150 },
{ text: 'First name', datafield: 'first_name', width: 150 },
{ text: 'Last name', datafield: 'last_name', width: 150 },
{ text: 'Crime', datafield: 'highest_crime', width: 150 },
{ text: 'Action', datafield: 'assign_reason', width: 150 }
]
            });
        });
    </script>
</head>
<body>
    <div id="mygrid">
    </div>
</body>
</html>
```
Some tips: always include the declaration in your HTML document and update your version of jQWidgets to the latest one (2.8.3).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
May 15, 2013 at 6:50 am Need help with jqxGrid – not working for me #21181

damerval
Participant

Hello,
I see that the path references changed (from ‘jqw282/jqwidgets/…’ to ‘../../jqwidgets…’) – was this because you saved the file to a different folder than the web root?
Also, I see you transformed my call to a php file returning a JSON dataset (similarly to the example at bind-jquery-grid-to-mysql-database-using php.htm) to a local reference to “hard-coded” data: Does this mean the access via url as described in the sample does not work?

Thanks,

Philippe

May 15, 2013 at 7:09 am Need help with jqxGrid – not working for me #21183

Dimitar
Participant

Hi Philippe,

1) Yes, the files we use are located in different folders. That does not reflect on the functionality.

2) Access via url is working. We used local data for testing convenience.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 16, 2013 at 1:12 am Need help with jqxGrid – not working for me #21220

damerval
Participant

Hi,
Now my original code works. It must have been a caching issue, since I didn’t change anything. I apologize for taking your time for nothing. Thank you for the fantastic framework.

Philippe

March 24, 2016 at 8:51 pm Need help with jqxGrid – not working for me #82820

shylu
Participant

Hi ,

jqxgrid is not displayed, i am trying the sample code as in the website ..

Code below:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Test</title>
<link rel=”stylesheet” href=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”https://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js”></script>

<script type=”text/javascript” src=”www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”js/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var data = generatedata(200);
var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ }
],
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
}
};
// initialize the input fields.
$(“#firstName”).jqxInput({ theme: theme });
$(“#lastName”).jqxInput({ theme: theme });
$(“#product”).jqxInput({ theme: theme });

$(“#firstName”).width(150);
$(“#firstName”).height(23);
$(“#lastName”).width(150);
$(“#lastName”).height(23);
$(“#product”).width(150);
$(“#product”).height(23);
$(“#quantity”).jqxNumberInput({spinMode: ‘simple’, width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true });
$(“#price”).jqxNumberInput({ spinMode: ‘simple’, symbol: ‘$’, width: 150, min: 0, height: 23, spinButtons: true });
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
pageable: true,
autoheight: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 200 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 200 },
{ text: ‘Product’, datafield: ‘productname’, width: 190 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 90, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#firstName”).val(dataRecord.firstname);
$(“#lastName”).val(dataRecord.lastname);
$(“#product”).val(dataRecord.productname);
$(“#quantity”).jqxNumberInput({ decimal: dataRecord.quantity });
$(“#price”).jqxNumberInput({ decimal: dataRecord.price });
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
$(“#popupWindow”).on(‘open’, function () {
$(“#firstName”).jqxInput(‘selectAll’);
});

$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { firstname: $(“#firstName”).val(), lastname: $(“#lastName”).val(), productname: $(“#product”).val(),
quantity: parseInt($(“#quantity”).jqxNumberInput(‘decimal’)), price: parseFloat($(“#price”).jqxNumberInput(‘decimal’))
};
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<!– <div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>First Name:</td>
<td align=”left”><input id=”firstName” /></td>
</tr>
<tr>
<td align=”right”>Last Name:</td>
<td align=”left”><input id=”lastName” /></td>
</tr>
<tr>
<td align=”right”>Product:</td>
<td align=”left”><input id=”product” /></td>
</tr>
<tr>
<td align=”right”>Quantity:</td>
<td align=”left”><div id=”quantity”></div></td>
</tr>
<tr>
<td align=”right”>Price:</td>
<td align=”left”><div id=”price”></div></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div> –>
</div>
</body>
</html>

Generatedata JS:

function generatedata(rowscount) {
// prepare the data
var data = new Array();
if (rowscount == undefined) rowscount = 100;
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];

var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];

var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];

var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];

for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);

row[“id”] = i;
row[“available”] = productindex % 2 == 0;
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;

var date = new Date();
date.setFullYear(2012, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row[“date”] = date;

data[i] = row;
}

return data;
}

Please help me to solve the issue or pls let me know why it is not displayed

March 28, 2016 at 5:14 am Need help with jqxGrid – not working for me #82876

Dimitar
Participant

Hi shylu,

Please share if there are any errors thrown in your browser’s console when running this code.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.