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.
The database. See your changes here.
Object |
First name |
Last name |
Favourites |
Direction |
person |
|
|
|
|
person2 |
|
|
|
|
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">
Wild geese that fly with the moon on their wings
</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">
Wild geese that fly with the moon on their wings
</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.
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-nil="[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.