The jquery-in-place-edit plugin is a simple and customizable in-place edit plugin for jQuery.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Introducing the jQuery in-place-edit Plugin


The jquery-in-place-edit plugin is a lightweight and customizable jQuery extension that allows you to easily add in-place editing functionality to your web applications.


  • Templates that allow you to customize the look and feel.
  • Callbacks that allow you to add and change the default behavior.
  • Lightweight and easy to understand: allows you to modify it to fit your needs.



Inside the head tag, first include the jQuery JavaScript file then the jQuery in-place-edit file:

    <script type="text/javascript" src="javascripts/jquery.js"></script>
    <script type="text/javascript" src="javascripts/"></script>


Add the following styles to your CSS file; you can change them later:

    <style type="text/css"> { list-style: none; margin-left: 0; } li { width: 150px; margin: 0px; padding: 3px; } .field {
          width: 99%;

      .hover { background: #727EA3; color: #FFF; }
      .editing { background: white; border-top: 5px solid #ccc; }
      .disabled { background: none; color: black; }

      .buttons input {
        font-size: 10px;

That’s all there is. You’re now ready to start using the plugin.

Basic Usage

There are three additional steps involved in getting the plugin to work:

  • Adding in-place-edit elements to your HTML
  • Loading the in-place-edit plugin
  • Defining event handlers

Adding in-place-edit elements to your HTML

In this example we’ll use a paragraph:

      <div class="in-place-edit">
        <p id="item-1">Do the dishes</p>

Remember to set the id to something unique, for example a database ID. This way you can identify which database record you need to update.

Loading the in-place-edit plugin

Now you need to tell the plugin which DOM elements you want it to add the in-place-edit behavior to. This is done with jQuery selectors and a call to the inPlaceEdit method, as shown in this example:

    // Enable in-place-edit when document is loaded

        submit : submit_handler,
        cancel : cancel_handler

Defining event handlers

Note that earlier we defined two event handlers in the document onload handler: submit and cancel. I think you can guess what they do, so I won’t explain…

The last step is to add the following code above the document onload handler:

      var submit_handler = function(element, id, value) {
          alert("Edited id '" + id + "' value '" + value + "'");
          return true;

      var cancel_handler = function(element) {
          // Nothing
          return true;

Task complete. Test in your browser or have a look at this example’s code.