Inline edit mysql rows


/ Published in: JavaScript
Save to your folder(s)

Add file updaterow.php and include js-code to your page.

updaterow.php
db_host, $CFG->db_name, $CFG->db_user, $CFG->db_pass);
$Dtb->connect();
$Session = new Session();
$Base = new Base();
$Auth = new Auth();

error_reporting(1);

$fieldname = $Base->convert_post_get("fieldname");
if(!$fieldname) exit();
$content = $_GET['content'];
list($field, $ind) = explode('-', $fieldname);

$sql = "update `b_aboard_msgs` set `$field` = '$content' where `id` = $ind";
$Dtb->query($sql);

echo $content;

?>


Copy this code and paste it in your HTML
  1. <!--
  2.  
  3. //XMLHttpRequest class function
  4. function datosServidor() {
  5. };
  6. datosServidor.prototype.iniciar = function() {
  7. try {
  8. // Mozilla / Safari
  9. this._xh = new XMLHttpRequest();
  10. } catch (e) {
  11. // Explorer
  12. var _ieModelos = new Array(
  13. 'MSXML2.XMLHTTP.5.0',
  14. 'MSXML2.XMLHTTP.4.0',
  15. 'MSXML2.XMLHTTP.3.0',
  16. 'MSXML2.XMLHTTP',
  17. 'Microsoft.XMLHTTP'
  18. );
  19. var success = false;
  20. for (var i=0;i < _ieModelos.length && !success; i++) {
  21. try {
  22. this._xh = new ActiveXObject(_ieModelos[i]);
  23. success = true;
  24. } catch (e) {
  25. }
  26. }
  27. if ( !success ) {
  28. return false;
  29. }
  30. return true;
  31. }
  32. }
  33.  
  34. datosServidor.prototype.ocupado = function() {
  35. estadoActual = this._xh.readyState;
  36. return (estadoActual && (estadoActual < 4));
  37. }
  38.  
  39. datosServidor.prototype.procesa = function() {
  40. if (this._xh.readyState == 4 && this._xh.status == 200) {
  41. this.procesado = true;
  42. }
  43. }
  44.  
  45. datosServidor.prototype.enviar = function(urlget,datos) {
  46. if (!this._xh) {
  47. this.iniciar();
  48. }
  49. if (!this.ocupado()) {
  50. this._xh.open("GET",urlget,false);
  51. this._xh.send(datos);
  52. if (this._xh.readyState == 4 && this._xh.status == 200) {
  53. return this._xh.responseText;
  54. }
  55.  
  56. }
  57. return false;
  58. }
  59.  
  60.  
  61. var urlBase = "updaterow.php";
  62. var formVars = "";
  63. var changing = false;
  64.  
  65.  
  66. function fieldEnter(campo,evt,idfld) {
  67. evt = (evt) ? evt : window.event;
  68. if (evt.keyCode == 13 && campo.value!="") {
  69. elem = document.getElementById( idfld );
  70. remotos = new datosServidor;
  71. nt = remotos.enviar(urlBase + "?fieldname=" +encodeURI(elem.id)+ "&content="+encodeURI(campo.value)+"&"+formVars,"");
  72. //remove glow
  73. noLight(elem);
  74. elem.innerHTML = nt;
  75. changing = false;
  76. return false;
  77. } else {
  78. return true;
  79. }
  80.  
  81.  
  82. }
  83.  
  84. function fieldBlur(campo,idfld) {
  85. if (campo.value!="") {
  86. elem = document.getElementById( idfld );
  87. remotos = new datosServidor;
  88. nt = remotos.enviar(urlBase + "?fieldname=" +encodeURIComponent(elem.id)+ "&content="+encodeURIComponent(campo.value)+"&"+formVars,"");
  89. elem.innerHTML = nt;
  90. changing = false;
  91. return false;
  92. }
  93. }
  94.  
  95. //edit field created
  96. function editBox(actual) {
  97. //alert(actual.nodeName+' '+changing);
  98. if(!changing){
  99. width = widthEl(actual.id) + 20;
  100. height =heightEl(actual.id) + 10;
  101.  
  102. if(height < 40){
  103. if(width < 100) width = 150;
  104. actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";
  105. }else{
  106. if(width < 70) width = 90;
  107. if(height < 50) height = 50;
  108. actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>";
  109. }
  110. changing = true;
  111. }
  112.  
  113. actual.firstChild.focus();
  114. }
  115.  
  116.  
  117.  
  118. //find all span tags with class editText and id as fieldname parsed to update script. add onclick function
  119. function editbox_init(){
  120. if (!document.getElementsByTagName){ return; }
  121. var spans = document.getElementsByTagName("span");
  122.  
  123. // loop through all span tags
  124. for (var i=0; i<spans.length; i++){
  125. var spn = spans[i];
  126.  
  127. if (((' '+spn.className+' ').indexOf("editText") != -1) && (spn.id)) {
  128. spn.onclick = function () { editBox(this); }
  129. spn.style.cursor = "pointer";
  130. spn.title = "Click to edit!";
  131. }
  132.  
  133. }
  134.  
  135.  
  136. }
  137.  
  138. //crossbrowser load function
  139. function addEvent(elm, evType, fn, useCapture)
  140. {
  141. if (elm.addEventListener){
  142. elm.addEventListener(evType, fn, useCapture);
  143. return true;
  144. } else if (elm.attachEvent){
  145. var r = elm.attachEvent("on"+evType, fn);
  146. return r;
  147. } else {
  148. alert("Please upgrade your browser to use full functionality on this page");
  149. }
  150. }
  151.  
  152. //get width of text element
  153. function widthEl(span){
  154.  
  155. if (document.layers){
  156. w=document.layers[span].clip.width;
  157. } else if (document.all && !document.getElementById){
  158. w=document.all[span].offsetWidth;
  159. } else if(document.getElementById){
  160. w=document.getElementById(span).offsetWidth;
  161. }
  162. return w;
  163. }
  164.  
  165. //get height of text element
  166. function heightEl(span){
  167.  
  168. if (document.layers){
  169. h=document.layers[span].clip.height;
  170. } else if (document.all && !document.getElementById){
  171. h=document.all[span].offsetHeight;
  172. } else if(document.getElementById){
  173. h=document.getElementById(span).offsetHeight;
  174. }
  175. return h;
  176. }
  177.  
  178. function highLight(span){
  179. //span.parentNode.style.border = "2px solid #D1FDCD";
  180. //span.parentNode.style.padding = "0";
  181. span.style.border = "1px solid #54CE43";
  182. }
  183.  
  184. function noLight(span){
  185. //span.parentNode.style.border = "0px";
  186. //span.parentNode.style.padding = "2px";
  187. span.style.border = "0px";
  188.  
  189.  
  190. }
  191.  
  192. //sets post/get vars for update
  193. function setVarsForm(vars){
  194. formVars = vars;
  195. }
  196.  
  197. addEvent(window, "load", editbox_init);
  198. -->

URL: http://www.bistro-site.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.