FALSE when using over 6k characters (flat file CMS)

r0b · May 19, 2011

(I'm pasting the main files and also attaching the whole CMS, 10kbs zipped)

I've recently finished making a flat file cms which weights under 20kB's. (.js file 4.8KB) (index.php 6kb) (two other php files with 1kb) (everything else is either CSS or the .txt files for the content)

I'm experiencing a problem when using an article in my post thats longer than 6000 characters. I have no idea where the problem could be, buts its either php or the javascript (I've read something about DOM limitation). When entering more than 6k letters instead of saving the post, it returns false.

Anyone have any ideas how to solve this limit? (pasted files, but the whole thing is attached for download at the bottom)

index.php

<?php

function getSlug( $page ) {
   $page = strip_tags( $page );
   preg_match_all( "/([a-z0-9A-Z-_]+)/", $page, $matches );
   $matches = array_map( "ucfirst", $matches[0] );
   $slug = implode( "-", $matches );
   return $slug;
}
   $page = $_REQUEST['page'];
   if(!$page) $page = "Home";

   $contentfile = $page = getSlug( $page );
   $content[0] = @file_get_contents("files/$contentfile.txt");
   if(!$content[0]) $content[0] = "Your page named <b>$page</b> is created.<br /><br />\n\nClick here to start editing your newly created page!";
   
   $title = @file_get_contents('files/title.txt');
   if(!$title) $title = "Your title here";
   $slogan = @file_get_contents('files/slogan.txt');
   if(!$slogan) $slogan = "- Your slogan over here!";

   $menu = @file_get_contents('files/menu.txt');
   if(!$menu) $menu = "Home";
   
   $description = @file_get_contents('files/description.txt');
   if(!$description) $description = "Enter your website description over here!";
   $keywords = @file_get_contents('files/keywords.txt');
   if(!$keywords) $keywords = "Enter, your, keywords, for, your, website, over, here";

   $copyright = @file_get_contents('files/copyright.txt');
   if(!$copyright) $copyright = "Your website (c) 2011";
   $mess = 'Powered by <a href="http://krneky.com/en/wondercms">WonderCMS</a>';

//config section
$hostname = $_SERVER['PHP_SELF'];
$hostname = str_replace('index.php', '', $hostname);
$hostname = str_replace($page, '', $hostname);

   $theme = $_REQUEST['theme'];
   if( !file_exists("$theme.php") ) $theme = "default";

   $cookie      = 'wondercms';	// cookie ame
   $expirytime  = time()+86400; // expire time

   if(isset($_REQUEST['logout']))
   {
   setcookie($cookie,'',time() - 84000); // remove cookie/
   header('Location: ./');
   exit;
   }
   $password = @file_get_contents("files/password");
   if(!$password)
   {
   savePassword("admin");
   }
   if($_COOKIE[$cookie])
   {
   $lstatus = "<a href='$hostname?logout'>Logout</a>";
   }
   else	$lstatus = "<a href='$hostname?login'>Login</a>";
   
   if(isset($_REQUEST['login']))
   {
   getLoginForm();
   }
   require("$theme.php");

// Functions
   function editTags()
   {
   global $cookie;
   if(!$_COOKIE[$cookie]) return;

   echo  "<script type='text/javascript' src='./js/editInplace.js'></script>";
   }

   function displayMainContent()
   {
   global $cookie, $content, $page;
   
   if($_COOKIE[$cookie])
   {
	   echo "<div class='title'><div id='change'><span id='$page' class='editText'>$content[0]</span></div></div>";
   }
   else
   {
	   echo $content[0];
   }
   }

