Inline editing in paragraphs, div, span etc. by jQuery: InlineEdit

Create editable elements in webpages

The InlineEdit plug-in allows creating the elements in your web pages that are editable upon double clicking. You may make editable paragraphs, span or text in the div tag that can be saved on the server without refreshing the website.

The edited text is sent to the server by AJAX call. As a specified element is double-clicked, the exiting text is assigned to a text input field. The entered data may also be validated on client-side with regex (by using the data-regex attribute). See demos below.

Demo 1 Demo 2
Developer’s page | Download plug-in

How to set up InlineEdit plug-in?

After getting the package, include the required files in the <head> section:

<link rel=”stylesheet” type=”text/css” href=”css/inlineedit/inlineedit.css”>

<script src=”js/inlineedit/inlineedit.js”></script>

Include the JS file after the jQuery reference.

The markup

Use the text elements like a div, paragraph, span etc with appropriate data attributes:

 

Initiate the plug-in

For a paragraph with data class:

 

The edit.php is the file that is called by AJAX that may comminute to the database server for saving any changes made.

Also note, the data-identifier attribute is mandatory that contains a unique identifier. The data-regex attribute is where you may provide certain conditions like entering only small or capital letters or numbers (See demos below)

A demo of creating an editable paragraph

In this demo of the editable text element, a paragraph is used with the basic CSS. The paragraph tag is assigned the following data attributes:

  • data-identifier=”10″ // Unique identifier that can be used on server
  • data-regex=”^([a-z])+$” // Regex i.e. editable test can be small letter only
  • data-regex-comment=”small characters only” //Display comment if some other character is entered

Double click on the green paragraph and edit the text.

jQuery inline edit

See online demo and code

The markup:

 

The jQuery code:

 

The data entered in the text field can be received by using the available option in the PHP or other scripts. Read the full documentation here to learn about options, server side handling and data attributes.

A demo of using span tag with numbers only

As mentioned earlier, by using the regex, you may restrict users for entering specific data. In this demo, a span tag is used inside the <p> tag. The span contains the number and allows changing the numbers by double clicking on it. Double click inside the green area and try entering other characters and then numbers.

jQuery inline edit span

See online demo and code

The markup:

 

 

A little CSS:

 

The script is same as in above demo.