diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


Easy AJAX inline text edit 2.0

Yvo Schaap on useage of  AJAX inline text editor,  using a lightbox style to use it, you can simply include the javascript in the beginning then with span class=”editText” you can enable the inline text edit anywhere in the page. The server side script could be used to save changed data or make any server-side validation process. You can see a working demo of the Inline text Edit and see the blog post for more details about installing the script.


how you can make it work (5 easy steps for integration)

  • Download this Javascript file: InstantEdit 2.0 JS
  • Create a update file that handles the input. For example this PHP:  Update File
  • In your page add the javascript: <script type=”text/javascript” src=”instantedit.js”></script>
  • Set fixed 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”>

  • Last step: in your HTML for any editable field add a SPAN arround it:

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

    Note: id is the fieldname (?userName=John Doe&), and should be unique!

You’re done! Tell you friends…

how it works

A small piece of javascript reads al SPAN tags, checks if it has class=”editText” and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has the ability to edit the 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 script works in internet explorer and firefox. Any other platforms haven’t been tested. That’s kinda up to you.


Share This Story, Choose Your Platform!

Get Latest News

Subscribe to Digital News Hub

Get our daily newsletter about the latest news in the industry.
First Name
Last Name
Email address
Secure and Spam free...