Demos

AJAX

This demo shows how to

• enable AJAX requests by using the ajax property
• configure the cell editors
• plug a third-party date picker component and use the editor's delegates
• use custom cell data validators

Please note that the AJAX requests are performed with jQuery, therefore it is has to be imported in the document. If jQuery is not found, ezEditTable will fallback automatically to a plain form submission method.

Also note that is a live demo and your tests will be recorded in a database!

Make sure jQuery is imported in your document before ezEditTable.js. Example of jQuery dependency:

Configuration object:

			//ezEditTable configuration object			
			var ezConfig = {
				editable: true,
				ajax: true,
				auto_save: true,
				auto_save_model: 'row',
				default_selection: 'both',
				editor_model: 'cell',
				editable_on_keystroke: true,
				form_submit_interval: 999, //interval separating data submissions to prevent server`s overload security policy
				cell_editors:[
					{ type: 'none' },
					{ type: 'input', attributes:[['title', 'First name and last name']] },
					{ type: 'input', attributes:[['title', 'email address']] },
					{ type: 'custom', target: 'datePick' },
					{ type: 'input', attributes:[['maxLength', 10], ['title', '10 digits max.\n numbers with 2 decimal places only']], css:'alignRight' },
					{ type: 'boolean' }
				],
				actions:{
					'update': {
						uri: 'php/json.update.record.php', form_method: 'POST',
						param_names: ['id','name','email','startdate','salary','active']
					},
					'insert': {
						uri: 'php/json.insert.record.php', form_method: 'POST',
						param_names: ['id','name','email','startdate','salary','active'],
						default_record: [
							'', 'Employee name...', 'employee@email.com', '2011-01-01','0', 
							'<input type="checkbox" checked />'
						]
					},
					'delete': { 
						uri: 'php/json.delete.record.php', form_method: 'POST', bulk_delete: false,
						param_names: ['id']
					}
				},
				
				//Data validation delegate, the script does not provide data validation tools
				validate_modified_value: function(o, colIndex, oldVal, newVal, cell, editor){
					if(colIndex==2 && oldVal != newVal){ 
						if(!et_ValidateEmail(newVal)){
							alert('Please insert a valid email!'); 
							return false;
						} else return true;
					}
					else if(colIndex == 4 && oldVal != newVal){
						if(!et_IsNumber(newVal)){
							alert('Please insert a valid number with 2 decimal places!');
							return false;
						} else return true;
					}
					else return true;
				},
				//Custom editor functions
				open_custom_editor: function(o, cell, editor){
					if(cell.cellIndex == 3){ 
						if(editor.innerHTML == '') setPickerDate();
						//properties added for date picker onselected delegate (setOnSelectedDelegate)
						datePicker.eg_obj = o; 
						datePicker.eg_cell = cell;
						datePicker.eg_editor = editor;
					} else cell.innerHTML = '';
					cell.appendChild(editor);
					editor.style.display = ''; 
				},
				close_custom_editor: function(o, cell, editor){ 
					if(cell.cellIndex == 3){
						editor.style.display = 'none';
						document.body.appendChild(editor);
					}
				},
				//We define here how to retrieve the custom editor value
				get_custom_editor_value: function(o, editor, colIndex){
					var strDate;
					if(colIndex == 3){//Date picker
						var obj = datePicker.getSelectedDay();
						var m = (obj.month.toString().length==1 ? '0' + obj.month : obj.month);
						var d = (obj.day.toString().length==1 ? '0' + obj.day : obj.day);
						strDate = obj.year+'-'+m+'-'+d;
					}				
					return strDate;
				},
				//We define here how to set the custom editor value
				set_custom_editor_value: function(o, editor, colIndex, val){
					if(colIndex == 3){ 
						var date = et_FormatDate(val, 'YMD');
						datePicker.setSelectedDay({ year:parseInt(date.getFullYear()), month:parseInt(date.getMonth()+1), day:parseInt(date.getDate()) });
					}
				}
			}
		

Below the PHP code used for the CRUD operations in this demo:

