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:
<p class="data" data-identifier="10" data-regex="^([A-Z])+$" data-regex-comment="Capital characters">Double click here to edit text</p>
Initiate the plug-in
For a paragraph with data class:
<script>
$(document).ready(function(){
$('p.data').inlineEdit({
url: 'edit.php',
unknown: 'test',
});
})
</script>
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.
See online demo and code
The markup:
<h1>A demo of InlineEdit</h1> <main> <h2>Edit the paragraph below</h2><br /> <p class="data" data-identifier="10" data-regex="^([a-z])+$" data-regex-comment="small characters only">Double click here to edit text</p> </main>
The jQuery code:
<script>
$(document).ready(function(){
$('p.data').inlineEdit({
url: 'inline-edit/update.php',
unknown: 'test',
});
})
</script>
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.
See online demo and code
The markup:
<h1>A demo of InlineEdit</h1> <main> <h2>Edit the span tah below</h2><br /> <p>Double click inside the number <span class="data" data-identifier="10" data-regex="^([0-9])+$" data-regex-comment="Only number please">123456789</span> Thanks</p> </main>
A little CSS:
<style>
.data{
background: #008040;
border-radius: 15px;
padding:10px;
color:#fff;
}
</style>
The script is same as in above demo.