Dev Depot: Jeditable, Providing Inline Editing Functions

According to coder Mika Tuupola, Jeditable (www.appelsiini.net/projects/jeditable) is a jQuery plugin providing inplace editing functions, which with a few lines of JavaScript, allows users to click and edit the content of designated HTML elements.

For example, when a user clicks editable text on a web page, the specified text block becomes a web form, allowing the user to edit the contents. A press of the submit button and the new text is sent to a server and saved, with the form becoming normal text again.

Another boon for power users is the ability to submit user edited content to a function rather than to a URL.

The live demo makes understanding its implementation easy.

Based on Dylan Verheul’s editable, which it supersedes, Jeditable is also available on GitHub, where the latest “bleeding edge” code is made available for the adventurous.

As to why you would want to add an inplace editing feature to your website, that all depends upon your own creativity and the needs of your users. Fortunately, how you do it is straightforward — with the plugin site offering numerous code and usage examples.

One example of the basic usage includes the following HTML elements:

<div class=”edit” id=”div_1”>Dolor</div>
<div class=”edit_area” id=”div_2”>Lorem ipsum dolor sit amet</div>

The only mandatory parameter is the URL where the edited content will be posted:

$(document).ready(function() {
$(‘.edit’).editable(‘https://www.example.com/save.php’);
});

In the example above, the code is doing several things: first, those elements with class “edit” become editable with a single mouse click using a text form input element that has the same width and height of the original element. If a user clicks outside the form then the changes are discarded — likewise if the user hits ESC. When the user hits “enter” the browser submits the updated text to the save.php file at www.example.com.

Of course there are a variety of available options for extending the base functionality, such as adding tooltips for informing users what they should do. The class edit_area will use a textarea as an input and displays a spinning image when data is submitted. Elements with class edit will have the text “Saving…” instead of the spinning image. CSS can also be used to style the elements as is normally done.

When submitting changes, a data set is POST:ed to your server containing the ID of the element along with the user edited content.

Values for pull down menus can be generated dynamically by fetching values from an external URL. For those who are concerned about the extra server request, PHP is usable for outputting a JSON encoded array directly into JavaScript code.

Another boon for power users is the ability to submit user edited content to a function rather than to a URL, with full control over the Ajax request and the same parameters are passed as with the URL callback. The only requirement is that the function must return a string, which is usually the edited content, displayed on-page after editing is completed.

Editing of the element can be triggered using the option event, with all jQuery events available, but click and dblclick are the most usable ones.

Miscellaneous options include altering the default action of what happens when a user clicks outside of the editable area, which is to cancel edits, but ignore and submit are also available for those users with specific needs.

Try it for yourself!

Related:  

Copyright © 2025 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

profile

WIA Profile: Leah Koons

If you’ve been to an industry event lately, odds are you’ve heard Leah Koons even before you’ve seen her. As Fansly’s director of marketing, Koons helps steer one of the fastest-growing creator platforms on the web.

Women in Adult ·
opinion

What France's New Law Means for Age Verification Worldwide

When France implemented its Security and Regulation of the Digital Space (SREN) law on April 11, it marked a pivotal moment in the ongoing global debate surrounding online safety and access to adult content.

Corey D. Silverstein ·
opinion

From Tariffs to Trends: Staying Resilient in a Shaky Online Adult Market

Whenever I check in with clients these days, I encounter the same concerns. For many, business has not quite bounced back after the typical post-holiday-season slowdown. Instead, consumers have been holding back due to the economic uncertainty around the Trump administration’s new tariffs and their impact on prices.

Cathy Beardsley ·
opinion

Optimizing Payment Strategies for High Ticket Sales

Payment processing for more expensive items, such as those exceeding $1,000 per order, can create unique challenges. For adult businesses, those challenges are magnified. Increased fraud risk, elevated chargeback ratios and heavier scrutiny from banks and processors are only the beginning.

Jonathan Corona ·
profile

WIA Profile: Lexi Morin

Lexi Morin’s journey into the adult industry began with a Craigslist ad and a leap of faith. In 2011, fresh-faced and ambitious, she was scrolling through job ads on Craigslist when she stumbled upon a listing for an assistant makeup artist.

Women In Adult ·
profile

Still Rocking: The Hun Celebrates 30 Years in the Game

In the ever-changing landscape of adult entertainment, The Hun’s Yellow Pages stands out for its endurance. As one of the internet’s original fixtures, literally nearly as old as the web itself, The Hun has functioned as a living archive for online adult content, quietly maintaining its relevance with an interface that feels more nostalgic than flashy.

Jackie Backman ·
opinion

Digital Desires: AI's Emerging Role in Adult Entertainment

The adult industry has always been ahead of the curve when it comes to embracing new technology. From the early days of dial-up internet and grainy video clips to today’s polished social media platforms and streaming services, our industry has never been afraid to innovate. But now, artificial intelligence (AI) is shaking things up in ways that are exciting but also daunting.

Steve Lightspeed ·
opinion

More Than Money: Why Donating Time Matters for Nonprofits

The adult industry faces constant legal battles, societal stigma and workplace challenges. Fortunately, a number of nonprofit organizations work tirelessly to protect the rights and well-being of adult performers, producers and industry workers. When folks in the industry think about supporting these groups, donating money is naturally the first solution that comes to mind.

Corey D. Silverstein ·
opinion

Consent Guardrails: How to Protect Your Content Platform

The adult industry takes a strong and definite stance against the creation or publication of nonconsensual materials. Adult industry creators, producers, processors, banks and hosts all share a vested interest in ensuring that the recording and publication of sexually explicit content is supported by informed consent.

Lawrence G. Walters ·
opinion

Payment Systems: Facilitator vs. Gateway Explained

Understanding and selecting the right payment platform can be confusing for anyone. Recently, Segpay launched its payment gateway. Since then, we’ve received numerous questions about the difference between a payment facilitator and a payment gateway. Most merchants want to know which type of platform best meets their business needs.

Cathy Beardsley ·
Show More