// display section content
   function displaySectionContent($cnum)
   {
   global $cookie, $content;
   
   if($_COOKIE[$cookie])
   {
	   echo "<div id='change'><span id='$cnum' class='editText'>$content[$cnum]</span></div>";
   }
           else	echo $content[$cnum];
   }

   function displayMenu($stags,$etags)
   {
   global $menu;
   
   $mlist = explode("<br />",$menu);
   $num = count($mlist);

   for($ix=0;$ix<$num;$ix++)
   {
	   $page = trim($mlist[$ix]);
	   if(!$page) continue;
	   echo "$stags href='$page'>$page $etags \n";
   }
   }
   
   function getLoginForm()
   {
   global $content, $msg;
   
   $msg = "";
   
   if (isset($_POST['sub'])) loginSubmitted();
   $content[0] = "
<center>
<form action='' method='POST'>
<h2>Password</h2>
<input type='password' name='password' /><br />
<input type='submit' name='login' value='Login'>
<h2>$msg</h2><br />

<script src='js/editInplace.js'></script> 
<div class='all'>
<a href='javascript:showhide()'>Click to change your password</a> <br /><br />
<div id=hide style='display: none;'>
Type your <b>old</b> password above, and your new one in the field below.
<h2>New Password</h2>
<input type='password' name='new' /><br />
<input type='submit' name='login' value='Change'>
<input type='hidden' name='sub' value='sub'>
</div></div>
</form></center>";
   }
   
   function loginSubmitted()
   {
   global $cookie, $password, $msg, $expirytime, $submitted_pass;
   
   $submitted_pass = md5($_POST['password']);

   if ($submitted_pass<>$password)
   {
	   $msg = "<b class='wrong'>Wrong Password</b>";
	   return;
   }
   if($_POST['new'])
   {
	   savePassword($_POST['new']);
	   $msg = "Password changed!<br /><br />Please login again.";
	   return;
   }
   setcookie($cookie,$password,$expirytime);
   header('Location: ./');
   exit;
   }
   
   function savePassword($password)
   {
   $password = md5($password);
   $file = @fopen("files/password", "w");
   if(!$file)
   {
	   echo "<h2 style='color:red'>*Error* - unable to access password</h2><h3>But don't panic!</h3>".
			   "Just set the correct read/write permissions to the password file. <br />
			    Find the password file in the /files/ directory and CHMOD it to 640.<br /><br />
			    If this doesn't work, use <a href='http://krneky.com/forum'>this forum</a>.";
	   exit;
   }
   fwrite($file, $password);
   fclose($file);
   }

   function extraSettings()
   {
   global $description, $keywords, $title, $slogan, $copyright, $menu;
   echo "<div class='settings'>
<h3>Extra Settings</h3>
<a href='javascript:showhide()'>Cick here to open/close settings</a> <br /><br />
<div id=hide style='display: none;'>
<ul class='linkss'>
<b>Add Page: (in a new row) and <a href='javascript:location.reload(true);'>click here to refresh the page</a>.</b><br />
<div id='change'><span id='menu' class='editText'>$menu</span></div>
</ul>
<ul class='linkss'>
<b>Title:</b><br />
<div id='change'><span id='title' class='editText'>$title</span></div>
</ul>
<ul class='linkss'>
<b>Slogan:</b><br />
<div id='change'><span id='slogan' class='editText'>$slogan</span></div>
</ul>
<ul class='linkss'> 
<b>Meta Description:</b><br />
<div id='change'><span id='description' class='editText'>$description</span></div>
</ul>
<ul class='linkss'>
<b>Meta Keywords:</b><br />
<div id='change'><span id='keywords' class='editText'>$keywords</span></div>
</ul>
<ul class='linkss'>
<b>Copyright:</b><br />
<div id='change'><span id='copyright' class='editText'>$copyright</span></div>
</ul>
<br />
If you want to use a copyright sign: © - Simply copy this into your footer: &#38;&#99;&#111;&#112;&#121;&#59;
</div></div>";
   }
?>

editText.php

