Creating orkut style status update div-textbox using jQuery.

You must have seen orkut style status update box where in the details can be modified by clicking on it. Once user click the details, details gets populated inside a textbox and an update button. Once update button is clicked, the data gets updated in database. Similar status update box is available in wordpress too, where Permalink is being updated. This can be achieved by using jQuery. First in order to add an updatable box in on some value, following <div> or <span> tag need to be used.

<span id="field1" class="update">Sometext goes here</span>
Code language: HTML, XML (xml)

Following CSS also can be applied in order to make the background light yellow.

.update {
        background-color:#FFFFC6;
        display: inline;
}
Code language: CSS (css)

Once this is done, the html screen will look likes: Now, import jQuery.js and copy following javascript code in your javascript file.

function fnUpdate(value, no) {
	alert("Handler function called.")
	return true;
}

var updateClick = function(e){
	
	if(typeof this != "object") {
		return;
	}
	e.preventDefault();
	e.stopPropagation();
	
	var text = document.createElement("input");
	text.setAttribute("type", "text");
	text.setAttribute("value", $(this).text());
	
	var button = document.createElement("input")
	button.setAttribute("type", "button");
	button.setAttribute("value", "Update");
	
	var cancel = document.createElement("A")
	cancel.setAttribute("href", "javascript:");
	cancel.innerHTML = "Cancel";
	
	
	var hidden = document.createElement("input");
	hidden.setAttribute("type", "hidden");
	hidden.setAttribute("value", $(this).text());
	
	$(cancel).click(function(e){
		
		e.stopPropagation();
		
		var val = this.nextSibling.value;
		$(this).parent().html(val);
		
	});
	
	$(this).html(text);
	$(this).append(button);
	$(this).append(cancel);
	$(this).append(hidden);
	
	$(text).click(function(e){ e.stopPropagation(); });
	$(text).keypress(function(e){
		if(e.which == 13) {
			$(this).next().click();
		}
	});
	$(button).click(function(e){
		e.stopPropagation();

		var func = $(this).parent().attr("onupdate");
		var id = $(this).parent().attr("id");
		var val = this.previousSibling.value;
		
		var fnHandler = func + "(\"" + val + "\"," + id + ")";
		
		this.previousSibling.disabled = true;
		this.disabled = true;
		
		var ret = eval(fnHandler);
		if(ret == true) {
			var val = this.previousSibling.value;
			if(val == null || val == "") {
				val = "                   ";
			}
			$(this).parent().html(val);
		}else {
			this.disabled = false;
			this.previousSibling.disabled = false;
		}
	});
	text.focus();
}

$(document).ready(function() {

	$(".update").each(function() {
		$(this).click(updateClick);
		$(this).attr("title", "Click here to update");
	});
});
Code language: JavaScript (javascript)

Thus when this javascript gets loaded, the div or span used to enclosed the text will became an update box which changes into a text box once you click it. Once the Update button is clicked, a javascript function called fnUpdate will be called which will have two arguments. First argument will be text value of the update box and second value will be the id that you provide in <div> or <span> that encloses the text. Also note that function name “fnUpdate” has been taken from onupdate=”” attribute of <div> or <span>. The fnUpdate function should return true or false. If it returns true, than the text will be updated and textbox will again convert into div text. And if the function returns false, than the text will not gets updated.

Demo

Download

Download complete source (ZIP, 32kb) I will try to clean this code a little bit and convert it into a jQuery plugin.