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

To get a textarea. then you need to set the type to textarea.org/itinken/jinplace/wiki/demo. The data is a JSON string. Set type to 'select' The data must be given. In this case you must supply the list of possible choices in the data-data attribute.7/20/13 Demo for jinplace Using a textarea By default you get a normal text input." E a s t " ] ." W e s t " ] ] ' > E a s t < / s p a n > Try it out Click to enable the select box. modify and click outside it. 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. 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 " . Direction: East https://bytebucket. The JSON would normally be generated when the page is built.html 2/7 .[ " W " . 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.

Clicking outside the field.7/20/13 Demo for jinplace With ok button You can add an OK button which must be clicked to accept the change.html . Adds a cancel button that is clicked to abandon the edit. This is particularly useful for large text areas where it is easy to lose a lot of work it you accidentally lose focus. Adds an OK button that is clicked to submit the data. Last name Smith With OK and cancel button You can also add a cancel button. 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. again with the text that you specify. 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. Adds an OK button that is clicked to submit the data. The text on the buttons are set to your values. Clicking outside the field does nothing. The text on the button is set to your value.

Pass the css selector of the edit element in activator. rather that just clicking on the text.html 4/7 .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. Clicking on the field does not activate the edit controls. Any element can be used. 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. 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.org/itinken/jinplace/wiki/demo. First name: John Edit https://bytebucket.

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 ' .html 5/7 . You can of course use a mixture of both as you see fit. < / 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.jinplace(). [ " E " . " N o r t h " ] . Firstname: Mary Lastname: Jones Direction: West Favourites: https://bytebucket.org/itinken/jinplace/wiki/demo.jinplace() call in the usual jQuery manner. you can also configure during the . n i l :' [ E d i t ] ' } ) . " E a s t " ] . As well as configuring by using data attributes on the html elements. 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 " . " S o u t h " ] . There are several more settings and most of them can be used on either the html element or in the call to . e d i t a b l e 2 ' ) . [ " S " . 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 > $ ( ' .7/20/13 Demo for jinplace Full form with settings. 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.

Firstname: Mary Lastname: Jones https://bytebucket.org/itinken/jinplace/wiki/demo. e d i t a b l e 3 ' ) . Sometimes you want to edit a different version of the text than the one that is displayed. So the current (probably stale in this demo) text is disregarded. but display the html version of the page. l o a d u r l :' / i n t e r n a l / p e r s o n 2 ' } ) .7/20/13 Demo for jinplace [Click to add] Load data from server. You can view the results of your edits in the person2 row at the top of this page. 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 ' .html 6/7 . the edit text will be fetched from the server. 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 > $ ( ' . < / s c r i p t > Try it out When you click to edit. The canonical example of this is in wiki text where you need to edit the plain text version.

org/itinken/jinplace/wiki/demo.html 7/7 .7/20/13 Demo for jinplace Direction: West Favourites: [Click to add] See also Documentation and Downloads https://bytebucket.