<?php

   session_start();

   function getSlug( $page ) {
   $page = strip_tags( $page );
   preg_match_all( "/([a-z0-9A-Z-_]+)/", $page, $matches );
   $matches = array_map( "ucfirst", $matches[0] );
   $slug = implode( "-", $matches );
   return $slug;
   }

   $fieldname = $_REQUEST['fieldname'];
   
   $encrypt_pass = @file_get_contents("files/password");
   if ($_COOKIE['wondercms']!=$encrypt_pass)
   {
   echo "You must login before using this function!";
   exit;
   }
   
   $content = rtrim(stripslashes($_REQUEST['content']));
   // if to only allow specified tags
   if($fieldname=="title")    $content = strip_tags($content);
   else	$content = strip_tags($content,"<audio><source><embed><p><h1><h2><h3><h4><h5><h6><a><img><u><i><em><strong><b><strike><center><pre>");

   $content = trim($content);
   $content = nl2br($content);

   if(!$content) $content = "Please be sure to enter some content before saving.";

   $content = preg_replace ("/%u(....)/e", "conv('\\1')", $content);

   if($fieldname>0 && $fieldname<4) $fname = "attachment$fieldname";
   else $fname = $fieldname;
   $file = @fopen("files/$fname.txt", "w");
   if(!$file)
   {
echo "<h2 class='wrong'>*Error* - unable to open $fieldname</h2><h3>But don't panic!</h3>".
"Just set the correct read/write permissions to the files folder.<br/>
Find the /files/ folder and CHMOD it to 751.<br /><br />
If this still gives you problems, open up the /files/ folder, select all files and CHMOD them to 640.<br /><br />
If this doesn't work, use <a href='http://krneky.com/forum'>this forum</a>.";
   exit;
   }
   fwrite($file, $content);
   fclose($file);

   echo $content;
   
   // convert udf-8 hexadecimal to decimal
   function conv($hex)
   {
   $dec = hexdec($hex);
   return "&#$dec;";
   }
?>

default.php (this displays the page)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<?php
echo "<title>$title</title>\n\n".
"<meta name='description' content='$description' />\n".
"<meta name='keywords' content='$keywords' />\n".
"<meta name='generator' content='WonderCMS 0.4' />\n";
editTags();
?>
<link rel="stylesheet" type="text/css" href="template/krneky_blue/style.css" media="screen"/>
<!--[if IE 6]>
<link rel="stylesheet" href="http://krneky.com/css/ie6.css" media="screen, projection">
<![endif]-->
</head>

<body>

<div class="container">

<h1 class="left"><a href="./"><?php echo "$title";?></a></h1>

<div class="slogan"><?php echo "$slogan";?></div>

<?php
   echo "<ul id='nav'>";
   displayMenu("<li><a ","</a></li>");
   echo "</ul>";
?> 

<div class="insider">
<?php displayMainContent();?>
</div>

<div class="footer"><div class="left">
<?php
   displayMenu("<a","</a> | ");
?>
</div>

<?php echo "$lstatus | $copyright | $mess";?>
</div>

<?php if($_COOKIE[$cookie]) extraSettings();?>
</div>

</body>
</html>

and the .js file

// JavaScript Document
<!--
//script by http://www.yvoschaap.com

//XMLHttpRequest class function
function datosServidor() {
};
datosServidor.prototype.iniciar = function() {
try {
	// Mozilla / Safari
	this._xh = new XMLHttpRequest();
} catch (e) {
	// Explorer
	var _ieModelos = new Array(
	'MSXML2.XMLHTTP.5.0',
	'MSXML2.XMLHTTP.4.0',
	'MSXML2.XMLHTTP.3.0',
	'MSXML2.XMLHTTP',
	'Microsoft.XMLHTTP'
	);
	var success = false;
	for (var i=0;i < _ieModelos.length && !success; i++) {
		try {
			this._xh = new ActiveXObject(_ieModelos[i]);
			success = true;
		} catch (e) {
		}
	}
	if ( !success ) {
		return false;
	}
	return true;
}
}

datosServidor.prototype.ocupado = function() {
estadoActual = this._xh.readyState;
return (estadoActual && (estadoActual < 4));
}

datosServidor.prototype.procesa = function() {
if (this._xh.readyState == 4 && this._xh.status == 200) {
	this.procesado = true;
}
}

datosServidor.prototype.enviar = function(urlget,datos) {
if (!this._xh) {
	this.iniciar();
}
if (!this.ocupado()) {
	this._xh.open("GET",urlget,false);
	this._xh.send(datos);
	if (this._xh.readyState == 4 && this._xh.status == 200) {
		return this._xh.responseText;
	}

}
return false;
}


var urlBase = "editText.php";
var formVars = "";
var changing = false;


