jQWidgets Forums
jQuery UI Widgets › Forums › Grid › qxgrid CRUD example, fetch mysqli data returns null rows
Tagged: crud with php, datagrid crud, php crud, smart grid
This topic contains 9 replies, has 3 voices, and was last updated by admin 4 years, 1 month ago.
-
Author
-
Hello,
I already had my first grid running (Linux/Joomla/MySQL).
Now I am trying to create a CRUD grid as described here:Build CRUD Web App with jqxGrid using PHP and MySQL
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm?search=Well, my code below is basically the same, using mysqli
Joomla database connection is up and running.But there must be something wrong with fetching the data.
When I run the PHP file below, i get empty json back (blank page).I can’t figure out, what I am missing.
Also, what do these values with your example represent? => ‘sssssss’ and ‘ssssssi’
<?php #Include the connect.php file include ('connect.php'); // Connect to the database $mysqli = new mysqli($mysqli_db_host, $mysqli_db_user, $mysqli_db_password, $mysqli_db_name); /* check connection */ if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); } // get data and store in a json array $query = "SELECT id, title, process FROM app_1_upload_1"; if (isset($_GET['insert'])) { // INSERT COMMAND $query = "INSERT INTO <code>app_1_upload_1</code>(<code>title</code>, <code>process</code>) VALUES (?,?)"; $result = $mysqli->prepare($query); $result->bind_param('sssssss', $_GET['title'], $_GET['process']); $res = $result->execute() or trigger_error($result->error, E_USER_ERROR); // printf ("New Record has id %d.\n", $mysqli->insert_id); echo $res; } else if (isset($_GET['update'])) { // UPDATE COMMAND $query = "UPDATE <code>app_1_upload_1</code> SET <code>title</code>=?, <code>process</code>=? WHERE <code>id</code>=?"; $result = $mysqli->prepare($query); $result->bind_param('sssssssi', $_GET['title'], $_GET['process'], $_GET['id']); $res = $result->execute() or trigger_error($result->error, E_USER_ERROR); // printf ("Updated Record has id %d.\n", $_GET['id']); echo $res; } else if (isset($_GET['delete'])) { // DELETE COMMAND $query = "DELETE FROM app_1_upload_1 WHERE id=?"; $result = $mysqli->prepare($query); $result->bind_param('i', $_GET['id']); $res = $result->execute() or trigger_error($result->error, E_USER_ERROR); // printf ("Deleted Record has id %d.\n", $_GET['id']); echo $res; } else { // SELECT COMMAND $result = $mysqli->prepare($query); $result->execute(); /* bind result variables */ $result->bind_result($id, $title, $process); /* fetch values */ while ($result->fetch()) { $table[] = array( 'id' => $id, 'title' => $title, 'process' => $process ); } echo json_encode($table); } $result->close(); $mysqli->close(); /* close connection */ ?>
Oh, ok…those are the field types to bind: ‘sssssss’ and ‘ssssssi’ = string/int
So I am trying another example of yours and i get the following json echo:
[{“TotalRows”:311,”Rows”:null}]
There are 311 records with the table.
But why are rows returned as NULL?The code actually looks simple.
I can’t spot a mistake.<?php // connect to the database include('connect.php'); $mysqli = new mysqli($mysqli_db_host, $mysqli_db_user, $mysqli_db_password, $mysqli_db_name); // check connection if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); } // Initialize pagenum and pagesize $pagenum = $_POST['pagenum']; $pagesize = $_POST['pagesize']; $start = $pagenum * $pagesize; if (isset($_POST['sortdatafield'])) { $sortfield = $_POST['sortdatafield']; $sortorder = $_POST['sortorder']; if ($sortorder != '') { if ($sortorder == "desc") { $query = "SELECT id, title, process FROM app_1_upload_1 ORDER BY" . " " . $sortfield . " DESC LIMIT ?, ?"; } else if ($sortorder == "asc") { $query = "SELECT id, title, process FROM app_1_upload_1 ORDER BY" . " " . $sortfield . " ASC LIMIT ?, ?"; } $result = $mysqli->prepare($query); $result->bind_param('ii', $start, $pagesize); } else { $result = $mysqli->prepare("SELECT SQL_CALC_FOUND_ROWS id, title, process FROM app_1_upload_1 LIMIT ?, ?"); $result->bind_param('ii', $start, $pagesize); } } else { $result = $mysqli->prepare("SELECT SQL_CALC_FOUND_ROWS id, title, process FROM app_1_upload_1 LIMIT ?, ?"); $result->bind_param('ii', $start, $pagesize); } /* execute query */ $result->execute(); /* bind result variables */ $result->bind_result($id, $title, $process); /* fetch values */ while ($result->fetch()) { $output[] = array( 'id' => $id, 'title' => $title, 'process' => $process ); } // get the total rows. $result = $mysqli->prepare("SELECT FOUND_ROWS()"); $result->execute(); $result->bind_result($total_rows); $result->fetch(); $data[] = array( 'TotalRows' => $total_rows, 'Rows' => $output ); echo json_encode($data); /* close statement */ $result->close(); /* close connection */ $mysqli->close(); ?>
I have managed to connect to mysql and get json as a response, following some tutorials.
JSON output with 311 rows total shows:[{"id":1,"title":"Reinweiß glänzend","process":1}, {"id":2,"title":"alpinweiß","process":1}...
Attached the code for:
1. jqwidget_data.php (called to generate json – working)
2. jqwidget_source.php (complete code is being injected inside Joomla page using Regularlabs sourcerer)The Grid won’t show. Only the buttons are rendered.
I was able to build a simple grid without CRUD operation, which worked.CRUD example:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm?search=I don’t see any errors with Browser.
Does the primary_key “id” maybe cause conflicts?jqwidget_data.php
<?php // json header("Content-Type: application/json"); // connect include('connect.php'); $mysqli = new mysqli($mysqli_db_host, $mysqli_db_user, $mysqli_db_password, $mysqli_db_name); if($mysqli) { $query = "SELECT id, title, process FROM app_1_upload_1"; $result = mysqli_query($mysqli, $query); // Set Charset to UTF8 mysqli_set_charset($mysqli, "utf8"); // get data and store in a json array $query = "SELECT id, title, process FROM app_1_upload_1"; if (isset($_GET['insert'])) { // INSERT COMMAND $query = "INSERT INTO <code>app_1_upload_1</code>(<code>title</code>, <code>process</code>) VALUES (?,?)"; $result = $mysqli->prepare($query); $result->bind_param('si', $_GET['title'], $_GET['process']); $res = $result->execute() or trigger_error($result->error, E_USER_ERROR); // printf ("New Record has id %d.\n", $mysqli->insert_id); echo $res; } else if (isset($_GET['update'])) { // UPDATE COMMAND $query = "UPDATE <code>app_1_upload_1</code> SET <code>title</code>=?, <code>process</code>=? WHERE <code>id</code>=?"; $result = $mysqli->prepare($query); $result->bind_param('sii', $_GET['title'], $_GET['process'], $_GET['id']); $res = $result->execute() or trigger_error($result->error, E_USER_ERROR); // printf ("Updated Record has id %d.\n", $_GET['EmployeeID']); echo $res; } else if (isset($_GET['delete'])) { // DELETE COMMAND $query = "DELETE FROM <code>app_1_upload_1</code> WHERE id=?"; $result = $mysqli->prepare($query); $result->bind_param('i', $_GET['id']); $res = $result->execute() or trigger_error($result->error, E_USER_ERROR); // printf ("Deleted Record has id %d.\n", $_GET['EmployeeID']); echo $res; } else { // SELECT COMMAND $result = $mysqli->prepare($query); $result->execute(); /* bind result variables */ $result->bind_result($id, $title, $process); /* fetch values */ while ($result->fetch()) { $output[] = array( 'id' => $id, 'title' => $title, 'process' => $process ); } print(json_encode($output,JSON_UNESCAPED_UNICODE)); } $result->close(); $mysqli->close(); } ?>
jqwidget_source.php
{source} <html lang="de"> <head> <link rel="stylesheet" href="/media/system/css/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/media/system/js/jqwidget-scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="/media/system/js/jqxcore.js"></script> <script type="text/javascript" src="/media/system/js/jqxdata.js"></script> <script type="text/javascript" src="/media/system/js/jqxbuttons.js"></script> <script type="text/javascript" src="/media/system/js/jqxscrollbar.js"></script> <script type="text/javascript" src="/media/system/js/jqxmenu.js"></script> <script type="text/javascript" src="/media/system/js/jqxlistbox.js"></script> <script type="text/javascript" src="/media/system/js/jqxdropdownlist.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.selection.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.filter.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.sort.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.pager.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.grouping.js"></script> <script type="text/javascript" src="/media/system/js/jqxdata.export.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.export.js"></script> <script type="text/javascript" src="/media/system/js/jqxexport.js"></script> <script type="text/javascript" src="/media/system/js/jqxcheckbox.js"></script> <script type="text/javascript" src="/media/system/js/jqxlistbox.js"></script> <script type="text/javascript" src="/media/system/js/jqxdropdownlist.js"></script> <script type="text/javascript"> var source = { datatype: "json", cache: false, datafields: [{ name: 'id' }, { name: 'title' }, { name: 'process' } ], id: 'id', url: 'app/jqwidget_data.php', addrow: function(rowid, rowdata, position, commit) { // synchronize with the server - send insert command var data = "insert=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'app/jqwidget_data.php', data: data, cache: false, success: function(data, status, xhr) { // insert command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); }, deleterow: function(rowid, commit) { // synchronize with the server - send delete command var data = "delete=true&" + $.param({ id: rowid }); $.ajax({ dataType: 'json', url: 'data.php', cache: false, data: data, success: function(data, status, xhr) { // delete command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); }, updaterow: function(rowid, rowdata, commit) { // synchronize with the server - send update command var data = "update=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'app/jqwidget_data.php', cache: false, data: data, success: function(data, status, xhr) { // update command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); } }; </script> <script type="text/javascript"> // initialize jqxGrid $("#jqxgrid").jqxGrid({ width: 500, height: 350, source: dataAdapter, theme: theme, columns: [{ text: 'id', datafield: 'id', width: 100 }, { text: 'title', datafield: 'title', width: 100 }, { text: 'process', datafield: 'process', width: 100 } ] }); $("#addrowbutton").jqxButton({ theme: theme }); $("#deleterowbutton").jqxButton({ theme: theme }); $("#updaterowbutton").jqxButton({ theme: theme }); // update row. $("#updaterowbutton").bind('click', function() { var datarow = generaterow(); var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('updaterow', id, datarow); } }); // create new row. $("#addrowbutton").bind('click', function() { var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; var datarow = generaterow(rowscount + 1); $("#jqxgrid").jqxGrid('addrow', null, datarow); }); // delete row. $("#deleterowbutton").bind('click', function() { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('deleterow', id); } }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"></div> <div style="margin-left: 30px; float: left;"> <div> <input id="addrowbutton" type="button" value="Neu" /> </div> <div style="margin-top: 10px;"> <input id="deleterowbutton" type="button" value="Löschen" /> </div> <div style="margin-top: 10px;"> <input id="updaterowbutton" type="button" value="Aktualisieren" /> </div> </div> </div> </body> </html> {/source}
EDIT => url: ‘data.php’ should be url: ‘app/jqwidget_data.php’
EDIT 2 => Before initialize jqxGrid I forgot to add:
var dataAdapter = new $.jqx.dataAdapter(source);
Also added at the beginning:
var theme = ‘classic’;
Still no grid, only buttons; and buttons do not work.
I have missed some lines and had to rewrite the sourcerer code.
current version of my jqwidget_source.php file, which actually does show the grid, but won’t show the json data yet:
{source} <html lang="de"> <head> <link rel="stylesheet" href="/media/system/css/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/media/system/js/jqwidget-scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="/media/system/js/jqxcore.js"></script> <script type="text/javascript" src="/media/system/js/jqxdata.js"></script> <script type="text/javascript" src="/media/system/js/jqxbuttons.js"></script> <script type="text/javascript" src="/media/system/js/jqxscrollbar.js"></script> <script type="text/javascript" src="/media/system/js/jqxmenu.js"></script> <script type="text/javascript" src="/media/system/js/jqxlistbox.js"></script> <script type="text/javascript" src="/media/system/js/jqxdropdownlist.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.selection.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.filter.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.sort.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.pager.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.grouping.js"></script> <script type="text/javascript" src="/media/system/js/jqxdata.export.js"></script> <script type="text/javascript" src="/media/system/js/jqxgrid.export.js"></script> <script type="text/javascript" src="/media/system/js/jqxexport.js"></script> <script type="text/javascript" src="/media/system/js/jqxcheckbox.js"></script> <script type="text/javascript" src="/media/system/js/jqxlistbox.js"></script> <script type="text/javascript" src="/media/system/js/jqxdropdownlist.js"></script> <script type="text/javascript"> $(document).ready(function() { // prepare the data var data = {}; var theme = 'classic'; var source = { datatype: "json", cache: false, datafields: [{ name: 'id' }, { name: 'title' }, { name: 'process' } ], id: 'id', url: 'app/jqwidget_data.php', addrow: function(rowid, rowdata, position, commit) { // synchronize with the server - send insert command var data = "insert=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'app/jqwidget_data.php', data: data, cache: false, success: function(data, status, xhr) { // insert command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); }, deleterow: function(rowid, commit) { // synchronize with the server - send delete command var data = "delete=true&" + $.param({ id: rowid }); $.ajax({ dataType: 'json', url: 'app/jqwidget_data.php', cache: false, data: data, success: function(data, status, xhr) { // delete command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); }, updaterow: function(rowid, rowdata, commit) { // synchronize with the server - send update command var data = "update=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'app/jqwidget_data.php', cache: false, data: data, success: function(data, status, xhr) { // update command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid({ width: 1366, source: dataAdapter, theme: theme, columns: [{ text: 'id', datafield: 'id', width: 100 }, { text: 'title', datafield: 'title', width: 100 }, { text: 'process', datafield: 'process', width: 100 } ] }); $("#addrowbutton").jqxButton({ theme: theme }); $("#deleterowbutton").jqxButton({ theme: theme }); $("#updaterowbutton").jqxButton({ theme: theme }); // update row. $("#updaterowbutton").bind('click', function() { var datarow = generaterow(); var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('updaterow', id, datarow); } }); // create new row. $("#addrowbutton").bind('click', function() { var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; var datarow = generaterow(rowscount + 1); $("#jqxgrid").jqxGrid('addrow', null, datarow); }); // delete row. $("#deleterowbutton").bind('click', function() { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('deleterow', id); } }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div style="float: left;" id="jqxgrid"> </div> <div style="margin-left: 30px; float: left;"> <div> <input id="addrowbutton" type="button" value="Add New Row" /> </div> <div style="margin-top: 10px;"> <input id="deleterowbutton" type="button" value="Delete Selected Row" /> </div> <div style="margin-top: 10px;"> <input id="updaterowbutton" type="button" value="Update Selected Row" /> </div> </div> </div> </body> </html> {/source}
Hello AppBuilder,
Could you clarify it?
Do you still have troubles with the visualization?
Please, check the console for any error messages.
Also, you could try to implement theloadError: function (jqXHR, status, error) { console.log(jqXHR, status, error) }
callback of the jqxDataAdapter.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comNo error message.
Have not debugged the jqxDataAdapter., because no clue how to.
I am trying to follow your CRUD example with MySQL, but I am facing difficulties transporting the data and debugging as it seems.
My PHP part looks like it is exporting the correct JSON Format. Had to struggle with this one as well, since your examples are all over the place. The JSON echo is valid.
I would basically like to get a piece of code to show the data from mysql and test how easy I can make adjustments to the grid layout/options and if CRUD really works right out of the box. The only thing I would adjust is the SELECT query and fields, just to see if it is working.
I am trying to rewrite your example to at least show the data, but it won’t work.
I am running Joomla 3.x with a Linux Server and I am injecting the SOURCE code directly inside Joomla pages. I am actually using a pagebuilder with Joomla, but I can make use of Regularlabs Sourcerer to inject the code. Therefore I can run HTML/JS/PHP anywhere.
Hi AppBuilder,
We have several new examples which should make it easier to use a Grid with SQL. Please, refer to this https://www.htmlelements.com/demos/grid/server-side-crud/. Smart.Grid is also part of the jQWidgets subscription. In the demo, we show CRUD with Grid and we also show the SQL.
Hope this helps.
Best regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.