Wiki

Clone wiki

jinplace / Documentation

Documentation for jinplace

Introduction

Jinplace is a jQuery plugin that is used to make sections of text on a page editable directly from the page. Editing starts by clicking on the text. It then turns into an input field where the new text can be typed. Clicking outside the field will submit the new new text and once a reply has been received, the input field is removed and the new text replaces it.

That is the basic flow, but there are a number of options to change this. So for example you can have explicit OK and cancel buttons and a separate button to start editing.

For recent changes see the news

Index

  • Complete list of attributes All the attributes and configuration settings and how to use them.
  • Sending and receiving data About supplying data to the editing controls and sending it to the server.
  • Events The events that are triggered. They can be used to add your own actions to be performed on success or failure of the editing operation.
  • Writing an editor plugin A complete walkthrough of developing a new editor plugin.
  • The demo has code examples and their result.

Basic usage

Include the javascript files

As this is a jQuery plugin, you must include a version of jQuery first. It will work with jQuery greater than or equal to version 1.7. If you use version 2.0 or above, then you will of course lose IE6-8 compatibility.

Add the following line to include the plugin from the cdnjs.com delivery network.

  <script src="//cdnjs.cloudflare.com/ajax/libs/jinplace/1.2.1/jinplace.min.js"></script>

Or you can download the latest version of this plugin from the download directory and include it in your project.

Mark up the page

You should read this section in conjunction with the demo which is structured like a mini tutorial for some of the basic mark up attributes.

If text that you want to edit is already contained within an HTML element then you can just add a class and the jinplace attributes to it. If not, or you just wish to keep things separate, then just surround the text with a 'span' or 'div' element as appropriate.

Title: <span class="editable" data-url="/update_title.php">Hello world</span>

References

First read through the demo which includes the exact code samples required for various features.

Then for complete details

Updated