Insert:

			<?php
				header("content-type: application/json");
				header("Cache-Control: no-cache");
				
				$ret = array();
			
				if(isset($_POST["id"]) && isset($_POST["name"]) && isset($_POST["email"])){
					$id = $_POST["id"];
					$name = echappement(utf8_urldecode($_POST["name"]));
					$email = echappement(utf8_urldecode($_POST["email"]));
					$startdate = $_POST["startdate"];
					$salary = $_POST["salary"];
					$active = $_POST["active"];		 
					$ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
					$rowId = $_POST["rowId"]; // rowId param is appended to all insert calls
					if($active == 'true') $active = 1;
					else $active = 0;
					
					connect_db();
					$query = "INSERT INTO ".TBL_DEMO_EMPLOYEE." ".
								" VALUES('0','$name','$email','$startdate','$salary',null, null,". 
								"'$ip', null, null, NOW(), null, null, $active, 0)";
					$result = mysql_query($query);
			
					if(mysql_affected_rows() > 0) {
						//last inserted record id
						$insert_id = mysql_insert_id();
						$ret = array( "result" => array("success" => 1, "description" => "Record successfully created.", "id" => $insert_id) );
					} else {
						$ret = array( "result" => array("success" => 0, "description" => "No record(s) affected.", "id" => null) );
					}
					
					close_db();
				} else {
					$ret = array( "result" => array("error" => 1, "description" => "Expected parameter(s) not found.") );
				}
				
				echo json_encode($ret);
			?>		
		

Update:

			<?php
				header("content-type: application/json");
				header("Cache-Control: no-cache");
			
				$ret = array();
			
				if(isset($_POST["rowId"]) && isset($_POST["name"]) && isset($_POST["email"])){
					$id = $_POST["id"];
					$rowId = $_POST["rowId"];
					if($id == ""){ //if id empty then id is retrieved from rowId
						$id = str_replace("tr", "", $rowId);
					}
					$name = echappement(utf8_urldecode($_POST["name"]));
					$email = echappement(utf8_urldecode($_POST["email"]));
					$startdate = $_POST["startdate"];
					$salary = $_POST["salary"];
					$active = $_POST["active"];		 
					$ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
					if($active == 'true') $active = 1;
					else $active = 0;
					connect_db();
					$query = "UPDATE ".TBL_DEMO_EMPLOYEE." SET ".
								"NAME='$name',EMAIL='$email',STARTDATE='$startdate',SALARY='$salary'".
								",MODIP='$ip',MODDATE=NOW(),ACTIVE=$active ".
								"WHERE ID='$id'";
					$result = mysql_query($query);
					
					if(mysql_affected_rows() > 0) {
						$ret = array( "result" => array("success" => 1, "description" => "Record successfully updated.", "id" => $id) );
					} else {
						$ret = array( "result" => array("success" => 0, "description" => "No record(s) affected.", "id" => $id) );
					}
			
					close_db();
				} else {
					$ret = array( "result" => array("error" => 1, "description" => "Expected parameter(s) not found.") );
				}
				
				echo json_encode($ret);
			?>
		

Delete:

			<?php
				header("content-type: application/json");
				header("Cache-Control: no-cache");
				
				$ret = array();
				
				if(isset($_POST["rowId"])){
					$id = isset($_POST["id"]) ? $_POST["id"] : str_replace("tr", "", $_POST["rowId"]);
					$ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];		
					connect_db();
					$query = "UPDATE ".TBL_DEMO_EMPLOYEE." SET ".
								"DELIP='$ip',DELDATE=NOW(),DELETED=1 ".
								"WHERE ID='$id'";
					$result = mysql_query($query);
					
					if(mysql_affected_rows() > 0) {
						$ret = array( "result" => array("success" => 1, "description" => "Record successfully deleted.", "id" => $id) );
					} else {
						$ret = array( "result" => array("success" => 0, "description" => "No record(s) affected.", "id" => $id) );
					}
					
					close_db();
				} else {
					$ret = array( "result" => array("error" => 1, "description" => "Expected parameter(s) not found.") );
				}
				
				echo json_encode($ret);
			?>
		

---

Top of page