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.

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

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.