function fieldEnter(campo,evt,idfld) {
evt = (evt) ? evt : window.event;
if (evt.keyCode == 13 && campo.value!="") {
	elem = document.getElementById( idfld );
	remotos = new datosServidor;
	nt = remotos.enviar(urlBase + "?fieldname=" +encodeURI(elem.id)+ "&content="+encodeURI(campo.value)+"&"+formVars,"");
	//remove glow
	noLight(elem);
	elem.innerHTML = nt;
	changing = false;
	return false;
} else {
	return true;
}


}

function fieldBlur(campo,idfld) {
if (campo.value!="") {
	elem = document.getElementById( idfld );
	remotos = new datosServidor;
	nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,"");
	elem.innerHTML = nt;
	changing = false;
	return false;
}
}

//edit field created
function editBox(actual) {
//alert(actual.nodeName+' '+changing);
if(!changing){
	width = widthEl(actual.id) + 20;
	height =heightEl(actual.id) + 2;
	str = actual.innerHTML;
	actual.innerHTML = str.replace(/<br>/gi, "");

		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>";
	changing = true;
}

	actual.firstChild.focus();
}



//find all span tags with class editText and id as fieldname parsed to update script. add onclick function
function editbox_init(){
if (!document.getElementsByTagName){ return; }
var spans = document.getElementsByTagName("span");

// loop through all span tags
for (var i=0; i<spans.length; i++){
	var spn = spans[i];

        	if (((' '+spn.className+' ').indexOf("editText") != -1) && (spn.id)) {
		spn.onclick = function () { editBox(this); }
		spn.style.cursor = "pointer";
		spn.title = "Click to edit!";	
       		}

}


}

//crossbrowser load function
function addEvent(elm, evType, fn, useCapture)
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Please upgrade your browser to use full functionality on this page");
  }
}



//get width of text element
function widthEl(span){

if (document.layers){
  w=document.layers[span].clip.width;
} else if (document.all && !document.getElementById){
  w=document.all[span].offsetWidth;
} else if(document.getElementById){
  w=document.getElementById(span).offsetWidth;
}
return w;
}

//get height of text element
function heightEl(span){

if (document.layers){
  h=document.layers[span].clip.height;
} else if (document.all && !document.getElementById){
  h=document.all[span].offsetHeight;
} else if(document.getElementById){
  h=document.getElementById(span).offsetHeight;
}
return h;
}

function highLight(span){
            //span.parentNode.style.border = "2px solid #D1FDCD";
            //span.parentNode.style.padding = "0";
            span.style.border = "1px solid #54CE43";          
}

function noLight(span){
        //span.parentNode.style.border = "0px";
        //span.parentNode.style.padding = "2px";
        span.style.border = "0px";   


}

//sets post/get vars for update
function setVarsForm(vars){
formVars  = vars;
} function showhide() {
if (document.getElementById('hide').style.display == 'none') document.getElementById('hide').style.display = "block";
else document.getElementById('hide').style.display = "none";
}  

addEvent(window, "load", editbox_init);
-->

[attachment deleted by admin]

r0b · May 20, 2011

Bumping this.

r0b · May 21, 2011

Another day, another bump.

Zurev · May 21, 2011

First thing I would try is to do it with fopen instead of file_get_contents - just to SEE if it works, in which case you've narrowed it down to it being file_get_contents' problem.

OT:

Why do you seem so focused on file size of a cms? It really doesn't make a noticeable difference, look at the top CMS's, even things like WP are 8+ megs.

PFMaBiSmAd · May 21, 2011

Both browsers and web servers have limits on the length of a URL that you can use.

It would appear that your .js file is using the GET method to submit data. You should use the POST method when submitting more than about 2k worth of data in a URL.

r0b · May 21, 2011

First thing I would try is to do it with fopen instead of file_get_contents - just to SEE if it works, in which case you've narrowed it down to it being file_get_contents' problem.

OT:

Why do you seem so focused on file size of a cms? It really doesn't make a noticeable difference, look at the top CMS's, even things like WP are 8+ megs.

That was the original code which caused the same problem, do you have any other ideas I should try? Thanks for replying.

I had an idea which I wanted to create, the CMS itself is functional, has a couple hundred downloads based on its simplicity and ease of use. I've used most of the popular CMS's, and they're all overbloated for my needs (in my opinion), too many files, backing up, so I decided to make a small one with only a couple of neccessary files. I'm sure someone would find it useful.

