Introducing the jQuery in-place-edit Plugin

Introduction

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.

Contents

Features

Installation

JavaScript

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/jquery.in-place-edit.js"></script>
        
      

CSS

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

        
          <style type="text/css">
            ul.in-place-edit { list-style: none; margin-left: 0; }
              ul.in-place-edit li { width: 150px; margin: 0px; padding: 3px; }

              ul.in-place-edit .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;
            }
            
          </style>
        
      

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

In this example we'll use a paragraph:

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

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
          $(document).ready(function(){

            $(".in-place-edit").children().inPlaceEdit({
              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) {
                jQuery.post("{% url live_edit %}",
                  {
                    id: id,
                    value: value,
                  },
                  function(data){
                    if (data.errors) {
                      alert(data.errors);
                    }
                    console.log(data);
                  }, "json"
                );
                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.