Demos

AJAX actions

This demo shows how to

• implement custom insert and update operations by using the on_insert_submit and on_update_submit delegates
• 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 featured in this demo are performed with jQuery (v.1.7.2).

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

Configuration object:

			//ezEditTable configuration object			
			var ezConfig = {
				editable: true,
				auto_save: true,
				default_selection: 'both',
				editor_model: 'cell',
				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/employeeUpdateXhr.php', form_method: 'POST',
						on_update_submit: function(o, rows){
							o.config.exec_requests(o, rows, 'update');
						},
						param_names: ['id','name','email','startdate','salary','active'],
						//additional custom properties for ajax_request
						ajaxContId: 'divAjaxOpsCont', ajaxId: 'divAjaxOps'
					},
					'insert': { 
						uri: 'php/employeeInsertXhr.php', form_method: 'POST', 
						on_insert_submit: function(o, rows){
							o.config.exec_requests(o, rows, 'insert');
						},
						param_names: ['id','name','email','startdate','salary','active'],
						default_record: ['', 'Employee name...', 'employee@email.com', '2011-01-01','0', '<input type="checkbox" checked>'],
						//additional custom properties for ajax_request
						ajaxContId: 'divAjaxOpsCont', ajaxId: 'divAjaxOps' 
					},
					'delete': { 
						uri: 'php/script.deleteEmployee.php', submit_method: 'script', bulk_delete: false,
						param_names: ['id']
					}
				},
				
				/************************************************************
					CUSTOM DELEGATE METHOD FOR INSERT AND UPDATE OPERATIONS
				*************************************************************/
				exec_requests: function(o, rows, dbAction){
					var action = o.config.actions[dbAction]; //config object: actions.insert or actions.update 
					var cont = o.Get(action.ajaxContId); //messages container element
		
					for(var i=0; i<rows.length; i++){
						var r = rows[i];
						var rowIndex = r[0];
						var rowId = o.table.rows[rowIndex].getAttribute('id');
						var rowObj = r[1]; //ezEditTable row object
						var rowValues = rowObj.values; //values prop returns array with cell values
						var params = '';
						
						//parameters object is constructed below 
						for(var j=0; j<rowValues.length; j++){
							params += o[dbAction+'Params'][j] + '=' + encodeURIComponent(rowValues[j]) + '&';
						}
						params += 'rIndex=' + rowIndex + '&rowId=' + rowId;
		
						var div = o.CreateElm('div', ['id', 'div_r'+rowIndex]);
						cont.appendChild(div);
						$('#'+action.ajaxId).show('slow');
						
						var c = 0; //successful requests counter
						
						//jQuery Ajax request
						var xhr = $.ajax({
						  url: action.uri,
						  context: $('#'+div.id),
						  type: action.form_method,
						  data: params,
						  dataType: 'html'
						})
						.done(function(data) { 
							this.html(data);
							if(rowIndex){ //Modified cell mark is removed
								o.Editable.RemoveModifiedCellMark(rowIndex);
								c++;
							}
							if(c==rows.length){ 
							//action requests completed, ezEditTable array re-initialized
								if(dbAction === 'update'){ o.Editable.modifiedRows = []; }
								if(dbAction === 'insert'){
									o.Editable.newRows = [];
									o.Editable.addedRows = [];
									$(o.table.rows).removeClass(o.newRowClass);
								}
							}
						})
						.fail(function(jqXHR, textStatus){
							cont.innerHTML = 'Ouups an error occured! Data could not be updated!
'+textStatus;
						});
					}
				},
				/************************************************************/
				
				//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 server-side PHP codes for DB operations used in this demo:

Insert:

			<?php
				header("content-type: text/html");
				header("Cache-Control: no-cache"); 
				require( "../config/config.inc.php" );
				require_once( "../".DIR_INC.PHP_FNS );
			
				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)";		
					mysql_query($query);
					
					//last inserted record id
					$id = mysql_insert_id();
					echo "<script>";
					echo "var tr = document.getElementById('".$rowId ."');";
					echo "if(tr){ tr.setAttribute('id', 'tr".$id."'); }"; 
					echo "</script>";
					echo "[New row ".$id."] ".$name."'s data successfully inserted!";
					
					close_db();
				} else {
					echo "Data could not be saved! Expected params not found!";
				}
			?>		
		

Update:

			<?php
				header("content-type: text/html");
				header("Cache-Control: no-cache"); 
				require( "../config/config.inc.php" );
				require_once( "../".DIR_INC.PHP_FNS );
			
				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'";
					mysql_query($query);
					echo "[RowId ".$id."] ".$name."'s data successfully updated!";
					close_db();
				} else {
					echo "Data could not be saved! Expected params not found!";
				}
			?>
		

Delete:

Records deleting is performed in this case via <script> tag inclusion method, ... submit_method: 'script', ... (GET http request), therefore do not forget to specify the javascript content-type in your server-side code:

			<?php
				header("content-type: application/x-javascript");
				if(isset($_GET["id"])){
					$id = $_GET["id"];
					$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'";
					mysql_query($query);
					close_db();
				}
			?>
		

---

Top of page