jQuery UI Widgets Forums Grid Need help with jqxGrid – not working for me

Tagged: , , , ,

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

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

  • 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>

     

    • This topic was modified 6 years, 10 months ago by  damerval.
    • This topic was modified 6 years, 10 months ago by  damerval.
    • This topic was modified 6 years, 10 months ago by  damerval.
    • This topic was modified 6 years, 10 months ago by  Peter Stoev. Reason: Moved to Grid Forum

    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/


    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


    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/


    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


    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

    • This reply was modified 4 years ago by  shylu.

    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/

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

You must be logged in to reply to this topic.