jQuery UI Widgets › Forums › Grid › My first CRUD app / Problems
This topic contains 23 replies, has 4 voices, and was last updated by Dimitar 10 years, 9 months ago.
-
Author
-
Hi,
I don’t get this damn thing to work, so help is very appreciated.
I tried to follow the PHP/MySQL example in the documentation section.I have 6 fields:
bh_id -> INT, UNIQUE, AUTO INCREMENT (not to be shown in the grid)
datum -> date
bank -> var char
bank_wert -> float
zu_an -> var char
zu_wert -> floatThe table name is ‘my_table’.
The data.php works, data is shown when executed.
<?php #Include the connect.php file include('connect.php'); #Connect to the database //connection String $connect = mysql_connect($hostname, $username, $password) or die('Could not connect: ' . mysql_error()); //Select The database $bool = mysql_select_db($database, $connect); if ($bool === False) { print "can't find $database"; } // get data and store in a json array $query = "SELECT * FROM my_table"; if (isset($_GET['insert'])) { // INSERT COMMAND $insert_query = "INSERT INTO 'my_table'('datum', 'bank', 'bank_wert', 'zu_an', 'zu_wert') VALUES ('".$_GET['datum']."','".$_GET['bank']."','".$_GET['bank_wert']."','".$_GET['zu_an']."','".$_GET['zu_wert']."')"; $result = mysql_query($insert_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else if (isset($_GET['update'])) { // UPDATE COMMAND $update_query = "UPDATE 'my_table' SET 'datum'='".$_GET['datum']."', 'bank'='".$_GET['bank']."', 'bank_wert'='".$_GET['bank_wert']."', 'zu_an'='".$_GET['zu_an']."', 'zu_wert'='".$_GET['zu_wert']."'"; $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 'my_table' WHERE 'bh_id'='".$_GET['bh_id']."'"; $result = mysql_query($delete_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else { // SELECT COMMAND $result = mysql_query($query) or die("SQL Error 1: " . mysql_error()); while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $my_table[] = array( 'bh_id' => $row['bh_id'], 'datum' => $row['datum'], 'bank' => $row['bank'], 'bank_wert' => $row['bank_wert'], 'zu_an' => $row['zu_an'], 'zu_wert' => $row['zu_wert'] ); } echo json_encode($my_table); } ?>Now the index.html:
<!DOCTYPE html> <html> <head> <title>Titel</title> <meta charset="utf-8"> <link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <script type="text/javascript" src="../../jqwidgets/scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqwidgets/jqx-all.js"></script> <script> // prepare the data var source = { datatype: "json", cache: false, datafields: [ { name: 'bh_id' }, { name: 'datum', type: 'date' }, { name: 'bank', type: 'string' }, { name: 'bank_wert', type: 'number' }, { name: 'zu_an', type: 'string' }, { name: 'zu_wert', type: 'number' }, ], id: 'bh_id', url: 'data.php', // ADD ROW addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command var data = "insert=true&" + $.param(rowdata); $.ajax( { dataType: 'json', url: 'data.php', data: data, cache: false, success: function (data, status, xhr) { // insert command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); }; // DELETE ROW deleterow: function (rowid, commit) { // synchronize with the server - send delete command var data = "delete=true&" + $.param({ bh_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); } }); }, // UPDATE ROW updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command var data = "update=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: '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 grid $("#jqxgrid").jqxGrid ( { source: dataAdapter, theme: 'classic', width: 692, sortable: true, filterable: true, showfilterrow: true, autoheight: true, editable: true , pageable: true, selectionmode: 'singlecell', showstatusbar: true, statusbarheight: 50, showaggregates: true, altrows: true, // define column parameter columns: [ { text: 'Datum', datafield: 'datum', width: 112, cellsformat: 'dd.MM.yyyy', columntype: 'datetimeinput', filtertype: 'date' }, { text: 'Bank', datafield: 'bank', width: 100, columntype: 'combobox', filtertype: 'textbox' }, { text: 'Bank-Wert', datafield: 'bank_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', cellclassname: cellclass, aggregates: ['sum'] }, { text: 'Zahlung unterwegs an', datafield: 'zu_an', width: 180, columntype: 'textbox', filtertype: 'textbox' }, { text: 'ZU-Wert', datafield: 'zu_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', aggregates: ['sum'] } ] } ); $("#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> <div id="jqxgrid"></div> <div style="background-color: #666; width: 694px; height: 35px; margin-top: 3px;"> <div style="float: left; margin: 5px 10px 0 5px;"> <input id="addrowbutton" type="button" value="Add New Row" /> </div> <div style="float: left; margin: 5px 10px 0 5px;"> <input id="deleterowbutton" type="button" value="Delete Selected Row" /> </div> <div style="float: left; margin: 5px 10px 0 5px;"> <input id="updaterowbutton" type="button" value="Update Selected Row" /> </div> </div> </body> </html>When executing the index.html, the page remains blank except the html part (buttons).
Maybe there are one or more syntax errors or some parts are missing or defined the wrong way.Thanks again
WalterHello Walter,
As with all jQWidgets examples, always initialize the widgets in the $(document).ready() callback function.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Sorry, I have accidentally deleted the $(document).ready() function, but it’s still not working.
I have also checked that every opening bracket has a closing bracket.
Here is the – hopefully – complete code again:<!DOCTYPE html> <html> <head> <title>Titel</title> <meta charset="utf-8"> <link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <script type="text/javascript" src="../../jqwidgets/scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqwidgets/jqx-all.js"></script> <script> $(document).ready(function () { // prepare the data var source = { datatype: "json", cache: false, datafields: [ { name: 'bh_id' }, { name: 'datum', type: 'date' }, { name: 'bank', type: 'string' }, { name: 'bank_wert', type: 'number' }, { name: 'zu_an', type: 'string' }, { name: 'zu_wert', type: 'number' }, ], id: 'bh_id', url: 'data.php', // ADD ROW addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command var data = "insert=true&" + $.param(rowdata); $.ajax( { dataType: 'json', url: 'data.php', data: data, cache: false, success: function (data, status, xhr) { // insert command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); }; // DELETE ROW deleterow: function (rowid, commit) { // synchronize with the server - send delete command var data = "delete=true&" + $.param({bh_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); } }); }, // UPDATE ROW updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command var data = "update=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'data.php', cache: false, data: data, success: function (data, status, xhr) { // update command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); } }; //cellclass for cellformatting var cellclass = function (row, columnfield, value) { if (value < 1) { return 'red'; } else return 'green'; } //Localization var getLocalization = function () { var localizationobj = {}; localizationobj.pagergotopagestring = "Seite:"; localizationobj.pagershowrowsstring = "Anzahl Zeilen:"; localizationobj.pagerrangestring = " von "; localizationobj.pagernextbuttonstring = "voriger"; localizationobj.pagerpreviousbuttonstring = "nächster"; localizationobj.sortascendingstring = "Sortiere aufsteigend"; localizationobj.sortdescendingstring = "Sortiere absteigend"; localizationobj.sortremovestring = "Entferne Sortierung"; localizationobj.firstDay = 1; localizationobj.percentsymbol = "%"; localizationobj.currencysymbol = "€"; localizationobj.currencysymbolposition = "after"; localizationobj.decimalseparator = ","; localizationobj.thousandsseparator = "."; localizationobj.emptydatastring = "keine Daten angezeigt"; var days = { // full day names names: ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"], // abbreviated day names namesAbbr: ["Mon", "Dien", "Mitt", "Donn", "Fre", "Sams", "Sonn"], // shortest day names namesShort: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"] }; localizationobj.days = days; var months = { // full month names (13 months for lunar calendards — 13th month should be “” if not lunar) names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""], // abbreviated month names namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""] }; var patterns = { d: "dd.MM.yyyy", D: "dddd, d. MMMM yyyy", t: "HH:mm", T: "HH:mm:ss", f: "dddd, d. MMMM yyyy HH:mm", F: "dddd, d. MMMM yyyy HH:mm:ss", M: "dd MMMM", Y: "MMMM yyyy" } localizationobj.patterns = patterns; localizationobj.months = months; localizationobj.todaystring = "Heute"; localizationobj.clearstring = "Löschen"; return localizationobj; } var dataAdapter = new $.jqx.dataAdapter(source); // initialize grid $("#jqxgrid").jqxGrid ( { source: dataAdapter, theme: 'classic', width: 692, localization: getLocalization(), sortable: true, filterable: true, showfilterrow: true, autoheight: true, editable: true , pageable: true, selectionmode: 'singlecell', showstatusbar: true, statusbarheight: 50, showaggregates: true, altrows: true, // define column parameter columns: [ { text: 'Datum', datafield: 'datum', width: 112, cellsformat: 'd', columntype: 'datetimeinput', filtertype: 'date' }, { text: 'Bank', datafield: 'bank', width: 100, columntype: 'combobox', filtertype: 'textbox',createeditor: function (row, column, editor) { // assign a new data source to the combobox. var list = ['SPK', 'STP', 'VB', 'RK', 'SH', 'EÖ', 'FC' ]; editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Wähle:" }); }, // update the editor's value before saving it. cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { // return the old value, if the new value is empty. if (newvalue == "") return oldvalue; } }, { text: 'Bank-Wert', datafield: 'bank_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', cellclassname: cellclass, aggregates: ['sum'], aggregatesrenderer: function (aggregates, column, element, summaryData) { //var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: //100%;'>"; var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + "' style='float: left; width: 100%; height: 100%;'>"; $.each(aggregates, function (key, value) { //var name = key == 'sum' ? 'S' : '' ; var name = ''; var color = 'green'; if (key == 'sum' && summaryData['sum'] < 0) { color = 'red'; } renderstring += '<div style="color: ' + color + '; position: relative; margin: 4px; text-align: right; ">' + name + ': ' + value + '</div>'; }); renderstring += "</div>"; return renderstring; } }, { text: 'Zahlung unterwegs an', datafield: 'zu_an', width: 180, columntype: 'textbox', filtertype: 'textbox', aggregates: [ { '<b>Ausn. </b>' :function (aggregatedValue, currentValue, column, record) { var sumBank_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'bank_wert', ['sum']); var sumZu_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'zu_wert', ['sum']); return (sumBank_wert.sum + sumZu_wert.sum) * -1; } } ] }, { text: 'ZU-Wert', datafield: 'zu_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', aggregates: ['sum'] } ] } ); $("#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'> <style> .green { color: #187248; } .red { color: #c72f2f;} </style> <div id="jqxgrid"></div> <div style="background-color: #666; width: 694px; height: 35px; margin-top: 0px;"> <div style="float: left; margin: 5px 10px 0 5px;"> <input id="addrowbutton" type="button" value="Add New Row" /> </div> <div style="float: left; margin: 5px 10px 0 5px;"> <input id="deleterowbutton" type="button" value="Delete Selected Row" /> </div> <div style="float: left; margin: 5px 10px 0 5px;"> <input id="updaterowbutton" type="button" value="Update Selected Row" /> </div> </div> </body> </html>Thank you
Walterhai,
i have same problem about CRUD, i dont know what the problem that make this script not running, about query or about that script, i think i already input same script like tutorial you make, and really, 2 weeks try to find what’s wrong with this php CRUD,
soorry noob, i really need someone help right now. 🙂
thankyou
SigitHello Walter and Sigit,
When you open your browser’s developer tools while running your example (with F12) you can see the errors on the page. Please post these errors here so that we may be able to help you further.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Here are the syntax errors, I could solve some by myself, there are 3 left (not sure about the bracket):
16:56:25.723 SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.10.2.min.js:1 16:56:25.729 Error: http://fairdrucker.lima-city.de/jqwidgets/scripts/jquery-1.10.2.min.js is being assigned a //# sourceMappingURL, but already has one 16:56:25.958 SyntaxError: missing ) after condition bh_beta.html:278There are also a lot of CSS-Errors:
16:56:25.699 Unknown property '-moz-border-radius-topleft'. Declaration dropped. jqx.base.css:5 16:56:25.699 Unknown property '-moz-border-radius-topright'. Declaration dropped. jqx.base.css:12 16:56:25.699 Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. jqx.base.css:19 16:56:25.699 Unknown property '-moz-border-radius-bottomright'. Declaration dropped. jqx.base.css:26 16:56:25.699 Unknown property '-moz-border-radius-topleft'. Declaration dropped. jqx.base.css:33 16:56:25.699 Unknown property '-moz-border-radius-topright'. Declaration dropped. jqx.base.css:36 16:56:25.699 Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. jqx.base.css:43 16:56:25.699 Unknown property '-moz-border-radius-bottomright'. Declaration dropped. jqx.base.css:46 16:56:25.699 Unknown property '-moz-border-radius-topright'. Declaration dropped. jqx.base.css:53 16:56:25.699 Unknown property '-moz-border-radius-bottomright'. Declaration dropped. jqx.base.css:56 16:56:25.700 Unknown property '-moz-border-radius-topleft'. Declaration dropped. jqx.base.css:63 16:56:25.700 Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. jqx.base.css:66 16:56:25.700 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:73 16:56:25.700 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:80 16:56:25.700 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:93 16:56:25.700 Unknown property 'align'. Declaration dropped. jqx.base.css:96 16:56:25.700 Unknown property 'valign'. Declaration dropped. jqx.base.css:96 16:56:25.700 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:99 16:56:25.700 Unknown property 'user-select'. Declaration dropped. jqx.base.css:130 16:56:25.700 Error in parsing value for 'vertical-align'. Declaration dropped. jqx.base.css:143 16:56:25.700 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:145 16:56:25.700 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:241 16:56:25.700 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:491 16:56:25.700 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:502 16:56:25.700 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:627 16:56:25.700 Unknown property 'zoom'. Declaration dropped. jqx.base.css:650 16:56:25.701 Unknown property 'zoom'. Declaration dropped. jqx.base.css:662 16:56:25.701 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. jqx.base.css:728 16:56:25.701 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:909 16:56:25.701 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:922 16:56:25.701 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:935 16:56:25.701 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:947 16:56:25.701 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:1069 16:56:25.702 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:1405 16:56:25.702 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:1411 16:56:25.702 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:1417 16:56:25.702 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:1423 16:56:25.702 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:1678 16:56:25.702 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:1692 16:56:25.702 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:1714 16:56:25.702 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:1735 16:56:25.703 Unknown property 'align'. Declaration dropped. jqx.base.css:2214 16:56:25.703 Unknown property 'valign'. Declaration dropped. jqx.base.css:2215 16:56:25.703 Unknown property '-moz-border-radius-topleft'. Declaration dropped. jqx.base.css:2235 16:56:25.703 Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. jqx.base.css:2238 16:56:25.703 Unknown property '-moz-background-clip'. Declaration dropped. jqx.base.css:2242 16:56:25.703 Unknown property '-moz-border-radius-topleft'. Declaration dropped. jqx.base.css:2246 16:56:25.703 Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. jqx.base.css:2249 16:56:25.703 Unknown property '-moz-border-radius-topleft'. Declaration dropped. jqx.base.css:2252 16:56:25.703 Unknown property '-moz-border-radius-bottomright'. Declaration dropped. jqx.base.css:2255 16:56:25.703 Unknown property '-moz-background-clip'. Declaration dropped. jqx.base.css:2260 16:56:25.703 Unknown property '-moz-background-clip'. Declaration dropped. jqx.base.css:2270 16:56:25.703 Unknown pseudo-class or pseudo-element '-ms-clear'. Ruleset ignored due to bad selector. jqx.base.css:2272 16:56:25.703 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:2342 16:56:25.704 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:2662 16:56:25.704 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:2668 16:56:25.704 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:2671 16:56:25.704 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:2679 16:56:25.704 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:2690 16:56:25.704 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:2843 16:56:25.704 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:3036 16:56:25.704 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3064 16:56:25.704 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3088 16:56:25.704 Unknown property 'zoom'. Declaration dropped. jqx.base.css:3088 16:56:25.704 Unknown property '-moz-background-clip'. Declaration dropped. jqx.base.css:3088 16:56:25.704 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3090 16:56:25.704 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3093 16:56:25.704 Unknown property '-moz-background-clip'. Declaration dropped. jqx.base.css:3093 16:56:25.705 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3095 16:56:25.705 Unknown property '-moz-background-clip'. Declaration dropped. jqx.base.css:3095 16:56:25.705 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3097 16:56:25.705 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3098 16:56:25.705 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3099 16:56:25.705 Expected 'none' or URL but found 'Alpha('. Error in parsing value for 'filter'. Declaration dropped. jqx.base.css:3101 16:56:25.705 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3103 16:56:25.705 Expected declaration but found '*'. Skipped to next declaration. jqx.base.css:3113 16:56:25.705 Unknown property '-moz-background-clip'. Declaration dropped. jqx.base.css:3153 16:56:25.705 Unknown pseudo-class or pseudo-element '-ms-reveal'. Ruleset ignored due to bad selector. jqx.base.css:3164 16:56:25.705 Unknown pseudo-class or pseudo-element '-ms-clear'. Ruleset ignored due to bad selector. jqx.base.css:3167 16:56:25.705 Unknown pseudo-class or pseudo-element '-ms-clear'. Ruleset ignored due to bad selector. jqx.base.css:3170 16:56:25.705 Unknown pseudo-class or pseudo-element '-ms-value'. Ruleset ignored due to bad selector. jqx.base.css:3173 16:56:25.705 Unknown property '-moz-background-clip'. Declaration dropped. jqx.base.css:3195 16:56:25.705 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:3393 16:56:25.705 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:3401 16:56:25.705 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:3460 16:56:25.705 Unknown property '-moz-background-clip'. Declaration dropped. jqx.base.css:3463 16:56:25.705 Unknown property '-moz-box-shadow'. Declaration dropped. jqx.base.css:3490 16:56:25.705 Unknown property '-moz-box-shadow'. Declaration dropped. jqx.base.css:3496 16:56:25.705 Unknown property '-moz-border-radius-topleft'. Declaration dropped. jqx.base.css:3524 16:56:25.705 Unknown property '-moz-border-radius-topright'. Declaration dropped. jqx.base.css:3527 16:56:25.705 Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. jqx.base.css:3534 16:56:25.705 Unknown property '-moz-border-radius-bottomright'. Declaration dropped. jqx.base.css:3537 16:56:25.706 Unknown property '-moz-box-shadow'. Declaration dropped. jqx.base.css:3587 16:56:25.706 Unknown property '-moz-box-shadow'. Declaration dropped. jqx.base.css:3597 16:56:25.706 Unknown property 'box-sizing'. Declaration dropped. jqx.base.css:3598 16:56:25.706 Unknown property '-moz-box-shadow'. Declaration dropped. jqx.base.css:3616 16:56:25.706 Unknown property '-moz-border-radius'. Declaration dropped. jqx.base.css:3617 16:56:25.706 Error in parsing value for 'background-image'. Declaration dropped. jqx.darkblue.css:4 16:56:25.990 Unknown property 'box-sizing'. Declaration dropped. bh_beta.htmlMy Browser is the latest Firefox.
Thank you
WalterHi Walter,
The first two errors are related to jQuery. Please update your jQuery to 1.11.0 and they should be fixed. As for the missing
), check the file bh_beta.html thoroughly for it.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thank you for your help.
Where do I find the 1.11.0 version?
I’ve downloaded the package 3.2.1 again, but it only contains the old version.Walter
Hi Walter,
You can download it from jQuery’s website: http://jquery.com/download/.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
I have updated to 1.11.0 – and yes the errors were gone. I have also solved the syntax error.
The grid and the data is shown again – so we are a little closer to the solution!I noticed that the generaterow function is missing, so I tried to implement and modify it according to my data.
<script> var generaterow = function (bh_id) { var row = {}; row["bh_id"] = bh_id; row["datum"] = datum; row["bank"] = bank; row["bank_wert"] = bank_wert; row["zu_an"] = zu_an; row["zu_wert"] = zu_wert; return row; }Not sure where the error is, but the buttons still don’t work.
When pressing the ‘Add New Row’ button, it should generate a empty row.
For reference here is the complete html again:<!DOCTYPE html> <html> <head> <title>Titel</title> <meta charset="utf-8"> <link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <script type="text/javascript" src="../../jqwidgets/scripts/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqwidgets/jqx-all.js"></script> <script type="text/javascript" src="../../jqwidgets/scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/demos/sampledata/generatedata.js"></script> <script> var generaterow = function (bh_id) { var row = {}; row["bh_id"] = bh_id; row["datum"] = datum; row["bank"] = bank; row["bank_wert"] = bank_wert; row["zu_an"] = zu_an; row["zu_wert"] = zu_wert; return row; } $(document).ready(function () { // prepare the data var source = { datatype: "json", cache: false, datafields: [ { name: 'bh_id' }, { name: 'datum', type: 'date' }, { name: 'bank', type: 'string' }, { name: 'bank_wert', type: 'number' }, { name: 'zu_an', type: 'string' }, { name: 'zu_wert', type: 'number' }, ], id: 'bh_id', url: 'data.php', // ADD ROW addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command var data = "insert=true&" + $.param(rowdata); $.ajax( { dataType: 'json', url: 'data.php', data: data, cache: false, success: function (data, status, xhr) { // insert command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); }, // DELETE ROW deleterow: function (rowid, commit) { // synchronize with the server - send delete command var data = "delete=true&" + $.param({bh_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); } }); }, // UPDATE ROW updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command var data = "update=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'data.php', cache: false, data: data, success: function (data, status, xhr) { // update command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); } }; //cellclass for cellformatting var cellclass = function (row, columnfield, value) { if (value < 1) { return 'red'; } else return 'green'; } //Localization var getLocalization = function () { var localizationobj = {}; localizationobj.pagergotopagestring = "Seite:"; localizationobj.pagershowrowsstring = "Anzahl Zeilen:"; localizationobj.pagerrangestring = " von "; localizationobj.pagernextbuttonstring = "voriger"; localizationobj.pagerpreviousbuttonstring = "nächster"; localizationobj.sortascendingstring = "Sortiere aufsteigend"; localizationobj.sortdescendingstring = "Sortiere absteigend"; localizationobj.sortremovestring = "Entferne Sortierung"; localizationobj.firstDay = 1; localizationobj.percentsymbol = "%"; localizationobj.currencysymbol = "€"; localizationobj.currencysymbolposition = "after"; localizationobj.decimalseparator = ","; localizationobj.thousandsseparator = "."; localizationobj.emptydatastring = "keine Daten angezeigt"; var days = { // full day names names: ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"], // abbreviated day names namesAbbr: ["Mon", "Dien", "Mitt", "Donn", "Fre", "Sams", "Sonn"], // shortest day names namesShort: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"] }; localizationobj.days = days; var months = { // full month names (13 months for lunar calendards — 13th month should be “” if not lunar) names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""], // abbreviated month names namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""] }; var patterns = { d: "dd.MM.yyyy", D: "dddd, d. MMMM yyyy", t: "HH:mm", T: "HH:mm:ss", f: "dddd, d. MMMM yyyy HH:mm", F: "dddd, d. MMMM yyyy HH:mm:ss", M: "dd MMMM", Y: "MMMM yyyy" } localizationobj.patterns = patterns; localizationobj.months = months; localizationobj.todaystring = "Heute"; localizationobj.clearstring = "Löschen"; return localizationobj; } //var dataAdapter = new $.jqx.dataAdapter(source, //{ // downloadComplete: function (data, status, xhr) { }, // loadComplete: function (data) { }, // loadError: function (xhr, status, error) { } //}); var dataAdapter = new $.jqx.dataAdapter(source); // initialize grid $("#jqxgrid").jqxGrid ( { source: dataAdapter, theme: 'classic', width: 692, localization: getLocalization(), sortable: true, filterable: true, //filtermode: 'excel' , //autoshowfiltericon: false , showfilterrow: true, autoheight: true, editable: true , pageable: true, selectionmode: 'singlecell', showstatusbar: true, statusbarheight: 50, showaggregates: true, altrows: true, //selectionmode: 'multiplecellsadvanced' , // define column parameter columns: [ { text: 'Datum', datafield: 'datum', width: 112, cellsformat: 'd', columntype: 'datetimeinput', filtertype: 'date' }, { text: 'Bank', datafield: 'bank', width: 100, columntype: 'combobox', filtertype: 'textbox',createeditor: function (row, column, editor) { // assign a new data source to the combobox. var list = ['SPK', 'STP', 'VB', 'RK', 'SH', 'EÖ', 'FC' ]; editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Wähle:" }); }, // update the editor's value before saving it. cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { // return the old value, if the new value is empty. if (newvalue == "") return oldvalue; } }, { text: 'Bank-Wert', datafield: 'bank_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', cellclassname: cellclass, aggregates: ['sum'], aggregatesrenderer: function (aggregates, column, element, summaryData) { //var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: //100%;'>"; var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + "' style='float: left; width: 100%; height: 100%;'>"; $.each(aggregates, function (key, value) { var name = key == 'sum' ? 'S' : '' ; var color = 'green'; if (key == 'sum' && summaryData['sum'] < 0) { color = 'red'; } renderstring += '<div style="color: ' + color + '; position: relative; margin: 4px; text-align: right; ">' + name + ': ' + value + '</div>'; }); renderstring += "</div>"; return renderstring; } }, { text: 'Zahlung unterwegs an', datafield: 'zu_an', width: 180, columntype: 'textbox', filtertype: 'textbox', aggregates: [ { '<b>Ausn. </b>' :function (aggregatedValue, currentValue, column, record) { var sumBank_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'bank_wert', ['sum']); var sumZu_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'zu_wert', ['sum']); return (sumBank_wert.sum + sumZu_wert.sum) * -1; } } ] }, { text: 'ZU-Wert', datafield: 'zu_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', aggregates: ['sum'] } ] } ); $("#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'> <style> .green { color: #187248; } .red { color: #c72f2f;} </style> <div id="jqxgrid"></div> <div style="background-color: #666; width: 694px; height: 35px; margin-top: 0px;"> <div style="float: left; margin: 5px 10px 0 5px;"> <input id="addrowbutton" type="button" value="Add New Row" /> </div> <div style="float: left; margin: 5px 10px 0 5px;"> <input id="deleterowbutton" type="button" value="Delete Selected Row" /> </div> <div style="float: left; margin: 5px 10px 0 5px;"> <input id="updaterowbutton" type="button" value="Update Selected Row" /> </div> </div> </body> </html>Thank you
Walterhii dimitiar, hii wfr..
i’ve got same problem at you, i already update jquery ver. 1.11.0
but i’ve got nothing.. this is my tables->varchar
a->varchartable name ‘tes’;
grid_data.php to process query
show.oho to process table//grid_data.php
<?php #Include the connect.php file include('konek.php'); #Connect to the database //connection String $connect = mysql_connect($hostname, $username, $password) or die('Could not connect: ' . mysql_error()); //Select The database $bool = mysql_select_db($database, $connect); if ($bool === False){ print "can't find $database"; } // get data and store in a json array $query = "SELECT * FROM tes"; if (isset($_GET['insert'])) { // INSERT COMMAND $insert_query = "INSERT INTO <code>tes</code>(<code>s</code>, <code>a</code>) VALUES ('".$_GET['s']."','".$_GET['a']."')"; $result = mysql_query($insert_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else if (isset($_GET['update'])) { // UPDATE COMMAND $update_query = "UPDATE <code>tes</code> SET <code>a</code>='".$_GET['a']."' WHERE <code>s</code>='".$_GET['s']."'"; $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 <code>tes</code> WHERE <code>s</code>='".$_GET['s']."'"; $result = mysql_query($delete_query) or die("SQL Error 1: " . mysql_error()); echo $result; } else { // SELECT COMMAND $result = mysql_query($query) or die("SQL Error 1: " . mysql_error()); while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $employees[] = array( 's' => $row['s'], 'a' => $row['a'] ); } echo json_encode($employees); } ?>//show.php
<!DOCTYPE html> <html lang="en"> <head> <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.10.2.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/jqxcheckbox.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../.../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = { datatype: "json", cache: false, datafields: [ { name: 's'}, { name: 'a'} ], id: 's', url: 'grid_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: 'grid_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({EmployeeID: rowid}); $.ajax({ dataType: 'json', url: 'grid_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: 'grid_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: 500, height: 350, source: dataAdapter, columns: [ { text: 's', datafield: 's', width: 100 }, { text: 'a', datafield: 'a', width: 100 }, ] }); $("#addrowbutton").jqxButton(); $("#deleterowbutton").jqxButton(); $("#updaterowbutton").jqxButton(); // 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>thank you 😀
here my error code ….
ReferenceError: generaterow is not defined var datarow = generaterow(); show.php (line 107) ReferenceError: generaterow is not defined var datarow = generaterow(rowscount + 1); show.php (line 118) ReferenceError: generaterow is not defined var datarow = generaterow(); show.php (line 107) ReferenceError: generaterow is not defined var datarow = generaterow(rowscount + 1);regards ..
Hi sigit,
The error seems to be obvious. A function called “generaterow” is not defined.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comhai mr peter…
i am to noob to handle this..
how to defined that function?many thanks
sigit
Hi sigit,
The Create, Remove, Update demo available in the Demos section of jqxGrid shows how it should be implemented.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.