PHP Classes

File: ajaxgrid.js

Recommend this page to a friend!
  Classes of Er. Rochak Chauhan   AJAX Grid   ajaxgrid.js   Download  
File: ajaxgrid.js
Role: Auxiliary data
Content type: text/plain
Description: Javascript File
Class: AJAX Grid
Edit and save table data without page refreshing
Author: By
Last change:
Date: 18 years ago
Size: 5,330 bytes
 

Contents

Class file image Download
var url = 'edit.php'; // The file on the server, which saves the edited text var idName1 = 'r1c1'; // This ID should be same as $idName1 in example.php var idName2 = 'r1c2'; // This ID should be same as $idName2 in example.php var idName3 = 'r2c1'; // This ID should be same as $idName3 in example.php var idName4 = 'r2c2'; // This ID should be same as $idName4 in example.php var updateDelay = 1000; // in microseconds; it specifies the delay in which the grid id updated var spanId = idName1; Event.observe(window, 'load', init, false); function init(){ makeEditable(idName1); makeEditable(idName2); makeEditable(idName3); makeEditable(idName4); } function makeEditable(id){ Event.observe(id, 'click', function(){edit($(id))}, false); Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false); Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false); } function edit(obj){ Element.hide(obj); var textarea = '<div id="'+obj.id+'_editor"><textarea id="'+obj.id+'_edit" name="'+obj.id+'" rows="4" cols="33">'+trim(obj.innerHTML)+'</textarea>'; var button = '<div style="align:center;"><input id="'+obj.id+'_save" type="button" value="SAVE" /> OR <input id="'+obj.id+'_cancel" type="button" value="CANCEL" /></div></div>'; new Insertion.After(obj, textarea+button); Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false); Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false); } function showAsEditable(obj, clear){ if (!clear){ Element.addClassName(obj, 'editable'); }else{ Element.removeClassName(obj, 'editable'); } } function saveChanges(obj){ var new_content = escape($F(obj.id+'_edit')); obj.innerHTML = "Saving..."; cleanUp(obj, true); var success = function(t){editComplete(t, obj);} var failure = function(t){editFailed(t, obj);} var pars = 'id='+obj.id+'&content='+new_content; var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure}); } function cleanUp(obj, keepEditable){ Element.remove(obj.id+'_editor'); Element.show(obj); if (!keepEditable) showAsEditable(obj, true); } function editComplete(t, obj){ obj.innerHTML = t.responseText; showAsEditable(obj, true); } function editFailed(t, obj){ obj.innerHTML = 'Sorry, the update failed.'; cleanUp(obj); } function trim(inputString) { if (typeof inputString != "string") { return inputString; } var retValue = inputString; var ch = retValue.substring(0, 1); while (ch == " ") { retValue = retValue.substring(1, retValue.length); ch = retValue.substring(0, 1); } ch = retValue.substring(retValue.length-1, retValue.length); while (ch == " ") { retValue = retValue.substring(0, retValue.length-1); ch = retValue.substring(retValue.length-1, retValue.length); } while (retValue.indexOf(" ") != -1) { retValue = retValue.substring(0, retValue.indexOf(" ")) + retValue.substring(retValue.indexOf(" ")+1, retValue.length); } return retValue; } // Code to Update Grid After var http = createRequestObject(); function createRequestObject() { var ro; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP"); } else{ ro = new XMLHttpRequest(); } return ro; } // functions to upgrade grids function updateGridRow1Col1() { http.open('get', 'grid.php?spanId='+escape(idName1)); http.onreadystatechange = handleResponse11; http.send(null); setTimeout('updateGridRow1Col1()', updateDelay+100); } function updateGridRow1Col2() { http.open('get', 'grid.php?spanId='+escape(idName2)); http.onreadystatechange = handleResponse12; http.send(null); setTimeout('updateGridRow1Col2()', updateDelay+200); } function updateGridRow2Col1() { http.open('get', 'grid.php?spanId='+escape(idName3)); http.onreadystatechange = handleResponse21; http.send(null); setTimeout('updateGridRow2Col1()', updateDelay+300); } function updateGridRow2Col2() { http.open('get', 'grid.php?spanId='+escape(idName4)); http.onreadystatechange = handleResponse22; http.send(null); setTimeout('updateGridRow2Col2()', updateDelay+400); } // Functions to handle function response function handleResponse11() { if(http.readyState == 4){ var response = http.responseText; document.getElementById(idName1).innerHTML = response; } } function handleResponse12() { if(http.readyState == 4){ var response = http.responseText; document.getElementById(idName2).innerHTML = response; } } function handleResponse21() { if(http.readyState == 4){ var response = http.responseText; document.getElementById(idName3).innerHTML = response; } } function handleResponse22() { if(http.readyState == 4){ var response = http.responseText; document.getElementById(idName4).innerHTML = response; } } // initiate updation of grids function startUpdatingGrids() { setTimeout('updateGridRow1Col1()', updateDelay+100); setTimeout('updateGridRow1Col2()', updateDelay+200); setTimeout('updateGridRow2Col1()', updateDelay+300); setTimeout('updateGridRow2Col2()', updateDelay+400); } startUpdatingGrids();