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(‘http://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 © 2024 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

opinion

To Cloud or Not to Cloud, That Is the Question

Let’s be honest. It just sounds way cooler to say your business is “in the cloud,” right? Buzzwords make everything sound chic and relevant. In fact, someone uninformed might even assume that any hosting that is not in the cloud is inferior. So what’s the truth?

Brad Mitchell ·
opinion

Upcoming Visa Price Changes to Registration, Transaction Fees

Visa is updating its fee structure. Effective April 1, both the card brand’s initial nonrefundable application fee and annual renewal fee will increase from $500 to $950. Visa is also introducing a fee of 10 cents for each transaction, and 10 basis points — 0.1% — on the payment volume of certain merchant accounts.

Jonathan Corona ·
opinion

Unpacking the New Digital Services Act

Do you hear the word “regulation” and get nervous? When it comes to the EU’s Digital Services Act (DSA), you shouldn’t worry. If you’re complying with the most up-to-date card brand regulations, you can breathe a sigh of relief.

Cathy Beardsley ·
opinion

The Perils of Relying on ChatGPT for Legal Advice

It surprised me how many people admitted that they had used ChatGPT or similar services either to draft legal documents or to provide legal advice. “Surprised” is probably an understatement of my reaction to learning about this, as “horrified” more accurately describes my emotional response.

Corey D. Silverstein ·
profile

WIA Profile: Holly Randall

If you’re one of the many regular listeners to Holly Randall’s celebrated podcast, you are already familiar with her charming intro spiel: “Hi, I’m Holly Randall and welcome to my podcast, ‘Holly Randall Unfiltered.’ This is the show about sex, the adult industry and the people in it.

Women In Adult ·
trends

What's Hot Now: Leading Content Players on Trending Genres, Monetization Strategies

The juggernaut creator economy hurtles along, fueled by ever-ascendant demand for personality-based authenticity and intimacy — yet any reports of the demise of the traditional paysite are greatly exaggerated.

Alejandro Freixes ·
opinion

An Ethical Approach to Global Tech Staffing

One thing my 24-year career as a technologist working to support the online adult entertainment industry has taught me about is the power of global staffing. Without a doubt, I have achieved significantly more business success as a direct result of hiring abroad.

Brad Mitchell ·
opinion

Finding the Right Payment Partner

Whenever I am talking with businesses that are just getting started, one particular question comes up a lot: “How do I get a merchant account?” It’s a simple question, but it has a complicated answer.

Jonathan Corona ·
opinion

The Taxman Cometh for Every Business

February may be the month of romance, but it is also a time when we need to think about something that inspires very little love: taxes. April is not far away, and the taxman is always waiting. This year, federal and most state income taxes are due Monday, April 15.

Cathy Beardsley ·
opinion

The Continuous Journey of Legal Compliance in Adult

The adult entertainment industry is teeming with opportunity but is also fraught with challenges, from anticipating consumer behavior to keeping up with technological innovation. The most labyrinthine of all challenges, however, is the world of legal compliance.

Corey D. Silverstein ·
Show More