Also to give a specific answer to your question about the size - I like it small (sounds weird I know), but downloading it takes a second and uploading it takes one.

Both browsers and web servers have limits on the length of a URL that you can use.

It would appear that your .js file is using the GET method to submit data. You should use the POST method when submitting more than about 2k worth of data in a URL.

I checked the .js file, (although I'm not pro at it).

Changed what you said

	if (!this.ocupado()) {
	this._xh.open("GET",urlget,false);

to

	if (!this.ocupado()) {
	this._xh.open("POST",urlget,false);

Tried it again, something larger than 6000 characters still returns false.

Should I take this to the JavaScript forums?

r0b · May 21, 2011

I think I'm having a .js problem.

Every time I enter more than 6000 characters in a text field, it returns false.

Someone on the PHP coding help forums noticed it might be a javascript problem, since it's using GET instead of POST. (That's why it returns false, some browsers can't handle more than 6000 characters in the url (this happens by using GET)).

However, I tried fixing the code myself, but without luck. I'm about to post what I did and later the full code. I changed:

	if (!this.ocupado()) {
	this._xh.open("GET",urlget,false);

to

	if (!this.ocupado()) {
	this._xh.open("POST",urlget,false);

But this doesn't do it. You might have noticed I'm no pro at javascript. Here's the whole .js file.

<!--
//script by http://www.yvoschaap.com
//XMLHttpRequest class function
function datosServidor() {
};
datosServidor.prototype.iniciar = function() {
try {
	// Mozilla / Safari
	this._xh = new XMLHttpRequest();
} catch (e) {
	// Explorer
	var _ieModelos = new Array(
	'MSXML2.XMLHTTP.5.0',
	'MSXML2.XMLHTTP.4.0',
	'MSXML2.XMLHTTP.3.0',
	'MSXML2.XMLHTTP',
	'Microsoft.XMLHTTP'
	);
	var success = false;
	for (var i=0;i < _ieModelos.length && !success; i++) {
		try {
			this._xh = new ActiveXObject(_ieModelos[i]);
			success = true;
		} catch (e) {
		}
	}
	if ( !success ) {
		return false;
	}
	return true;
}
}
datosServidor.prototype.ocupado = function() {
estadoActual = this._xh.readyState;
return (estadoActual && (estadoActual < 4));
}
datosServidor.prototype.procesa = function() {
if (this._xh.readyState == 4 && this._xh.status == 200) {
	this.procesado = true;
}
}
datosServidor.prototype.enviar = function(urlget,datos) {
if (!this._xh) {
	this.iniciar();
}
if (!this.ocupado()) {
	this._xh.open("POST",urlget,false);
	this._xh.send(datos);
	if (this._xh.readyState == 4 && this._xh.status == 200) {
		return this._xh.responseText;
	}
}
return false;
}

var urlBase = "editText.php";
var formVars = "";
var changing = false;

function fieldEnter(campo,evt,idfld) {
evt = (evt) ? evt : window.event;
if (evt.keyCode == 13 && campo.value!="") {
	elem = document.getElementById( idfld );
	remotos = new datosServidor;
	nt = remotos.enviar(urlBase + "?fieldname=" +encodeURI(elem.id)+ "&content="+encodeURI(campo.value)+"&"+formVars,"");
	//remove glow
	noLight(elem);
	elem.innerHTML = nt;
	changing = false;
	return false;
} else {
	return true;
}
}
function fieldBlur(campo,idfld) {
if (campo.value!="") {
	elem = document.getElementById( idfld );
	remotos = new datosServidor;
	nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,"");
	elem.innerHTML = nt;
	changing = false;
	return false;
}
}
//edit field created
function editBox(actual) {
//alert(actual.nodeName+' '+changing);
if(!changing){
	width = widthEl(actual.id) + 20;
	height =heightEl(actual.id) + 2;
	str = actual.innerHTML;
	actual.innerHTML = str.replace(/<br>/gi, "");

		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>";
	changing = true;
}
	actual.firstChild.focus();
}
//find all span tags with class editText and id as fieldname parsed to update script. add onclick function
function editbox_init(){
if (!document.getElementsByTagName){ return; }
var spans = document.getElementsByTagName("span");

// loop through all span tags
for (var i=0; i<spans.length; i++){
	var spn = spans[i];

        	if (((' '+spn.className+' ').indexOf("editText") != -1) && (spn.id)) {
		spn.onclick = function () { editBox(this); }
		spn.style.cursor = "pointer";
		spn.title = "Click to edit!";
       		}
}
}

//crossbrowser load function
function addEvent(elm, evType, fn, useCapture)
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Please upgrade your browser to use full functionality on this page");
  }
}

//get width of text element
function widthEl(span){

if (document.layers){
  w=document.layers[span].clip.width;
} else if (document.all && !document.getElementById){
  w=document.all[span].offsetWidth;
} else if(document.getElementById){
  w=document.getElementById(span).offsetWidth;
}
return w;
}

//get height of text element
function heightEl(span){

if (document.layers){
  h=document.layers[span].clip.height;
} else if (document.all && !document.getElementById){
  h=document.all[span].offsetHeight;
} else if(document.getElementById){
  h=document.getElementById(span).offsetHeight;
}
return h;
}

function highLight(span){
            //span.parentNode.style.border = "2px solid #D1FDCD";
            //span.parentNode.style.padding = "0";
            span.style.border = "1px solid #54CE43";
}

function noLight(span){
        //span.parentNode.style.border = "0px";
        //span.parentNode.style.padding = "2px";
        span.style.border = "0px";
}
//sets post/get vars for update
function setVarsForm(vars){
formVars  = vars;
} function showhide() {
if (document.getElementById('hide').style.display == 'none') document.getElementById('hide').style.display = "block";
else document.getElementById('hide').style.display = "none";
}  
addEvent(window, "load", editbox_init);
-->

PFMaBiSmAd · May 21, 2011

The following modified editinplace.js successfully sends the data using the post method -

// JavaScript Document
<!--
//script by http://www.yvoschaap.com

//XMLHttpRequest class function
function datosServidor() {
};
datosServidor.prototype.iniciar = function() {
try {
	// Mozilla / Safari
	this._xh = new XMLHttpRequest();
} catch (e) {
	// Explorer
	var _ieModelos = new Array(
	'MSXML2.XMLHTTP.5.0',
	'MSXML2.XMLHTTP.4.0',
	'MSXML2.XMLHTTP.3.0',
	'MSXML2.XMLHTTP',
	'Microsoft.XMLHTTP'
	);
	var success = false;
	for (var i=0;i < _ieModelos.length && !success; i++) {
		try {
			this._xh = new ActiveXObject(_ieModelos[i]);
			success = true;
		} catch (e) {
		}
	}
	if ( !success ) {
		return false;
	}
	return true;
}
}

datosServidor.prototype.ocupado = function() {
estadoActual = this._xh.readyState;
return (estadoActual && (estadoActual < 4));
}

datosServidor.prototype.procesa = function() {
if (this._xh.readyState == 4 && this._xh.status == 200) {
	this.procesado = true;
}
}

datosServidor.prototype.enviar = function(urlget,datos) {
if (!this._xh) {
	this.iniciar();
}
if (!this.ocupado()) {
	this._xh.open("POST",urlget,false);
	this._xh.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
	this._xh.send(datos);
	if (this._xh.readyState == 4 && this._xh.status == 200) {
		return this._xh.responseText;
	}

}
return false;
}


var urlBase = "editText.php";
var formVars = "";
var changing = false;


function fieldEnter(campo,evt,idfld) {
evt = (evt) ? evt : window.event;
if (evt.keyCode == 13 && campo.value!="") {
	elem = document.getElementById( idfld );
	remotos = new datosServidor;
	nt = remotos.enviar(urlBase,"fieldname=" +encodeURI(elem.id)+ "&content="+encodeURI(campo.value)+"&"+formVars);
	//remove glow
	noLight(elem);
	elem.innerHTML = nt;
	changing = false;
	return false;
} else {
	return true;
}


}

function fieldBlur(campo,idfld) {
if (campo.value!="") {
	elem = document.getElementById( idfld );
	remotos = new datosServidor;
	nt = remotos.enviar(urlBase,"fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars);
	elem.innerHTML = nt;
	changing = false;
	return false;
}
}

//edit field created
function editBox(actual) {
//alert(actual.nodeName+' '+changing);
if(!changing){
	width = widthEl(actual.id) + 20;
	height =heightEl(actual.id) + 2;
	str = actual.innerHTML;
	actual.innerHTML = str.replace(/<br>/gi, "");

		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>";
	changing = true;
}

	actual.firstChild.focus();
}



//find all span tags with class editText and id as fieldname parsed to update script. add onclick function
function editbox_init(){
if (!document.getElementsByTagName){ return; }
var spans = document.getElementsByTagName("span");

// loop through all span tags
for (var i=0; i<spans.length; i++){
	var spn = spans[i];

        	if (((' '+spn.className+' ').indexOf("editText") != -1) && (spn.id)) {
		spn.onclick = function () { editBox(this); }
		spn.style.cursor = "pointer";
		spn.title = "Click to edit!";	
       		}

}


}

//crossbrowser load function
function addEvent(elm, evType, fn, useCapture)
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Please upgrade your browser to use full functionality on this page");
  }
}



//get width of text element
function widthEl(span){

if (document.layers){
  w=document.layers[span].clip.width;
} else if (document.all && !document.getElementById){
  w=document.all[span].offsetWidth;
} else if(document.getElementById){
  w=document.getElementById(span).offsetWidth;
}
return w;
}

//get height of text element
function heightEl(span){

if (document.layers){
  h=document.layers[span].clip.height;
} else if (document.all && !document.getElementById){
  h=document.all[span].offsetHeight;
} else if(document.getElementById){
  h=document.getElementById(span).offsetHeight;
}
return h;
}

function highLight(span){
            //span.parentNode.style.border = "2px solid #D1FDCD";
            //span.parentNode.style.padding = "0";
            span.style.border = "1px solid #54CE43";          
}

function noLight(span){
        //span.parentNode.style.border = "0px";
        //span.parentNode.style.padding = "2px";
        span.style.border = "0px";   


}

//sets post/get vars for update
function setVarsForm(vars){
formVars  = vars;
} function showhide() {
if (document.getElementById('hide').style.display == 'none') document.getElementById('hide').style.display = "block";
else document.getElementById('hide').style.display = "none";
}  

addEvent(window, "load", editbox_init);
-->

You should also develop your code with error_reporting set to E_ALL and display_errors set to on. There are a number of statements that need to use isset to avoid producing undefined index messages.

r0b · May 22, 2011

The following modified editinplace.js successfully sends the data using the post method -

// JavaScript Document
<!--
//script by http://www.yvoschaap.com

//XMLHttpRequest class function
function datosServidor() {
};
datosServidor.prototype.iniciar = function() {
try {
	// Mozilla / Safari
	this._xh = new XMLHttpRequest();
} catch (e) {
	// Explorer
	var _ieModelos = new Array(
	'MSXML2.XMLHTTP.5.0',
	'MSXML2.XMLHTTP.4.0',
	'MSXML2.XMLHTTP.3.0',
	'MSXML2.XMLHTTP',
	'Microsoft.XMLHTTP'
	);
	var success = false;
	for (var i=0;i < _ieModelos.length && !success; i++) {
		try {
			this._xh = new ActiveXObject(_ieModelos[i]);
			success = true;
		} catch (e) {
		}
	}
	if ( !success ) {
		return false;
	}
	return true;
}
}

datosServidor.prototype.ocupado = function() {
estadoActual = this._xh.readyState;
return (estadoActual && (estadoActual < 4));
}

datosServidor.prototype.procesa = function() {
if (this._xh.readyState == 4 && this._xh.status == 200) {
	this.procesado = true;
}
}

datosServidor.prototype.enviar = function(urlget,datos) {
if (!this._xh) {
	this.iniciar();
}
if (!this.ocupado()) {
	this._xh.open("POST",urlget,false);
	this._xh.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
	this._xh.send(datos);
	if (this._xh.readyState == 4 && this._xh.status == 200) {
		return this._xh.responseText;
	}

}
return false;
}


var urlBase = "editText.php";
var formVars = "";
var changing = false;


function fieldEnter(campo,evt,idfld) {
evt = (evt) ? evt : window.event;
if (evt.keyCode == 13 && campo.value!="") {
	elem = document.getElementById( idfld );
	remotos = new datosServidor;
	nt = remotos.enviar(urlBase,"fieldname=" +encodeURI(elem.id)+ "&content="+encodeURI(campo.value)+"&"+formVars);
	//remove glow
	noLight(elem);
	elem.innerHTML = nt;
	changing = false;
	return false;
} else {
	return true;
}


}

function fieldBlur(campo,idfld) {
if (campo.value!="") {
	elem = document.getElementById( idfld );
	remotos = new datosServidor;
	nt = remotos.enviar(urlBase,"fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars);
	elem.innerHTML = nt;
	changing = false;
	return false;
}
}

//edit field created
function editBox(actual) {
//alert(actual.nodeName+' '+changing);
if(!changing){
	width = widthEl(actual.id) + 20;
	height =heightEl(actual.id) + 2;
	str = actual.innerHTML;
	actual.innerHTML = str.replace(/<br>/gi, "");

		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>";
	changing = true;
}

	actual.firstChild.focus();
}



//find all span tags with class editText and id as fieldname parsed to update script. add onclick function
function editbox_init(){
if (!document.getElementsByTagName){ return; }
var spans = document.getElementsByTagName("span");

// loop through all span tags
for (var i=0; i<spans.length; i++){
	var spn = spans[i];

        	if (((' '+spn.className+' ').indexOf("editText") != -1) && (spn.id)) {
		spn.onclick = function () { editBox(this); }
		spn.style.cursor = "pointer";
		spn.title = "Click to edit!";	
       		}

}


}

//crossbrowser load function
function addEvent(elm, evType, fn, useCapture)
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Please upgrade your browser to use full functionality on this page");
  }
}



