Demos

Custom actions

This demo shows how to

Please note that the AJAX requests featured in this demo are performed with the Prototype javascript framework (v.1.6.0). This example focusses on how to implement a custom logic to submit data to the server and it uses Prototype for AJAX calls as an example. You may decide to use another client-side framework to communicate ajaxly with the server.

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

Id Name Email Start Date Salary Active
53217Employee name...employee@email.com2011-01-010.00
53216hjkhkHUhuemployee@email.com2011-01-010.00
53215ccvcvcvemployee@email.com2011-01-010.00
53213Employee name...employee@email.com2011-01-010.00
53212Employee name...employee@email.com2011-01-010.00
53211Employee name...employee@email.com2011-01-010.00
53210Employee name...employee@email.com2011-01-010.00
53209Employee name...employee@email.com2011-01-010.00
53208Employee name...employee@email.com2011-01-010.00
53206Employee name...employee@email.com2011-01-010.00
53205efsdfemployee@email.com2011-01-130.00
53204Josejmsosa77@hotmail.com2011-01-010.00
53202fefsdfemployee@email.com2011-01-010.00
53200Employee name...employee@email.com2011-01-010.00
53199Employee name...employee@email.com2011-01-010.00
53198Employee name...employee@email.com2011-01-010.00
53197Employee name...employee@email.com2011-01-010.00
53196capotemployee@email.com2011-01-010.00
53195JUAN PEREZ PEREZemployee@email.com2011-01-010.00
53189test2employee@email.com2011-01-010.00
53187testbbbemployee@email.l2011-01-010.00
53186asdfasdfemployee@email.com2018-01-072.23
53185dfdemployee@email.com2011-01-010.00
53184fgfgfemployee@email.com2011-01-010.00
53183Employee name...employee@email.com2011-01-010.00
53182hjgfvih uyoiug oi hoilemployee@email.com2011-01-010.00
53181Employee name...employee@email.com2011-01-010.00
53180Employee name...employee@email.com2011-01-120.00
53179Employee name...employee@email.com2011-01-010.00
53178Employee name...employee@email.com2011-01-010.00
53177Employee name...employee@email.com2011-01-010.00
53176Employee name...employee@email.com2011-01-010.00
53175Employee name...employee@email.com2011-01-010.00
53174Employee name...employee@email.com2011-01-010.00
53173Employee name...employee@email.com2011-01-010.00
53172Employee name...employee@email.com2011-01-010.00
53171Employee name...employee@email.com2011-01-010.00
53170Employee name...employee@email.com2011-01-010.00
53169Employee name...employee@email.com2011-01-010.00
53168Employee name...employee@email.com2011-01-010.00
53167Employee name...employee@email.com2011-01-010.00
53166Employee name...employee@email.com2011-01-010.00
53165Employee name...employee@email.com2011-01-010.00
53164Employee name...employee@email.com2011-01-010.00
53163Employee name...employee@email.com2011-01-010.00
53162Employee name...employee@email.com2011-01-010.00
53161Employee name...employee@email.com2011-01-010.00
53160Employee name...employee@email.com2011-01-010.00
53159Employee name...employee@email.com2011-01-010.00
53158Employee name...employee@email.com2011-01-010.00
53157Employee name...employee@email.com2011-01-010.00
53156Employee name...employee@email.com2011-01-010.00
53155Employee name...employee@email.com2011-01-010.00
53154Employee name...employee@email.com2011-01-010.00
53153Employee name...employee@email.com2011-01-010.00
53152Employee name...employee@email.com2011-01-010.00
53151Employee name...employee@email.com2011-01-010.00
53150Employee name...employee@email.com0000-00-000.00
53149Employee name...employee@email.com2011-01-010.00
53148Ca roemployee@email.com2011-01-160.00
53147Employee name...employee@email.com2011-05-161000.00
53146Employee name...employee@email.com2011-01-010.00
53144Employee name...employee@email.com2011-01-010.00
53143Employee name...employee@email.com2011-01-010.00
53142Employee name...employee@gmail.com2011-01-010.00
53141employee@email.com2011-01-010.00
53138Ankaemployee@email.com2019-01-240.28
53137Marekemployee1@email.com2011-01-0112.25
53135Matolekemployee@email.com2011-01-01236.00
53133Employee name...employee@email.com2011-01-011258.02
53132Employee name...employee@email.com2011-01-010.00
53131Employee name...employee@email.com2011-01-010.00
53130Employee name...employee@email.com2011-01-010.00
53129Employee name...employee@email.com2011-01-010.00
53128Employee name...employee@email.com2011-01-010.00
53127Employee name...employee@email.com2011-01-010.00
53126Employee name...employee@email.com2011-01-010.00
53125Employee name...employee@email.com2011-01-010.00
53124Employee name...employee@email.com2011-01-010.00
53123Employee name...employee@email.com2011-01-010.00
53122Employee name...employee@email.com2011-01-010.00
53121Employee name...employee@email.com2011-01-010.00
53120Employee name...employee@email.com2011-01-010.00
53119Employee name...employee@email.com2011-01-010.00
53118Employee name...employee@email.com2011-01-010.00
53117Employee name...employee@email.com2011-01-010.00
53116Employee name...employee@email.com2011-01-010.00
53115Employee name...employee@email.com2011-01-010.00
53114Employee name...employee@email.com2011-01-010.00
53113Employee name...employee@email.com2011-01-010.00
53112Employee name...employee@email.com2011-01-010.00
53111Employee name...employee@email.com2011-01-010.00
53110Employee name...employee@email.com2011-01-010.00
53109Employee name...employee@email.com2011-01-010.00
53108Employee name...employee@email.com2011-01-010.00
531072employee@email.com2011-01-010.00
53106Employee name...employee@email.com2011-01-010.00
53105Employee name...employee@email.com2011-01-010.00
53104Employee name...employee@email.com2011-01-010.00
53103Employee name...employee@email.com2011-01-010.00

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 rowObj = r[1]; //ezEditTable row object
						var rowValues = rowObj.values; //values prop returns array with cell values
						var params = '';
						//url parameters string is constructed below 
						for(var j=0; j<rowValues.length; j++){
							params += o[dbAction+'Params'][j] + '=' + encodeURIComponent(rowValues[j]) + '&';
						}
						params += 'rIndex=' + rowIndex;
						
						var div = o.CreateElm('div', ['id', 'div_r'+rowIndex]);
						cont.appendChild(div);
						o.Get(action.ajaxId).style.display = 'block';
						
						var c = 0; //successful requests counter
						
						//Prototype Ajax Request
						var ajaxReq = new Ajax.Updater(
							div.id, action.uri, 
							{
								method: action.form_method,
								parameters: params,
								onSuccess: function(transport){
									var rIndex = transport.request.parameters.rIndex; //rowIndex is retrieved from response object
									if(rIndex){ //Modified cell mark is removed
										o.Editable.RemoveModifiedCellMark(rIndex);
										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 = [];
										}
									}
								},
								onException: function(obj, ex){ 
									cont.innerHTML = 'Ouups an error occured! Data could not be updated!
'+ex.message; } } ); } }, /************************************************************/ //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 "[New row ".$id."] <b>".$name."</b>'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
E.n.j.o.y.  ads-free content!