7/20/13

Demo for jinplace

Demo of the jinplace jquery plugin

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 Wild geese that fly with the person John Smith moon on their wingsh person2 Mary Jones

Direction E W

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 1 2 3 4 5 6 7 8 9 F i r s t n a m e< s p a n c l a s s = " e d i t a b l e " d a t a u r l = " / i n t e r n a l / p e r s o n / f i r s t n a m e " > J o h n < / s p a n >

< ! -T h i sw i l ls e tu pa l le d i tf i e l d st h a th a v ec l a s s' e d i t a b l e 'o nt h ep a g < ! -S oi tw i l lo n l yb es h o w ni nt h i se x a m p l e> < s c r i p t > $ ( ' . e d i t a b l e ' ) . j i n p l a c e ( ) ; < / s c r i p t >

Try it out
Click on the name to edit Firstname John

https://bytebucket.org/itinken/jinplace/wiki/demo.html

1/7

7/20/13

Demo for jinplace

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 t e x t a r e a Everything else is the same as for regular inputs 1 2 3 4 < d i vc l a s s = " e d i t a b l e " d a t a t y p e = " t e x t a r e a "d a t a u r l = " / i n t e r n a l / p e r s o n / f a v o u r i t e s " > W i l dg e e s et h a tf l yw i t ht h em o o no nt h e i rw i n g s < / d i v >

Try it out
Click textarea, modify and click outside it. Wild geese that fly with the moon on their wingsh

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. 1 2 3

D i r e c t i o n : < s p a nc l a s s = " e d i t a b l e "d a t a t y p e = " s e l e c t "d a t a u r l = " / i n t e r n a l / p e r s o n / d i r e c t d a t a d a t a = ' [ [ " E " ," E a s t " ] ,[ " W " ," W e s t " ] ] ' > E a s t < / s p a n >

Try it out
Click to enable the select box. Direction: East
https://bytebucket.org/itinken/jinplace/wiki/demo.html 2/7

7/20/13

Demo for jinplace

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 1 2 3 4 L a s tn a m e< s p a nc l a s s = " e d i t a b l e " d a t a u r l = " / i n t e r n a l / p e r s o n / l a s t n a m e " d a t a i n p u t c l a s s = " s h o r t " d a t a o k b u t t o n = " G o " > S m i t h < / s p a n >

Try it out
Editing field and click the "Go" button. Last name Smith

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. 1 2 3 4 5 S o m eo ft h e i rf a v o u r i t et h i n g s < d i vc l a s s = " e d i t a b l e " d a t a u r l = " / i n t e r n a l / p e r s o n / f a v o u r i t e s " d a t a t y p e = " t e x t a r e a " d a t a o k b u t t o n = " O K "
3/7

https://bytebucket.org/itinken/jinplace/wiki/demo.html

7/20/13

Demo for jinplace

6 7 8

d a t a c a n c e l b u t t o n = " C a n c e l " > W i l dg e e s et h a tf l yw i t ht h em o o no nt h e i rw i n g s < / d i v >

Try it out
Click OK to accept changes, Cancel to throw them away. Some of their favourite things Wild geese that fly with the moon on their wings OK Cancel

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 1 2 3 4 5 6 7 8 F i r s tn a m e : < s p a nc l a s s = " e d i t a b l e " d a t a u r l = " / i n t e r n a l / p e r s o n / f i r s t n a m e " d a t a a c t i v a t o r = " # e d i t a c t i v a t o r " d a t a i n p u t c l a s s = " s h o r t " > J o h n < / s p a n > < s p a ni d = " e d i t a c t i v a t o r "c l a s s = " b u t t o n " > E d i t < / s p a n >

Try it out
Click on the "edit" button to start. Clicking on the field does not activate the edit controls. First name: John
Edit

https://bytebucket.org/itinken/jinplace/wiki/demo.html

4/7

7/20/13

Demo for jinplace

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 nil setting is what is shown when the field is blank The data-nil 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(). 1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 < p > F i r s t n a m e :< s p a nc l a s s = " e d i t a b l e 2 "d a t a a t t r i b u t e = " f i r s t n a m e " > M a r y < / < p > L a s t n a m e : < s p a nc l a s s = " e d i t a b l e 2 "d a t a a t t r i b u t e = " l a s t n a m e " > J o n e s < /

< p > D i r e c t i o n : < s p a nc l a s s = " e d i t a b l e 2 "d a t a t y p e = " s e l e c t " d a t a d a t a = ' [ [ " N " , " N o r t h " ] , [ " S " , " S o u t h " ] , [ " E " , " E a s t " ] , d a t a a t t r i b u t e = " d i r e c t i o n " > W e s t < / s p a n > < p > F a v o u r i t e s : < d i vc l a s s = " e d i t a b l e 2 "d a t a t y p e = " t e x t a r e a "d a t a a t t r i b u t e = " f a v o u r i t e s " d a t a n i l = " [ C l i c kt oa d d ] " > < / d i v > < s c r i p t > $ ( ' . e d i t a b l e 2 ' ) . j i n p l a c e ( { u r l :' / i n t e r n a l / p e r s o n 2 ' , n i l :' [ E d i t ] ' } ) ; < / s c r i p t >

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

Firstname: Mary Lastname: Jones Direction: West Favourites:

https://bytebucket.org/itinken/jinplace/wiki/demo.html 5/7

7/20/13

Demo for jinplace

[Click to add]

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 1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 < p > F i r s t n a m e :< s p a nc l a s s = " e d i t a b l e 3 "d a t a a t t r i b u t e = " f i r s t n a m e " > M a r y < / < p > L a s t n a m e : < s p a nc l a s s = " e d i t a b l e 3 "d a t a a t t r i b u t e = " l a s t n a m e " > J o n e s < / < p > D i r e c t i o n : < s p a nc l a s s = " e d i t a b l e 3 "d a t a t y p e = " s e l e c t " d a t a a t t r i b u t e = " d i r e c t i o n " > W e s t < / s p a n > < p > F a v o u r i t e s : < d i vc l a s s = " e d i t a b l e 3 "d a t a t y p e = " t e x t a r e a "d a t a a t t r i b u t e = " f a v o u r i t e s " d a t a n i l = " [ C l i c kt oa d d ] " > < / d i v > < s c r i p t > $ ( ' . e d i t a b l e 3 ' ) . j i n p l a c e ( { u r l :' / i n t e r n a l / p e r s o n 2 ' , l o a d u r l :' / i n t e r n a l / p e r s o n 2 ' } ) ; < / s c r i p t >

Try it out
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.

Firstname: Mary Lastname: Jones

https://bytebucket.org/itinken/jinplace/wiki/demo.html 6/7

7/20/13

Demo for jinplace

Direction: West Favourites: [Click to add]

See also

Documentation

and

Downloads

https://bytebucket.org/itinken/jinplace/wiki/demo.html

7/7