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, 3 months ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
  • My first CRUD app / Problems #50730

    wfr
    Participant

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

    The 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
    Walter

    My first CRUD app / Problems #50749

    Dimitar
    Participant

    Hello Walter,

    As with all jQWidgets examples, always initialize the widgets in the $(document).ready() callback function.

    Best Regards,
    Dimitar

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

    My first CRUD app / Problems #50790

    wfr
    Participant

    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
    Walter

    My first CRUD app / Problems #50800

    sigit
    Participant

    hai,

    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
    Sigit

    My first CRUD app / Problems #50812

    Dimitar
    Participant

    Hello 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,
    Dimitar

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

    My first CRUD app / Problems #50864

    wfr
    Participant

    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:278

    There 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.html
    

    My Browser is the latest Firefox.
    Thank you
    Walter

    My first CRUD app / Problems #50882

    Dimitar
    Participant

    Hi 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,
    Dimitar

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

    My first CRUD app / Problems #50938

    wfr
    Participant

    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

    My first CRUD app / Problems #50960

    Dimitar
    Participant

    Hi Walter,

    You can download it from jQuery’s website: http://jquery.com/download/.

    Best Regards,
    Dimitar

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

    My first CRUD app / Problems #51085

    wfr
    Participant

    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
    Walter

    My first CRUD app / Problems #51103

    sigit
    Participant

    hii 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 table

    s->varchar
    a->varchar

    table 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 😀

    • This reply was modified 10 years, 4 months ago by  sigit.
    • This reply was modified 10 years, 4 months ago by  sigit.
    My first CRUD app / Problems #51106

    sigit
    Participant

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

    My first CRUD app / Problems #51119

    Peter Stoev
    Keymaster

    Hi sigit,

    The error seems to be obvious. A function called “generaterow” is not defined.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    My first CRUD app / Problems #51125

    sigit
    Participant

    hai mr peter…

    i am to noob to handle this..
    how to defined that function?

    many thanks

    sigit

    My first CRUD app / Problems #51128

    Peter Stoev
    Keymaster

    Hi sigit,

    The Create, Remove, Update demo available in the Demos section of jqxGrid shows how it should be implemented.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.