<html>
<head>
<title>Example page: instant edit AJAX-style</title>
<script type="text/javascript">
<!--
//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 = "update.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;
if(height < 40){
if(width < 100) width = 150;
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 + "');\" />";
}else{
if(width < 70) width = 90;
if(height < 50) height = 50;
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;
}
addEvent(window, "load", editbox_init);
-->
</script>
<style type='text/css'>
body{
font-family: verdana;
font-size: .9em;
}
input, textarea, pre{
font-family: verdana;
font-size: inherit;
font-family: inherit;
}
label{
width: 110px;
}
#userName, #userName_field{
font-size: 14px;
}
#cityName, #cityName_field{
font-size: 14px;
background-color: #333;
color: #fff;
}
#blogTitle, #blogTitle_field{
font-size: 24px;
}
#blogText, #blogText_field{
width: 240px;
}
#lorumText, #lorumText_field{
width: 500px;
}
</style>
</head>
<body>
<script type="text/javascript">
setVarsForm("pageID=profileEdit&userID=11&sessionID=28ydk3478Hefwedkbj73bdIB8H");
</script>
<!-- digg image -->
<div style="float:right; padding: 10px;"><a href="http://digg.com/programming/Simple_AJAX_inline_text_update_2.0_" target="_new"><img src="digg.gif" border="0"></a></div>
<label>Your name:</label> <span id="userName" class="editText">John Doe</span><br />
<label>Your city:</label> <span id="cityName" class="editText">Rotterdam, NL</span>
<hr />
<h1><span id="blogTitle" class="editText">AJAX instant edit script - clean HTML</span></h1>
<span id="blogText" class="editText">Welcome to my blog. Today i created this instant update script. Click here to try! If you like it you can download and view the source at: yvoschaap.com. Have fun and success.</span>
<p>Message of the day:<strong><span id="messageDay" class="editText">Time Spend Wishing, Is Time Wasted</span></strong></p>
<hr>
<span id="lorumText" class="editText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut faucibus commodo lacus. Donec egestas magna et risus.<br />
<br />
Etiam velit tellus, sagittis eget, pretium eu, sagittis ut, sem. Aliquam est. Nam condimentum. In massa ligula, varius in, aliquet vehicula, facilisis id, ante. Sed purus. Vestibulum tempus facilisis lectus. Phasellus convallis, lorem in bibendum convallis, nunc nisl fringilla sem, ut nonummy turpis nunc sed risus. Aliquam bibendum semper ipsum. <br />
<br />
In hac habitasse platea dictumst. Maecenas vulputate, nisl nec tempus rutrum, tortor ligula interdum urna, eget porttitor risus sem eu odio. <br />
<br />
Nullam vel leo sed enim sodales euismod. Phasellus volutpat purus sit amet erat. Nulla ut enim. Nullam tempus enim eget lacus. Nulla a nibh eu enim bibendum bibendum. Nunc justo. Vivamus sagittis sollicitudin lacus. Duis lacinia nisi et lectus. Etiam ac felis et est sagittis aliquam. Duis vitae nulla. Nam sed nibh. Mauris fermentum sodales nulla. Nam fringilla. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce consectetuer. <br />
</span>
<p></p>
<hr>
<em>note: editted text fields in this example do not save!</em><br />
<em><a href="http://www.yvoschaap.com/index.php/weblog/ajax_inline_instant_update_text_20">Back to article</a></em>
</body>
</html>