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>

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

.update {
        background-color:#FFFFC6;
        display: inline;
}

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");
	});
});

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.



5 Comments

  • Liam 2 January, 2009, 20:26

    First class code! The sample works well (had the change return false to return true at the start of the plugin.)

  • Pingback: Calling JavaScript function from String | viralpatel.net

  • WebDev 30 December, 2010, 15:33

    Hi Viral,

    Excellent tutorial. please write some articles on jQuery menu.

  • vijay 5 April, 2011, 19:10

    when i refresh the page the updated text is not instead of this the “some text to change” appeared
    please help

  • Johne403 8 May, 2014, 7:26

    Only wanna tell that this is very useful , Thanks for taking your time to write this. cakebabeabad

Leave a Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current day month ye@r *