What is inline editing?
Inline editing, some times called as in-place editing, is a feature that helps users easily edit some content on a page without losing the context. In other words, the user doesn’t need to navigate to a separate editing screen or another web page. It enables users to modify text, data, or other content elements directly where they are displayed, providing a more seamless and efficient editing experience. Let’s see how to do Inline editing using jQuery and Bootstrap by using some simple codes.
If you are in a hurry or want to jump into the code samples for inline editing directly, scroll down to the demo section! However, I insist on continue reading to understand what really is inline editing and what all are the positive aspects it adds to your application.
In a simple implementation of inline editing, users can simply click on the content/value they want to edit, and the editable area transforms into an input field or an appropriate editing interface. The user can make changes to the content, such as updating text or selecting options from dropdowns, all within the existing page or view.
Advantages of inline editing
- Contextual Editing: There is no need to switch between different screens or views.The user can directly interact with the content they are modifying.
- Instant Feedback: Users can immediately see the changes they make as they update the content.
- Less Errors: Users can verify the changes they make in real-time reducing the chances of mistakes or inconsistencies that might occur when editing in a separate screen.
- Mobile-Friendly: Inline editing is particularly well-suited for mobile devices, where screen space is limited. It provides a more compact and efficient way of editing experience.
- Reducing the load: A large form or a web page section with inline editing enabled sends the minimum amount of data to the server side.
Now, let’s see couple of demos and code samples for inline editing:
1. Client-side Inline Edit – Text Field
Following is the demo of editing a text field value:
Check the code snippets given below for editing a text field value inline:
1.1) HTML
First, load the latest Bootstrap css file using CDN or local resource.
<!-- include bootstrap CSS in head section -->
<head>
<title>Client-side Inline Edit (Text Field)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
Create a container div and place it wherever you need inside the <body> tag of the page.
<!-- place the container div inside page's <body> tag -->
<div class="container mt-5">
<h1>Client-side Inline Edit (Text Field)</h1>
<div id="content">
<span id="labelField">Default Value</span>
<button id="editButton" class="btn btn-primary ml-2">Edit</button>
<input type="text" id="editableField" class="form-control d-none" />
<div class="mt-2">
<button id="cancelButton" class="btn btn-secondary d-none ml-6">Cancel</button>
</div>
</div>
</div>
1.2) jQuery/JavaScript
Now comes the jQuery/JavaScript part. First, let’s include the latest jQuery JS file.
//include the latest jQuery JS file
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
Next, write the JavaScript code to handle the edit action.
//JS code to handle the edit action
<script>
$(document).ready(function() {
$('#editButton').on('click', function() {
var $label = $('#labelField');
var originalValue = $label.text();
var $input = $('<input>', {
type: 'text',
id: 'editableField',
class: 'form-control',
value: originalValue
});
$label.addClass('d-none');
$('#editButton').addClass('d-none');
$('#cancelButton').removeClass('d-none');
$input.removeClass('d-none').insertAfter($label);
$input.on('focusout', function(event) {
var newValue = $input.val();
$label.text(newValue);
$input.remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
//post data to server to save the new value
});
$input.on('keyup', function(event) {
if (event.keyCode === 13) {
var newValue = $input.val();
$label.text(newValue);
$input.remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
//post data to server to save the new value
}
});
});
$('#cancelButton').on('click', function() {
var $label = $('#labelField');
var currentValue = $label.text();
$('#editableField').val(currentValue);
$('#editableField').remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
});
});
</script>
As you can see in the code. when a user clicks on the Edit button, we create and show a textfield programmatically to change the default value.
2. Client-side Inline Edit – Dropdown
More often we have other input elements on a page than a textfield like dropdowns. Let’s change the above code to edit a value using select box.
Here is a demo of editing a dropdown value:
Let’s see what all are the changes needed in the above code to edit a dropdown value:
2.1) HTML
Load the latest Bootstrap css.
<!-- include bootstrap CSS in head section -->
<head>
<title>Client-side Inline Edit (Text Field)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
Create a container div and place it wherever you need inside the tag of the page. This time, we will use a <select> element instead of textfield.
<!-- place the container div inside page's <body> tag -->
<div class="container mt-5">
<h1>Client-side Inline Edit (Dropdown)</h1>
<div id="content">
<span id="labelField">Option 1</span>
<button id="editButton" class="btn btn-primary ml-2">Edit</button>
<select id="editableField" class="form-control d-none">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<div class="mt-2">
<button id="cancelButton" class="btn btn-secondary d-none ml-6">Cancel</button>
</div>
</div>
</div>
2.2) jQuery/JavaScript
Include the latest jQuery JS file.
//include the latest jQuery JS file
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
Let’s add the JavaScript code to handle the edit action. Here we create a input and listen to its “change” event to update the value.
//JS code to handle the edit action
<script>
$(document).ready(function() {
$('#editButton').on('click', function() {
var $label = $('#labelField');
var originalValue = $label.text();
var $select = $('<select>', {
id: 'editableField',
class: 'form-control'
});
$('#editableField option').each(function() {
var $option = $('<option>', {
value: $(this).val(),
text: $(this).text()
});
if ($(this).val() === originalValue) {
$option.attr('selected', 'selected');
}
$select.append($option);
});
$label.addClass('d-none');
$('#editButton').addClass('d-none');
$('#cancelButton').removeClass('d-none');
$select.removeClass('d-none').insertAfter($label);
$select.on('change', function() {
var newValue = $select.val();
$label.text(newValue);
$select.remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
});
});
$('#cancelButton').on('click', function() {
var $label = $('#labelField');
var currentValue = $label.text();
$('#editableField').val(currentValue);
$('#editableField').remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
});
});
</script>
To download the full code, clone the repository from GitHub.