//get width of text element
function widthEl(span){

if (document.layers){
  w=document.layers[span].clip.width;
} else if (document.all && !document.getElementById){
  w=document.all[span].offsetWidth;
} else if(document.getElementById){
  w=document.getElementById(span).offsetWidth;
}
return w;
}

//get height of text element
function heightEl(span){

if (document.layers){
  h=document.layers[span].clip.height;
} else if (document.all && !document.getElementById){
  h=document.all[span].offsetHeight;
} else if(document.getElementById){
  h=document.getElementById(span).offsetHeight;
}
return h;
}

function highLight(span){
            //span.parentNode.style.border = "2px solid #D1FDCD";
            //span.parentNode.style.padding = "0";
            span.style.border = "1px solid #54CE43";          
}

function noLight(span){
        //span.parentNode.style.border = "0px";
        //span.parentNode.style.padding = "2px";
        span.style.border = "0px";   


}

//sets post/get vars for update
function setVarsForm(vars){
formVars  = vars;
} function showhide() {
if (document.getElementById('hide').style.display == 'none') document.getElementById('hide').style.display = "block";
else document.getElementById('hide').style.display = "none";
}  

addEvent(window, "load", editbox_init);
-->

You should also develop your code with error_reporting set to E_ALL and display_errors set to on. There are a number of statements that need to use isset to avoid producing undefined index messages.

The code you posted works perfectly the way it should. I've been trying to figure this out for a while.

Thank you so much for taking the time to make it work.

Also thanks for the heads up, there's a long way to go, hope I figure it all out.

Solved, thanks again.

r0b · May 22, 2011

I tried sending you a PM with a personal thanks, but it looks like you have them blocked, so I'll just paste it here:

I just wanted to drop another thank you (for helping me out in this thread).

I seriously would of never figured it out and you saved me of days of headaches over this.

Do you have a website or an email I could add to the contributors list in the readme file of the CMS? If you're interested about the project check out the CMS you contributed to.

Thanks again for taking the time and helping me out.

Sincerely,

cheers

rob

Sign In

FALSE when using over 6k characters (flat file CMS)

Recommended Posts

r0b

Link to comment

Share on other sites

r0b

Link to comment

Share on other sites

r0b

Link to comment

Share on other sites

Zurev

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

r0b

Link to comment

Share on other sites

r0b

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

r0b

Link to comment

Share on other sites

r0b

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information