Ajax Instant Edit Text

User can edit the inline text without using the submit button.

This javascript code works with all SPAN tags, It adds an onclick function if class=”editText” and a id=, is true. That onclick function will create a textfield or input which depends on the size of the editable text.
Through this code user has the ability to edit the text field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and ‘sends’ the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will dissapear again.

This is a very simple script which only works with span tags. Text from the span html tag is sent to update.php which process the request.
Plain html is returned from the server and this result populates the span.
Follow these steps to integrate the file:

# Download javascript source code instantedit
# Add the javascript code in your page:
# Set fixed variables (vars) (like hidden elements in a field post). These will be posted with the editable field so you can identify a user/session.

script type=”text/javascript”>
setVarsForm(”pageID=profileEdit&userID=11″);

# Finally: in your HTML for any editable field add a SPAN arround it:

<span id=”userName” class=”editText”>John Doe</span>

Download: http://www.ajaxlady.com/wp-content/uploads/2008/09/instantedit.js
Source: http://www.ajaxlady.com/wp-content/uploads/2008/09/instantedit.js

Related Listings:

1. Edit-In-Place With Ajax How it works A small piece of javascript reads al...
2. Ajax Inline Quick Edit in Place Ajax Inline Edit in Place Script is a fast forward...
3. Flickr Like Edit in Place How to edit in place using AJAX? If you are...
4. Inline Edit Plugin – Moo Script An even newer version of inlineEdit is out! Check out...
5. Ajax Inline Online Editor for Articles This is an ajax inline editor that will allow you...

Do you like this post?

Email: