jQuery UI Widgets › Forums › Grid › Problem jqxgrid – no data to display
Tagged: grid widget, javascript grid, jquery grid, jqxgrid
This topic contains 4 replies, has 2 voices, and was last updated by inkospor 8 years, 8 months ago.
-
Author
-
Hello everyone,
I’m sorriy for my English, i speak only a little bit. I have a problem to configure the Grid Widget. I have already resolve some of problems with my code but now, it’s so difficult for me. When i load my webpage, it’s appear on grid: no data to display. I don’t undersant where is the problem. Here my code:
First code:
$hostname = "localhost"; $database = "*******"; $username = "******"; $password = ""; $mysqli = new mysqli($hostname, $username, $password, $database); /* check connection */ if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); } // get data and store in a json array $user = ($_SESSION['oelog01_UserID']); $query = "SELECT <code>idcharge</code>, <code>naturecharge</code>, <code>fournisseurcharge</code>, <code>facturecharge</code>, <code>datecharge</code>, <code>prixcharge</code> FROM <code>oe_charges_exploitation</code> WHERE iduser=1"; if (isset($_GET['insert'])) { // INSERT COMMAND $query = "INSERT INTO <code>oe_charges_exploitation</code>(<code>naturecharge</code>, <code>fournisseurcharge</code>, <code>facturecharge</code>, <code>datecharge</code>, <code>prixcharge</code>, <code>iduser</code>) VALUES (?,?,?,?,?,?)"; $result = $mysqli->prepare($query); $result->bind_param('sssssss', $_GET['naturecharge'], $_GET['fournisseurcharge'], $_GET['facturecharge'], $_GET['datecharge'], $_GET['prixcharge'], $_GET['$user']); $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>oe_charges_exploitation</code> SET <code>naturecharge</code>=?, <code>fournisseurcharge</code>=?, <code>facturecharge</code>=?, <code>datecharge</code>=?, <code>prixcharge</code>=?, <code>iduser</code>=? WHERE <code>idcharge</code>=?"; $result = $mysqli->prepare($query); $result->bind_param('sssssssi', $_GET['naturecharge'], $_GET['fournisseurcharge'], $_GET['facturecharge'], $_GET['datecharge'], $_GET['prixcharge'], $_GET['idcharge'], $_GET['$user']); $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 oe_charges_exploitation WHERE idcharge=?"; $result = $mysqli->prepare($query); $result->bind_param('i', $_GET['idcharge']); $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, $Nature, $Fournisseur, $Facture, $Date, $Prix); /* fetch values */ while ($result->fetch()) { $charges[] = array( 'idcharge' => $ID, 'naturecharge' => $Nature, 'fournisseurcharge' => $Fournisseur, 'facturecharge' => $Facture, 'datecharge' => $Date, 'prixcharge' => $Prix ); } echo json_encode($charges); } $result->close(); $mysqli->close(); /* close connection */
Second code
<link rel="stylesheet" href="/Files/js/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="/Files/js/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <script type="text/javascript" src="/Files/js/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datatype: "json", cache: false, datafields: [ { name: 'idcharge'}, { name: 'naturecharge'}, { name: 'fournisseurcharge'}, { name: 'facturecharge'}, { name: 'datecharge'}, { name: 'prixcharge'} ], id: 'idcharge', url: 'Espace_compta.php', addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command var data = "insert=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'Espace_compta.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({idcharge: rowid}); $.ajax({ dataType: 'json', url: 'Espace_compta.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: 'Espace_compta.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: 700, height: 350, source: dataAdapter, theme: 'darkblue', columns: [ { text: 'Nature de la charge', datafield: 'naturecharge', width: 200 }, { text: 'Fournisseur', datafield: 'fournisseurcharge', width: 150 }, { text: 'Numero de facture', datafield: 'facturecharge', width: 150 }, { text: 'Date achat', datafield: 'datecharge', width: 100 }, { text: 'Prix TTC', datafield: 'prixcharge', width: 100 } ] }); $("#addrowbutton").jqxButton({ theme: 'darkblue' }); $("#deleterowbutton").jqxButton({ theme: 'darkblue' }); $("#updaterowbutton").jqxButton({ theme: 'darkblue' }); // 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>
Thank you very much for your help and answers
JORDAN Michael
Hi inkospor,
Probably you have a problem with your server script.
It’s not related to the grid’s functionality.
Please, verify the result returned from the server script. It must be a valid JSON structure.Best Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comHi Ivailo. I have a problem with the script server, you have right. Now it’s resolve and the data appears in the grid! It’s fine.
Now i have an other problem. I want to implement the popup window editing on my grid with the update (for the moment) function of CRUD system. I can open the popup Windows (the datas are here) but when i click the save button, Nothing happend. The window popu close but the data are not change. Here my new code, if you can help me, it’s perfect.
PHP CODE
<link rel="stylesheet" href="/Files/js/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="/Files/js/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <script type="text/javascript" src="/Files/js/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = {}; var source = { datatype: "json", cache: false, datafields: [ { name: 'idcharge'}, { name: 'naturecharge'}, { name: 'fournisseurcharge'}, { name: 'facturecharge'}, { name: 'datecharge', type: 'date'}, { name: 'prixcharge', type: 'number'}, { name: 'iduser'}, ], id: 'idcharge', url: 'data.php', pager: function (pagenum, pagesize, oldpagenum) { }, updaterow: function (rowid, rowdata, commit) { var data = "update=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'data.php', cache: false, data: data, success: function (data, status, xhr) { commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); } }; $("#naturecharge").addClass('jqx-input'); $("#fournisseurcharge").addClass('jqx-input'); $("#facturecharge").addClass('jqx-input'); $("#datecharge").addClass('jqx-input'); $("#prixcharge").addClass('jqx-input'); $("#naturecharge").width(150); $("#naturecharge").height(23); $("#fournisseurcharge").width(150); $("#fournisseurcharge").height(23); $("#facturecharge").width(150); $("#facturecharge").height(23); $.getScript('/Files/js/jqwidgets/globalization/globalize.culture.fr-FR.js', function () { $("#datecharge").jqxDateTimeInput({ width: '150px', height: '23px', culture: 'fr-FR' }); }); $("#prixcharge").jqxNumberInput({inputMode: 'simple', symbol: 'CHF ', width: 150, min: 0, height: 23, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 700, source: dataAdapter, theme: 'darkblue', selectionmode: 'multiplerowsextended', sortable: true, pageable: true, autoheight: true, columnsresize: true, columns: [ { text: 'Nature de la charge', datafield: 'naturecharge', width: 170 }, { text: 'Fournisseur', datafield: 'fournisseurcharge', width: 120 }, { text: 'N° de facture', datafield: 'facturecharge', width: 150 }, { text: 'Date achat', datafield: 'datecharge', cellsformat: 'dd/MM/yyyy', width: 100 }, { text: 'Prix TTC', datafield: 'prixcharge', width: 80, cellsformat: 'f2'}, { text: 'Modifier', datafield: 'Edit', width: 80, 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); $("#naturecharge").val(dataRecord.naturecharge); $("#fournisseurcharge").val(dataRecord.fournisseurcharge); $("#facturecharge").val(dataRecord.facturecharge); $("#datecharge").val(dataRecord.datecharge); $("#prixcharge").val(dataRecord.prixcharge); // show the popup window. $("#popupWindow").jqxWindow('open'); } }, ] }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ theme: 'darkblue', width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#Cancel").jqxButton({ theme: 'darkblue' }); $("#Save").jqxButton({ theme: 'darkblue' }); // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { if (editrow >= 0) { var row = {naturecharge: $("#naturecharge").val(), fournisseurcharge: $("#fournisseurcharge").val(), facturecharge: $("#facturecharge").val(), datecharge: $("#datecharge").val(), prixcharge: $("#prixcharge").val() }; $('#jqxgrid').jqxGrid('updaterow', editrow, row); $("#popupWindow").jqxWindow('hide'); $("#jqxgrid").jqxGrid('refresh');} }); $('#events').jqxPanel({ width: 300, height: 300}); $("#jqxgrid").on("pagechanged", function (event) { $("#eventslog").css('display', 'block'); if ($("#events").find('.logged').length >= 5) { $("#events").jqxPanel('clearcontent'); } var args = event.args; var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>"; $('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>'); // get page information. var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation'); $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>"); }); $("#jqxgrid").on("pagesizechanged", function (event) { $("#eventslog").css('display', 'block'); $("#events").jqxPanel('clearcontent'); var args = event.args; var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>"; $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>'); // get page information. var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation'); $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>"); }); }); </script>
SCRIPT CODE SERVER
<?php session_start(); $hostname = "localhost"; $database = "*****"; $username = "*****"; $password = ""; $mysqli = new mysqli($hostname, $username, $password, $database); /* check connection */ if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); } // get data and store in a json array $user = $_SESSION['oelog01_UserID']; if (isset($_GET['insert'])) { // INSERT COMMAND $insert_query = "INSERT INTO oe_charges_exploitation (naturecharge, fournisseurcharge, facturecharge, datecharge, prixcharge, iduser) VALUES ('".$_GET['naturecharge']."','".$_GET['fournisseurcharge']."','".$_GET['facturecharge']."','".$_GET['datecharge']."','".$_GET['prixcharge']."','".$_GET['$user']."')"; $result = mysql_query($insert_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else if (isset($_GET['update'])) { // UPDATE COMMAND $update_query = "UPDATE oe_charges_exploitation SET naturecharge='".$_GET['naturecharge']."',fournisseurcharge='".$_GET['fournisseurcharge']."',facturecharge='".$_GET['facturecharge']."',datecharge='".$_GET['datecharge']."',prixcharge='".$_GET['prixcharge']."' WHERE idcharge='".$_GET['idcharge']."'"; $result = mysql_query($update_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else if (isset($_GET['delete'])) { // DELETE COMMAND $delete_query = "DELETE FROM e_charges_exploitation WHERE idcharge='".$_GET['idcharge']."'"; $result = mysql_query($delete_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else { // SELECT COMMAND $bdd=mysqli_connect("localhost","root","","nbel_databasesite"); $query = "SELECT * FROM oe_charges_exploitation WHERE iduser=$user"; $from = 0; $to = 30; $query .= " LIMIT ".$from.",".$to; $result = mysqli_query($bdd, $query) or die("SQL Error 1: " . mysqli_error()); while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) { $charges[] = array( 'idcharge' => $row['idcharge'], 'naturecharge' => $row['naturecharge'], 'fournisseurcharge' => $row['fournisseurcharge'], 'facturecharge' => $row['facturecharge'], 'datecharge' => $row['datecharge'], 'prixcharge' => $row['prixcharge'], 'iduser' => $row['iduser'] ); } echo json_encode($charges); } $result->close(); $mysqli->close(); ?>
Best regards and thanks for your answer.
JORDAN Michael
Hi inkospor,
Please, try to initialize correctly your inputs.
You have to check the result of your server update funciton.
If the result is not true, the updaterow commits false and the row is not updatedBest Regards,
Ivailo IvanovjQWidgets Team
http://www.jqwidgets.comHello Ivailo,
Thnak you for your response. I’m sorry it’doesnt work. I have change how i initialize my inputs with this code:
<link rel="stylesheet" href="/Files/js/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="/Files/js/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <script type="text/javascript" src="/Files/js/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="/Files/js/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var editrow = -1; var source = { datatype: "json", cache: false, datafields: [ { name: 'idcharge'}, { name: 'naturecharge'}, { name: 'fournisseurcharge'}, { name: 'facturecharge'}, { name: 'datecharge', type: 'date'}, { name: 'prixcharge', type: 'number'}, { name: 'iduser'}, ], id: 'idcharge', url: 'data.php', pager: function (pagenum, pagesize, oldpagenum) { }, updaterow: function (rowid, rowdata) { // synchronize with the server - send update command var data = "update=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'data.php', data: data, success: function (data, status, xhr) { // update command is executed. } }); }, deleterow: function (rowid) { // synchronize with the server - send delete command var data = "delete=true&id=" + rowid; $.ajax({ dataType: 'json', url: 'data.php', data: data, success: function (data, status, xhr) { // delete command is executed. } }); } }; $("#idcharge").jqxInput; $("#naturecharge").jqxInput; $("#fournisseurcharge").jqxInput; $("#facturecharge").jqxInput; $("#datecharge").jqxInput; $("#prixcharge").jqxInput; $("#idcharge").width(150); $("#idcharge").height(23); $("#naturecharge").width(150); $("#naturecharge").height(23); $("#fournisseurcharge").width(150); $("#fournisseurcharge").height(23); $("#facturecharge").width(150); $("#facturecharge").height(23); $.getScript('/Files/js/jqwidgets/globalization/globalize.culture.fr-FR.js', function () { $("#datecharge").jqxDateTimeInput({ width: '150px', height: '23px', culture: 'fr-FR' }); }); $("#prixcharge").jqxNumberInput({inputMode: 'simple', symbol: 'CHF ', width: 150, min: 0, height: 23, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 700, source: dataAdapter, theme: 'darkblue', selectionmode: 'multiplerowsextended', sortable: true, pageable: true, autoheight: true, columnsresize: true, columns: [ { text: 'ID', datafield: 'idcharge', width: 170, hidden: true }, { text: 'Nature de la charge', datafield: 'naturecharge', width: 170 }, { text: 'Fournisseur', datafield: 'fournisseurcharge', width: 120 }, { text: 'N° de facture', datafield: 'facturecharge', width: 150 }, { text: 'Date achat', datafield: 'datecharge', cellsformat: 'dd/MM/yyyy', width: 100 }, { text: 'Prix TTC', datafield: 'prixcharge', width: 80, cellsformat: 'f2'}, { text: 'Modifier', datafield: 'Edit', width: 80, 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); $("#idcharge").val(dataRecord.idcharge); $("#naturecharge").val(dataRecord.naturecharge); $("#fournisseurcharge").val(dataRecord.fournisseurcharge); $("#facturecharge").val(dataRecord.facturecharge); $("#datecharge").val(dataRecord.datecharge); $("#prixcharge").val(dataRecord.prixcharge); // show the popup window. $("#popupWindow").jqxWindow('open'); } }, ] }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ theme: 'darkblue', width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#Cancel").jqxButton({ theme: 'darkblue' }); $("#Save").jqxButton({ theme: 'darkblue' }); // update the edited row when the user clicks the 'Save' button. $("#Save").bind('click', function () { if (editrow >= 0) { var row = {naturecharge: $("#naturecharge").val(), fournisseurcharge: $("#fournisseurcharge").val(), facturecharge: $("#facturecharge").val(), datecharge: $("#datecharge").val(), prixcharge: $("#prixcharge").val() }; $("#jqxgrid").jqxGrid('updaterow', editrow, row); $("#popupWindow").jqxWindow('hide'); } }); $('#events').jqxPanel({ width: 300, height: 300}); $("#jqxgrid").on("pagechanged", function (event) { $("#eventslog").css('display', 'block'); if ($("#events").find('.logged').length >= 5) { $("#events").jqxPanel('clearcontent'); } var args = event.args; var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>"; $('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>'); // get page information. var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation'); $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>"); }); $("#jqxgrid").on("pagesizechanged", function (event) { $("#eventslog").css('display', 'block'); $("#events").jqxPanel('clearcontent'); var args = event.args; var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>"; $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>'); // get page information. var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation'); $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>"); }); }); </script>
and here my new code for data.php. How can i check the result of tue update function?
<?php session_start(); $serveur ='localhost'; $login ='root'; $mdp =''; $nom_bdd='nbel_databasesite'; try { $bdd = new PDO('mysql:host='.$serveur.';dbname='.$nom_bdd.'', $login, $mdp); } catch (Exception $e) { exit('Erreur : ' . $e->getMessage()); } // get data and store in a json array $user = $_SESSION['oelog01_UserID']; if (isset($_GET['update'])) { // UPDATE COMMAND $naturecharge = $_POST['naturecharge']; $fournisseurcharge = $_POST['fournisseurcharge']; $facturecharge = $_POST['facturecharge']; $datecharge = $_POST['datecharge']; $prixcharge = $_POST['prixcharge']; $idcharge = $_POST['idcharge']; $PDOStatement = $bdd->prepare("UPDATE oe_charges_exploitation SET naturecharge = :naturecharge, fournisseurcharge = :fournisseurcharge, facturecharge = :facturecharge, datecharge = :datecharge, prixcharge = :prixcharge WHERE idcharge = :idcharge"); $PDOStatement->bindParam(":naturecharge", $naturecharge); $PDOStatement->bindParam(":fournisseurcharge", $fournisseurcharge); $PDOStatement->bindParam(":facturecharge", $facturecharge); $PDOStatement->bindParam(":datecharge", $datecharge); $PDOStatement->bindParam(":prixcharge", $prixcharge); $PDOStatement->bindParam(":idcharge", $idcharge); $PDOStatement->execute(); } else if (isset($_GET['delete'])) { // DELETE COMMAND $PDOStatement = $bdd->prepare("DELETE FROM e_charges_exploitation WHERE idcharge= :idcharge"); $PDOStatement->bindParam(':idcharge', $_POST['idcharge'], PDO::PARAM_INT); $PDOStatement->execute(); } else { // SELECT COMMAND $query = "SELECT * FROM oe_charges_exploitation WHERE iduser=$user"; $from = 0; $to = 30; $query .= " LIMIT ".$from.",".$to; $result = $bdd->query($query, PDO::FETCH_ASSOC); while ($row = $result->fetch()) { $charges[] = array( 'idcharge' => $row['idcharge'], 'naturecharge' => $row['naturecharge'], 'fournisseurcharge' => $row['fournisseurcharge'], 'facturecharge' => $row['facturecharge'], 'datecharge' => $row['datecharge'], 'prixcharge' => $row['prixcharge'], 'iduser' => $row['iduser'] ); } echo json_encode($charges); } $bdd->db = null; ?>
The jqXgrid appears,the datas are here but the function update doesn’t work. Can you help me please?
Thanks for your response and best regards.
JORDAN Michael
-
AuthorPosts
You must be logged in to reply to this topic.