If you are not familiar with the two server side operations than I suggest you read more about the then at Tizag.com before trying to fully understand this last tutorial.

NOTE: This tutorial assumes you will already have a database and table setup in your MySQL. Here is the SQL to create this table.

CREATE TABLE `cms_demo` (
  `id` tinyint(255) NOT NULL default '0',
  `content` longtext NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Our last goals for our instant edit is to save and retrive information to and from our MySQL database. To do this we must speak to the database with the means of a server side language. PHP is a server side language and in fact speaks most clearly to MySQL than other server side languages such as .asp or aspx

In our last tutorial we created two AJAX functions that open and save information from our database via secure HTTP requests. These two functions both called upon two different server side files. Before we even get into creating these two files we must first talk about how a server side language begins to even speak to a database.

Before we can speak to the database we must first connect to it. The most secure way to do this is to have a third party file that connects to MySQL and get included into both “openFromDatabase.php” and “saveToDatabase.php”

Make a blank PHP document like so:

<?php
?>

Now lets add the portion that connects to our MySQL. Make your document look like this:

<?php
$dbhost = "MYSQLHOST";
$dbname = "DATABASE NAME";
$dbuser = "DATABASE USER";
$dbpass = "DATABASE PASSWORD";
//Connect to database
mysql_connect( $dbhost, $dbuser, $dbpass)or die("Could not connect: ".mysql_error());
mysql_select_db($dbname) or die("Could Not Select Database Name".mysql_error());
?>

Ok here we have 4 variables that we use to connect to MySQL.

• $dbhost = your web server host name or IP address
• $dbname = MySQL is made up of databases that contain an infinite amount of tables here we declare what the name of the database we want to connect is
• $dbuser = MySQL is typically setup with a admin username in place here you must provide that admin username such as “root”
• $dbpass = Lastly MySQL must be provided a password to go along with the admin username in order to fully connect

Great the next few lines uses php’s mysql commands and use our variables to connect to your MySQL database. Once you have finished setting up this connection script save it out as a file called “db_cnt.php”.

Now that we have our connection script we can start to write our saveToDatabase.php and openFromDatabase.php files. Start a new blank PHP and add the following:

<?php
include("db_cnt.php");
$result = mysql_query("SELECT * FROM cms_demo")
or die(mysql_error());
while($row = mysql_fetch_array( $result ))
{
    $responseText = $row['content'];
    echo $responseText;
}
?>

Ok here we use the PHP function called “include” to include our “db_cnt.php” and open a connection to our database. Then we create a new variable called “$results” and equal it to a mysql_query to our database table called “cms_demo”. This portion here “SELECT * FROM cms_demo” is stating to grab all records from cms_demo data table.

After we have our query “$result” setup we are going to create a while loop. The while loop is similar to JavaScript’s for loop but much more sophisticated. Here we use the while loop to setup a variable called $row that performs a php function called “mysql_fetch_array”.

This “mysql_fetch_array” function will use our “$result” query to loop through our data table and locate a particular $row or rather “column”. To do this we setup a third variable called $responseText and a forth variable called $row. Our “$row” variable points to our data table column by name “content” then sets it to our “$responseText” variable.

Once we have located and captured our data tables column we then “echo” it out. Echo is much like JavaScript’s “documnet.write” but only on the server side of things making it 100% cross browser compatible.

Save this file as “openFromDatabase.php” and start a new blank PHP document that looks like the following:

<?php
include("db_cnt.php");
$currentEdit = mysql_real_escape_string($_POST['currentEdit']);
mysql_query("UPDATE cms_demo SET content='$currentEdit' WHERE id ='0'")
or die(mysql_error());
?>

Here we again add the use the PHP function “include” to connect to our database. Next we setup a variable called “$currentEdit” and we point it to another PHP function called “mysql_real_escape_string”. The “mysql_real_escape_string” basically runs the data being sent to our database through a stripping process that removes any harmful characters one might use to attack our database for what ever reason. To run our data through this stripping process we have to include our data being sent from our AJAX post function. We use the “$_POST['currentEdit']” to capture the posted data from our AJAX function “currentEdit”.

Next we call another “mysql_query” but this time we are going to use an “UPDATE” to update our data table with the most current edits the user preform’s. To do this we call the “UPDATE” function then point to our data table “cms_demo” then use the “SET” function to insert our stripped data into the column named “content”. For this tutorial and data table we will only have one record in our database that holds our data so we use a “WHERE” function to narrow down our location to an id of 0. If you have multiple records in your data table you can change this “WHERE” id number to what ever row you would in fact like to instant edit.

Save this file out as “save2database.php” and guess what folks you are done!

From DOM scripting to AJAX an JavaScript and MySQL an PHP you have now created a fully working instant edit application.

I really hope this gave my readers some useful insight into the world of internet application developing as well as some great inspiration to run with.

Here is a complete version of the Ajax instant edit

We left off with a our functions fully created to perform our instant edit via client site DOM scripting. Now we must add functions that will send and retrieve data from our database but doing so with out any page refreshing and at the right spots in our already performing instant edit script.

First lets talk a little about Ajax and what it is. Ajax is a form of performing server side functions through a client side request so we can now talk,send and retrieve information from our server. Before AJAX, client side requests and server side request were two different worlds that required a page to be sent off to another page that would the preform our server side actions and carry variables out and back to our original page.

With Ajax in our corner we can preform server side actions or requests through one single page and do so with client side requests resulting in the spawn of internet application developing. Ajax requires some routines that use JavaScript to preform our post and get methods to our server side request. I personally use the well put together Ajax library from dynamicdrive.com that can be downloaded here.

We will not go into what makes up these routines as there are many tutorials out on the net on how to build ajax get and post routines instead lets talk about how we can use these routines to our advantage. In our working document we have to link to our Ajax routines.js file you just downloaded by adding the following to your header tags.

<script type="text/javascript" src="routines.js" ></script>

This brings our required routines to our document so we may build with them to create our needs. Ok so this is a good time to think about what our need are going to be with our instant edit. We need to have a location in our database that stores and retrieves our instant edit data. Then when ever the page loads either it being a first visit or refresh we can pull this data from out database to begin edits. After a user has finished editing a paragraph we want to send the edits out to our server and into our database to save the edits permanently.

Let start by creating our function that saves our data to our database. Add the following save function to you instant edit script:

function saveDoc()
{
	function createpoststring()
	{
		var currentEdit = document.getElementById('pallet').innerHTML;
		var poststr = "currentEdit=" + encodeURI(currentEdit);
		return poststr;
	}
		createpoststring();
		var poststr = createpoststring(); //Get contents to post and create query string first
		ajaxpack.postAjaxRequest("save2database.php", poststr, createpoststring, "html");
}

This is our saveDoc() function that creates a poststring or rather a secure variable string over to our server side functions via HTTP request. With in this function we have a second function named “createpoststring()” and in this function we have two variables.

Our first variable is named “currentEdit” and it points to our div container “pallet” and grabs its innerHTML. Our second string is the “poststr” and its creates our HTTP string by first making up the variable name our server side function will receive “currentEdit=” and attaches our innerHTML as a secure encoded URI.

Last we return the posts our of the function upon it ever being performed.

After our “createpoststring()” function we must run it by calling to it by means of “createpoststring();” so we may gather our encoded string and begin to process it. Our last variable is named poststr and it takes our function “createpoststring” and equals its self to its returned encoded string.

The last line of code uses our AJAX routines “ajaxpack.postAjaxRequest(”",,”",);” to being sending our encode string over to our server side function. When using our AJAX routines we must use a set of commands if you will, that first point to the location of our server side function or rather server side file “save2database.php” then use the “poststr” variable to attach our encoded string to our AJAX post request. We will then call to our createpoststring to verify that our encoded version is true and ready to process. The last command is prerequisite of “html” stating that we wish to only send html type of data.

Great lets move onto building our openDoc function.

function openDoc()
{
	ajaxpack.getAjaxRequest("openFromDatabase.php", "", processOpenFile, "html");
}
    //LOAD FILE FUNCTION
    function processOpenFile()
    {
        var myajax = ajaxpack.ajaxobj;
        var myfiletype = ajaxpack.filetype;
        if (myajax.readyState == 4)//if request of file completed
        {
            if (myajax.status == 200 || window.location.href.indexOf("http") == -1)
            {
                if (myfiletype == "html")
                {
                    document.getElementById("pallet").innerHTML = myajax.responseText;
                    setParagrahEvent();
                }
                else
                {
                    alert(myajax.responseXML);
                }
            }
        }
    }

Ok here we have two functions that I like to think of as one. The first function is openDoc and it uses getAjaxRequest routine to call to a server side function or rather file “openFromDatabase.php” to process via server side and send it back down to client side.

To process this information back to our client side we must call to the function that will process our server side data by calling to our “processOpenFile” function.

Our “processOpenFile()” function is also calling and using our AJAX routines to setup an object that will represent our returning data and process it through a 4 step readyState process. Once we have received our readyState to be equal to our 4 and final step we bring our processed data back down to client side via a HTTP request

Once our data has been properly requested and processed we run it through as simple condition that states if its anything else then “html” or rather text then respond with an error. If indeed our requested data is that of html and or text we can place the returned data where ever we wish.

Our goal with the “openDoc()” function is to retrieve date from our server on every open of this instant edit script in order to populate our edit area with the most updated paragraph edits. So in order to perform such a thing we want to call a loss request to our openDoc() by adding “openDoc();” to our script.

Here is our complete AJAX open and save functions

openDoc();
function saveDoc()
{
	function createpoststring()
	{
		var currentEdit = document.getElementById('pallet').innerHTML;
		var poststr = "currentEdit=" + encodeURI(currentEdit);
		return poststr;
	}
		createpoststring();
		var poststr = createpoststring(); //Get contents to post and create query string first
		ajaxpack.postAjaxRequest("save2database.php", poststr, createpoststring, "html");
}
function openDoc()
{
	ajaxpack.getAjaxRequest("openFromDatabase.php", "", processOpenFile, "html");
}
//LOAD FILE FUNCTION
function processOpenFile()
{
    var myajax = ajaxpack.ajaxobj;
    var myfiletype = ajaxpack.filetype;
    if (myajax.readyState == 4)//if request of file completed
    {
        if (myajax.status == 200 || window.location.href.indexOf("http") == -1)
        {
            if (myfiletype == "html")
            {
                document.getElementById("pallet").innerHTML = myajax.responseText;
                setParagrahEvent();
            }
            else
            {
                alert(myajax.responseXML);
            }
        }
    }
}

Great now lets quickly think about how we want to begin to use these two functions. Well we know what we want to preform a openDoc on every loading of our instant edit but what about our saveDoc function. The saveDoc function would most likely want to be done after ever edit is complete even if its to open another edit from a previous edit.

Lets go back to our working instant edit and incorporate our “saveDoc()” function. In your removeTextarea() function we want to add our saveDoc() function so make it look like the follow:

function removeTextarea()
{
    var textarea = document.getElementById('currentEdit');
    var textareaInners = textarea.value;
    if(textareaInners == "")
    {
        alert('Sorry but in this demo you must have at least one character in your paragraph edit!');
        var makeNewP = document.createElement('p');
        var getParent = textarea.parentNode;
        var sibling = textarea.nextSibling;
        var textareaInners = "WE NEED TO HAVE SOME TEXT HERE TO EDIT AND SAVE TO OUR DATABASE!!";
        getParent.insertBefore(makeNewP,sibling);
        makeNewP.innerHTML = textareaInners;
        getParent.removeChild(textarea);
        setParagrahEvent();
        saveDoc();
    }
    else
    {
        var makeNewP = document.createElement('p');
        var getParent = textarea.parentNode;
        var sibling = textarea.nextSibling;
        getParent.insertBefore(makeNewP,sibling);
        makeNewP.innerHTML = textareaInners;
        getParent.removeChild(textarea);
        setParagrahEvent();
        saveDoc();
    }
}

Ok so remember that upon every completed edit either it be from one edit to another we always close up or “remove” our working textarea so what better place to have our saveDoc() function to capture all completed edits then after our working textarea has been removed.

So you may now have tried to run the additions to our instant edit script and may have noticed that nothing is being saved out or retried from our database. This is because we have not created our server side functions or files “save2database.php” and “openFromDatabase.php”. Is the wizard behind the curtains to our completed instant edit script and begins our journey into our last section for this tutorial:

CMS Instant Edit Part 3.

Let’s get into some real in depth work today. What better way to demonstrate a little of every language one might use to create internet applications than with the simple instant edit. Instant edit is more times than not is used in content management systems (CMS) to give quick edits to a site owner without having to play with code what so ever. The instant edit might seem simple at first but is a delicate build of DOM JavaScript, Ajax, PHP and MySQL. What better way to break down this topic but into these four languages.

Here is what we are going to build today.

Let’s start things off with DOM JavaScript.

Ultimately we the developers have to think about the criteria’s our instant edit is going to have to meet our simple requirements are as follows.

• Trigger even to start text edit.
• Trigger event to end text edit.
• Saves to database without page refreshing.

DOM is here to help us take care of these first two requirements. DOM is a client side language that give the flexibility to edit, add, delete, and manipulate document elements. So with DOM we will create both our trigger events to start and edit our instant text edit.

In of these first two requirements we face even more requirements and they are as follows:

• Trigger start event must take place when double clicking a specifically specified pages element.
• Trigger end event must take place when double clicking another none specified pages element.
• If an edit is still in progress when double clicking another specifically specified pages element we clean up our first edit and begin another.

Ok so we have a crude outline of our most basic requirement for our instant edit so now let’s think about how we are going to meet these requirements. Our trigger events would be the most logical place to start so let’s dig in.

Our first trigger event is going to take place when a user double clicks on a specified pages element. So we need to pick what element is going to be our pivoting point from no instant edit to instant edit and back again. As a web developer we have many page elements that encompass content on sites however the most common element that surrounds text would be the paragraph tags (<p></p>). So for our instant edit we will be basing our trigger events off the paragraph tags so when our user double clicks a paragraph tag our instant edit will begin or end.

Let start code!!

Start off with our blank document.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

In our header add the following script tags.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript">
    </script>
</head>

Also in your header add the following CSS.

<style type="text/css">
	#pallet p:hover {cursor:pointer; border:}
</style>

Now in our body add the following.

<div id="pallet">
    <p>
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
        tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>
</div>

Ok now back in your script tags lets create our first function. This function will be called the setParagrahEvent() and is our event to turn on our instant edit when double clicking a paragraph tag.

Add the following to our script tags:

function setParagrahEvent()
{
 var ps = document.getElementById('pallet').getElementsByTagName('p');
 for(var i=0;i<ps.length;i++)
 ps[i].ondblclick=function(){  Limit(this);  }
}

Ok so lets break down this function.

In our first line of this function we set a variable called “ps” that is reference or pointing rout to where our script should be looking to locate all the paragraph tags one is going to allow to be edited. Here we point the variable “ps” to first our document, then use the getElementById to traverse to our documents div container of choice and with the getElementsByTagName we point to all paragraph elements.

Our next line of code is what’s called a “for loop” and it sets a numerical variable called “i” and runs through a loop over our “ps” variable to locate all paragraph tags in our div container “pallet”.

Next line works with our “for loop” to add an ondblclick function to each found paragraph in our div container “pallet”. The function we add to each found paragraph tag is called Limit(this); and we set it to each paragraph tag to allow our script to not only find all our paragraph elements but bubble up our specifically double clicked paragraph to the top and edit only it, not the rest.

Well now that we have a function called Limit(this); floating around our paragraph tags we must write the function its self.

Add the following to our script.

function Limit(obj){
 var zxce=window.event||arguments.callee.caller.arguments[0];
 if (!zxce) var zxce=window.event;
 zxce.cancelBubble=true;
 if (zxce.stopPropagation) zxce.stopPropagation();
}

Ok this is a our limit function that receives our found paragraph tags and limits the returned or bubbled up paragraph tag we have double clicked to edit. Once our limit function has found our paragraph tag to edit we can begin to start manipulating our found paragraph tag to edit its contents.

Most likely the text our instant edit will be editing is a long line of text so its wise to use a textarea tag to be our editor for our text. Our textarea should also be unique to the whole document meaning that only one text area with a unique id should exist on the page at any time. So what we want to do is setup a condition that says if any textarea with this unique id is found do this if its not found then do other.

Here is our condition code so add it to our limit function:

var textarea = document.getElementById('currentEdit');
	 if(textarea == null)
	 {
	 }
	 else
	 {
	 }

Here we set a new variable call textarea and its pointing to any element in our document that has an id of “currentEdit”.
Next we have an if and else conditional statement that’s set to read as, “if textarea is not found then do this, else do that“. What goes in between the else curly brackets represents if a textarea that has an id of “currentEdit” is indeed found. Everything in the if curly brackets is for if a textarea that has an id of “currentEdit” is not found.

Great lets move onto what will be our conditions for both our if and else conditional statement.

So think about this, if no textarea is found we of course want to add one, but what about our else statement? If there is a textarea found we want to remove it right, but what about if a user is trying to double click onto a second edit to end the first edit. To do such a thing we have to be prepared to add a new textarea in both our if and else statements but only in our else do we remove a old textarea before adding a new one.

Make your if and else conditions look like the following:

	 if(textarea == null)
	 {
		 //INSERT TEXTAREA
		 var makeTextarea = document.createElement('textarea');
		 makeTextarea.setAttribute('id','currentEdit');
		 makeTextarea.style.width="100%";
		 makeTextarea.style.minWidth="100%";
		 var parentElement = obj.parentNode;
		 var nextElement = obj.nextSibling;
		 var elementsInners = obj.innerHTML;
		 makeTextarea.value = elementsInners;
		 parentElement.insertBefore(makeTextarea,nextElement);
		 //REMOVE PARAGRAPH ELEMENT
		 parentElement.removeChild(obj);
		 setParagrahEvent();
	 }
	 else
	 {
		 removeTextarea();
		 //INSERT TEXTAREA
		 var makeTextarea = document.createElement('textarea');
		 makeTextarea.setAttribute('id','currentEdit');
		 makeTextarea.style.width="100%";
		 makeTextarea.style.minWidth="100%";
		 var parentElement = obj.parentNode;
		 var nextElement = obj.nextSibling;
		 var elementsInners = obj.innerHTML;
		 makeTextarea.value = elementsInners;
		 parentElement.insertBefore(makeTextarea,nextElement);
		 //REMOVE PARAGRAPH ELEMENT
		 parentElement.removeChild(obj);
		 setParagrahEvent();
	 }

Ok calm down and we will go over each part to clear up any confusion to what we are look at here. In both our if and else statements we now have a section call “INSERT TEXTAREA” however in the else statement we have an additional “removeTextarea();” function. This removeTextarea function will be covered in a bit but its important to see this slight difference between the if and else.

Our “INSERT TEXTAREA” works like this.

• var makeTextarea = document.createElement(’textarea’) (New variable that creates a textarea)
• makeTextarea.setAttribute(’id’,'currentEdit’) (Sets this new textareas id to “currentEdit”)
• makeTextarea.style.width=”100%”; (Sets our textarea width to be 100%)
• makeTextarea.style.minWidth=”100%”; (Sets our textarea min-width to be 100%)

• var parentElement = obj.parentNode; (Obj is our paragraph tag and with parentNode we travers to its parent node)
• var nextElement = obj.nextSibling; (Sets up another varible that points to our obj paragraph tags next sibling)
• var elementsInners = obj.innerHTML; (Here we capture our paragraphs innerHTML or text we want to edit)
• makeTextarea.value = elementsInners; (This grabs our captured innerHTML or text and sets it into our new textarea)
• parentElement.insertBefore(makeTextarea,nextElement); (This points to obj’s parent and inserts the textarea after our nextElement)

Ok so in a nut shell we have made a new textarea and set its id to be unique and a few styles. We then set up three new variables call parentElement nextElement and elementsInners to point to our paragraphs tags parent, next sibling and inner text. Next we use the above variables to copy our paragraphs tags inner text into our new textarea and append our new textarea to our document and after our paragraph tags.

Great but we also must remove our paragraph tags from our document so we don’t end up with our original paragraph tags and also a textarea both containing the text we would like to edit on the same page. To remove our paragraph tags we simple take a look at the other section that both our if and else statement have called “//REMOVE PARAGRAPH ELEMENT”.

//REMOVE PARAGRAPH ELEMENT
parentElement.removeChild(obj);
setParagrahEvent();

All we are doing here is again using our variable called parentElement and removing our obj variable and we also call to our setParagrahEvent(); to reinstall our double click even for find out selected paragraphs.

So our script should look like this now.

function setParagrahEvent(){
 var ps=document.getElementById('pallet').getElementsByTagName('p');
 for(var i=0;i<ps.length;i++)
  ps[i].ondblclick=function(){  Limit(this);  }
}
function Limit(obj){
 var zxce=window.event||arguments.callee.caller.arguments[0];
 if (!zxce) var zxce=window.event;
 zxce.cancelBubble=true;
 if (zxce.stopPropagation) zxce.stopPropagation();
 	 //CONVERT OLD EDIT BACK INTO P TAG
	 var textarea = document.getElementById('currentEdit');
	 if(textarea == null)
	 {
		 //INSERT TEXTAREA
		 var makeTextarea = document.createElement('textarea');
		 makeTextarea.setAttribute('id','currentEdit');
		 makeTextarea.style.width="100%";
		 makeTextarea.style.minWidth="100%";
		 var parentElement = obj.parentNode;
		 var nextElement = obj.nextSibling;
		 var elementsInners = obj.innerHTML;
		 makeTextarea.value = elementsInners;
		 parentElement.insertBefore(makeTextarea,nextElement);
		 //REMOVE PARAGRAPH ELEMENT
		 parentElement.removeChild(obj);
		 setParagrahEvent();
	 }
	 else
	 {
		 removeTextarea();
		 //INSERT TEXTAREA
		 var makeTextarea = document.createElement('textarea');
		 makeTextarea.setAttribute('id','currentEdit');
		 makeTextarea.style.width="100%";
		 makeTextarea.style.minWidth="100%";
		 var parentElement = obj.parentNode;
		 var nextElement = obj.nextSibling;
		 var elementsInners = obj.innerHTML;
		 makeTextarea.value = elementsInners;
		 parentElement.insertBefore(makeTextarea,nextElement);
		 //REMOVE PARAGRAPH ELEMENT
		 parentElement.removeChild(obj);
		 setParagrahEvent();
	 }
}

Ok lets move onto our removeTextarea function.

Add the following to our script:

function removeTextarea()
{
	 var textarea = document.getElementById('currentEdit');
	 var textareaInners = textarea.value;
	 var innersLength = document.getElementById('currentEdit').value;
	 var innersLength = innersLength.replace(/ /g,"");
  var innersLength = innersLength.replace(/\n/g,"");
	 if(innersLength.length == 0)
	 {
	 }
	 else
	 {
	 }
}

Ok our removeTextarea function first sets up two variables called textarea that points to our textarea with its unique id “currentEdit” and then our second variable called textareaInners points to our textarea’s value or rather text that may or may not be edited.

We then setup three more variables named “innerLength”. The first “innerLength” variable points to and grabs our “currentEdit’s” elements value or text. Then we setup another variable of the same name and equal it to our first variable and run a JavaScript replace function to remove all spaces. Our third and last variable is also named “innersLength and is equal to our second “innersLenght” and is also using a “replace” function to remove all carriage returns.

We then have a conditional statement that states if “innersLength.lenght” is equal to none or “0″ we do this and if “innersLenght” equals any number other than 0 do that.

Its time to think about some things again. if indeed there is no text in our textarea we want to make be sure to replace that nothing with something, other wise we leave an empty paragraph tag. Add the following in the if curly brackets.

alert('Sorry but you must not remove all text!');
var makeNewP = document.createElement('p');
var getParent = textarea.parentNode;
var sibling = textarea.nextSibling;
var textareaInners = "[EMPTY]";
getParent.insertBefore(makeNewP,sibling);
makeNewP.innerHTML = textareaInners;
getParent.removeChild(textarea);
setParagrahEvent();

We first call for an alert to notify the user that they have just tried to same an empty textarea and its not allowed. Then we create four variables called makeNewP, getParent, sibling and textareaInners. Our makeNewP creates a new paragraph tag to replace our textarea while our getParent points to our textareas parent node. The sibling variable points to our textarea’s sibling and our textareaInners gets set to “[EMPTY]” to replace our nothing with something.

Ok next we use our getParent variable to inert our new paragraph element before our textarea’s sibling. We also insert the captured inner text from our textarea back into our new paragraph tag and finally remove our textarea from our document. Again we re-install our setParagrahEvent() to set us up for our next paragraph select.

Lets move onto what goes in between our else curly brackets. Add the following to your else statement.

var makeNewP = document.createElement('p');
var getParent = textarea.parentNode;
var sibling = textarea.nextSibling;
getParent.insertBefore(makeNewP,sibling);
makeNewP.innerHTML = textareaInners;
getParent.removeChild(textarea);
setParagrahEvent();

Ok this is exactly the same as our if statement but its not alerting our user about and empty textarea and instead of filling our newly created paragraph tag with “[EMPTY]” we fill it with our edited text.

Here is our compleated script

function setParagrahEvent(){
 var ps=document.getElementById('pallet').getElementsByTagName('p');
 for(var i=0;i<ps.length;i++)
  ps[i].ondblclick=function(){  Limit(this);  }
}
function Limit(obj){
 var zxce=window.event||arguments.callee.caller.arguments[0];
 if (!zxce) var zxce=window.event;
 zxce.cancelBubble=true;
 if (zxce.stopPropagation) zxce.stopPropagation();
 	 //CONVERT OLD EDIT BACK INTO P TAG
	 var textarea = document.getElementById('currentEdit');
	 if(textarea == null)
	 {
		 //INSERT TEXTAREA
		 var makeTextarea = document.createElement('textarea');
		 makeTextarea.setAttribute('id','currentEdit');
		 makeTextarea.style.width="100%";
		 makeTextarea.style.minWidth="100%";
		 var parentElement = obj.parentNode;
		 var nextElement = obj.nextSibling;
		 var elementsInners = obj.innerHTML;
		 makeTextarea.value = elementsInners;
		 parentElement.insertBefore(makeTextarea,nextElement);
		 //REMOVE PARAGRAPH ELEMENT
		 parentElement.removeChild(obj);
		 setParagrahEvent();
	 }
	 else
	 {
		 removeTextarea();
		 //INSERT TEXTAREA
		 var makeTextarea = document.createElement('textarea');
		 makeTextarea.setAttribute('id','currentEdit');
		 makeTextarea.style.width="100%";
		 makeTextarea.style.minWidth="100%";
		 var parentElement = obj.parentNode;
		 var nextElement = obj.nextSibling;
		 var elementsInners = obj.innerHTML;
		 makeTextarea.value = elementsInners;
		 parentElement.insertBefore(makeTextarea,nextElement);
		 //REMOVE PARAGRAPH ELEMENT
		 parentElement.removeChild(obj);
		 setParagrahEvent();
	 }
}
function removeTextarea()
{
	 var textarea = document.getElementById('currentEdit');
	 var textareaInners = textarea.value;
	 var innersLength = document.getElementById('currentEdit').value;
	 var innersLength = innersLength.replace(/ /g,"");
  	 var innersLength = innersLength.replace(/\n/g,"");
	 if(innersLength.length == 0)
	 {
		alert('Sorry but you must not remove all text!');
		var makeNewP = document.createElement('p');
		var getParent = textarea.parentNode;
		var sibling = textarea.nextSibling;
		var textareaInners = "[EMPTY]";
		getParent.insertBefore(makeNewP,sibling);
		makeNewP.innerHTML = textareaInners;
		getParent.removeChild(textarea);
		setParagrahEvent();
	 }
	 else
	 {
		var makeNewP = document.createElement('p');
		var getParent = textarea.parentNode;
		var sibling = textarea.nextSibling;
		getParent.insertBefore(makeNewP,sibling);
		makeNewP.innerHTML = textareaInners;
		getParent.removeChild(textarea);
		setParagrahEvent();
	 }
}

Ok a few things to talk about before we move on. In the above demo you can disable all occurrences of a textarea with our unique id by double clicking our body tag and we do this by adding the following to our body tag.

<body ondblclick="removeTextarea()">

Last we must install our setParagraphEvent() by again adding this to our body tag.

<body onload="setParagrahEvent()" ondblclick="removeTextarea()">

CMS Instant Edit Part 2.