Demo of the jinplace jquery plugin v1.2.1

Simple text input field

First example is a straightforward text input. Click on the underlined text to modify it.

• The url to post to is supplied.
• Clicking outside the edit field submits the data
• Hiting return normally submits the data too

  Firstname <span
    class="editable"
    data-url="/internal/person/firstname">John</span>

  <!-- This will set up all edit fields that have class 'editable' on the page -->
  <!-- So it will only be shown in this example -->
  <script>
    $('.editable').jinplace();
  </script>

Using a textarea

By default you get a normal text input. To get a textarea, then you need to set the type to textarea.

• Set data-type to textarea
• Everything else is the same as for regular inputs

  <div class="editable"
    data-type="textarea" data-url="/internal/person/favourites">
    Chocolate & Chips
  </div>

Using a select dropdown

You can also have a list of choices with a select list. In this case you must supply the list of possible choices in the data-data attribute.

• Set type to 'select'
• The data must be given.
• The data is a JSON string.

The JSON would normally be generated when the page is built.

  Direction:
  <span class="editable" data-type="select" data-url="/internal/person/direction"
        data-data='[["E", "East"], ["W", "West"]]'>East</span>

With ok button

You can add an OK button which must be clicked to accept the change.

• Adds an OK button that is clicked to submit the data.
• The text on the button is set to your value.
• Clicking outside the field, cancels

  Last name <span class="editable"
                 data-url="/internal/person/lastname"
                 data-input-class="short"
                 data-ok-button="Go">Smith</span>

With OK and cancel button

You can also add a cancel button, again with the text that you specify.

• Adds an OK button that is clicked to submit the data.
• Adds a cancel button that is clicked to abandon the edit.
• The text on the buttons are set to your values.
• Clicking outside the field does nothing.

This is particularly useful for large text areas where it is easy to lose a lot of work it you accidentally lose focus.

  Some of their favourite things
  <div class="editable"
       data-url="/internal/person/favourites"
       data-type="textarea"
       data-ok-button="OK"
       data-cancel-button="Cancel">
    Chocolate and Chips
  </div>

Separate activation button

You can have a separate button to click to start editing, rather that just clicking on the text. Any element can be used.

• Pass the css selector of the edit element in activator.
• Clicking the text no longer starts editing (unless that element is included in the selector!)
• The data-input-class sets the class that will be applied to the input field

  First name:
  <span class="editable"
        data-url="/internal/person/firstname"
        data-activator="#edit-activator"
        data-input-class="short"
      >John</span>

  <span id="edit-activator" class="button">Edit</span>

Full form with settings.

As well as configuring by using data attributes on the html elements, you can also configure during the .jinplace() call in the usual jQuery manner. You can of course use a mixture of both as you see fit.

• The url is set, so it is the same for all fields
• The field to set is determined by the data-attribute
• The 'placeholder' setting is what is shown when the field is blank
• The data-placeholder setting can be given on the html element to override the general one.

There are several more settings and most of them can be used on either the html element or in the call to .jinplace().

  <p>Firstname: <span class="editable2" data-attribute="firstname">Mary</span>

  <p>Lastname:  <span class="editable2" data-attribute="lastname">Jones</span>

  <p>Direction:  <span class="editable2" data-type="select"
                       data-data='[["N","North"],["S","South"],["E","East"],["W","West"]]'
                       data-attribute="direction">West</span>

  <p>Favourites:
  <div class="editable2" data-type="textarea" data-attribute="favourites"
      data-placeholder="[Click to add]">
  </div>

  <script>
    $('.editable2').jinplace({
      url: '/internal/person2',
      placeholder: '[Edit]'
    });
  </script>

Load data from server.

Sometimes you want to edit a different version of the text than the one that is displayed. The canonical example of this is in wiki text where you need to edit the plain text version, but display the html version of the page.

There are two ways of doing this

• By using the data-data attribute
• By using the data-loadurl attribute
• Using the loadurl config setting

  <p>Firstname: <span class="editable3" data-attribute="firstname">Mary</span>

  <p>Lastname:  <span class="editable3" data-attribute="lastname">Jones</span>

  <p>Direction:  <span class="editable3" data-type="select"
                       data-attribute="direction">West</span>

  <p>Favourites:
  <div class="editable3" data-type="textarea" data-attribute="favourites"
      data-placeholder="[Click to add]">
  </div>

  <script>
    $('.editable3').jinplace({
      url: '/internal/person2',
      loadurl: '/internal/person2'
    });
  </script>

Text only true

By default the input field is treated as text. Any html like tags are shown literally and are not treated as markup.

  <div id="text-only-true" class="editable"
    data-type="textarea"
    data-url="/internal/person/favourites"
    data-text-only="true">
    Chocolate & Chips
    &lt;hr>
    More text
  </div>

Text only false

If the text-only attribute is set to false, then html markup in the value is treated as markup.

You are responisable for ensuring that there are no security implications. A typical use is to use the loadurl attribute to load a markdown version of the text to edit and the resulting html is returned to display.

  <div class="editable"
    data-type="textarea" data-url="/internal/person/favourites"
    data-text-only="false">
    Chocolate & Chips
    <hr>
    More text
  </div>