Demo of the jinplace jquery plugin v1.2.1

ERROR: Something has gone wrong and at least one of the required javascript libraries has not loaded. Please check this before going further.

In this demo there is no actual communication with a remote server. Instead all load and save operations take place on a mini database within the page itself. As you work through the examples and make changes they will appear in the table below.

See also Documentation and Downloads

The database. See your changes here.
Object First name Last name Favourites Direction
person
person2
 

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>

Click on the name to edit

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>

Click textarea, modify and click outside it.

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>

Click to enable the select box.

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>

Editing field and click the "Go" button.

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>

Click OK to accept changes, Cancel to throw them away.

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>

Click on the "edit" button to start. Clicking on the field does not activate the edit controls.

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>

All the fields can be edited and viewed in the person2 row at the top of this page.

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>

When you click to edit, the edit text will be fetched from the server. So the current (probably stale in this demo) text is disregarded. You can view the results of your edits in the person2 row at the top of this page.

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>

Any html you enter here will appear literally when the edit is finished.

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>

Any html you enter here will be used to format the text when the edit is finished.

See also Documentation and Downloads