-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathdemo.html
More file actions
275 lines (231 loc) · 10.8 KB
/
Copy pathdemo.html
File metadata and controls
275 lines (231 loc) · 10.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jQuery Inplace Edit Demo</title>
<link rel="stylesheet" type="text/css" href="assets/doomEdit.css" />
<script type="text/javascript" src="assets/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="assets/jquery.doomEdit.js"></script>
</head>
<body>
<h1>jQuery Inplace Edit Demo</h1>
<h2>How To</h2>
<ol>
<li>Include the doomEdit.css style (optional)</li>
<li>Include the jquery.doomEdit.min.js file</li>
<li>Activate the plug-in: $('.dedit').doomEdit();</li>
</ol>
<h2>Options</h2>
<dl>
<dt><b>editForm.method</b>: "post"</dt>
<dd>
GET or POST request method for remotely sent data.
</dd>
<dt><b>editForm.action</b>: "/"</dt>
<dd>
The remote URL where the data will be sent.
</dd>
<dt><b>editForm.id</b>: "doomEditForm"</dt>
<dd>
The id of the form.
</dd>
<dt><b>ajaxSubmit</b>: true</dt>
<dd>
Specifyes if the data should be sent remotely.
</dd>
<dt><b>editField</b>: "<input name="{editFieldName}" type="text" />"</dt>
<dd>
The hidden edit field that will appear when edit starts. You can specify your own textarea or input field.
</dd>
<dt><b>editFieldName</b>: "doomEditElement"</dt>
<dd>
The field name that will be sent along with the request. First it tries to get it automaticaly from the "data-field-name" attribute of the element then from the config option.
</dd>
<dt><b>submitBtn</b>: "<button type="submit" class="save-btn">Save</button>"</dt>
<dd>
The submit button element that will be clicked to save the data.
</dd>
<dt><b>cancelBtn</b>: "<button type="button" class="cancel-btn">Cancel</button>"</dt>
<dd>
The cancel button element that will be clicked to cancel the data.
</dd>
<dt><b>autoDisableBt</b>: true</dt>
<dd>
The submit button is auto-disabled by default if the content of the edited field is the same as the old one so the user can't submit the form if he didn't change anything.
Change this to false so the user can always submit the form.
</dd>
<dt><b>extraHtml</b>: ''</dt>
<dd>
Add extra HTML element to the form (i.e hidden inputs).
</dd>
<dt><b>htmlFilter</b>: false</dt>
<dd>
A filter callback that will be fired when the original HTML shows up for editing.
</dd>
<dt><b>placeholder</b>: true</dt>
<dd>
Give a 'data-placeholder="some placeholder"' attribute to your editable element to display a placeholder when your element has no text.
</dd>
<dt><b>showOnEvent</b>: "click"</dt>
<dd>
Show the edit form on this event. If set to false - don't bind it to any event.
</dd>
<dt><b>autoTrigger</b>: false</dt>
<dd>
If set to true - shows the edit form immediately. Usually you set the showOnEvent to false and autoTrigger to true to trigger the event immediately without binding it.
</dd>
<dt><b>submitOnBlur</b>: false</dt>
<dd>
If set to true - submits the new data when the edit element looses it's focus.
</dd>
<dt><b>beforeFormSubmit</b>: function (data, form, el) {$('button', form).attr('disabled', 'disabled').fadeTo(0, 0.2);}</dt>
<dd>
A callback function that will be triggered before the data is saved.
</dd>
<dt><b>afterFormSubmit</b>: function (data, form, el) {$('button', form).removeAttr('disabled').fadeTo(0, 1);}</dt>
<dd>
A callback function that will be triggered after the data is saved.
</dd>
<dt><b>onFormError</b>: function (xhr) {console.log(xhr.responseText);}</dt>
<dd>
A callback function that will be triggered on save form error.
</dd>
<dt><b>onCancel</b>: null</dt>
<dd>
A callback function that will be triggered when the cancel button is pressed.
</dd>
<dt><b>onStartEdit</b>: null</dt>
<dd>
A callback function that will be triggered when the edit field is activated.
</dd>
</dl>
<h2>Implementation</h2>
<h3>Very simple example</h3>
<pre>
<script type="text/javascript">
$(document).ready(function () {
$('.dedit-simple').doomEdit({ajaxSubmit:false, afterFormSubmit: function (data, form, el) {el.text(data);}});
});
</script>
</pre>
<h4>Result:</h4>
<p>Please <span class="dedit-simple">click me</span> to edit!</p>
<h3>Simple example with textarea</h3>
<pre>
<script type="text/javascript">
$(document).ready(function () {
$('.dedit-simple').doomEdit({ajaxSubmit:false, editField: '<textarea name="myEditTextarea" rows="10" cols="70"></textarea>', afterFormSubmit: function (data, form, el) {el.text(data);}});
});
</script>
</pre>
<h4>Result:</h4>
<p>Try to edit the text above:</p>
<p class="dedit-textarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus egestas. Sed id massa velit, interdum consequat est. Cras malesuada nisi eu ligula mollis posuere quis eget risus. Ut sed lacus ante. Cras et arcu id quam pellentesque interdum. Etiam nec lectus sed velit volutpat feugiat. Sed mattis, enim vel dictum porta, purus arcu cursus lorem, non euismod elit ipsum nec leo.</p>
<h3>Simple example with select box</h3>
<pre>
<script type="text/javascript">
$(document).ready(function () {
$('.dedit-simple').doomEdit({ajaxSubmit:false, editField: '<select name="myEditSelect"><option value="male">male</option><option value="female">female</option></select>', afterFormSubmit: function (data, form, el) {el.text(data);}});
});
</script>
</pre>
<h4>Result:</h4>
<p>Try to edit the text above:</p>
<p>I am a <span class="dedit-select">male</span>.</p>
<h3>Simple example with a placeholder</h3>
<p>Give a 'data-placeholder="some placeholder"' attribute to your editable element to display a placeholder when your element has no text.</p>
<pre>
<script type="text/javascript">
$(document).ready(function () {
$('.dedit-simple').doomEdit({placeholder: true, ajaxSubmit:false, afterFormSubmit: function (data, form, el) {el.text(data);}});
});
</script>
</pre>
<h4>Result:</h4>
<p>Please <span class="dedit-simple" data-placeholder="click my placeholder"></span> to edit!</p>
<h3>Simple example with saving data on side click</h3>
<p>Set 'submitOnBlur: true' option to true if you want to save the new data on outside click (when the edit element looses it's focus).</p>
<pre>
<script type="text/javascript">
$(document).ready(function () {
$('.dedit-simple').doomEdit({submitOnBlur: true, ajaxSubmit:false, submitBtn: false, cancelBtn: false, afterFormSubmit: function (data, form, el) {el.text(data);}});
});
</script>
</pre>
<h4>Result:</h4>
<p>Please <span class="dedit-simple-blur">edit me</span> and click outside to save the new data!</p>
<h3>Remote submit with ajax example</h3>
<pre>
<script type="text/javascript">
$(document).ready(function () {
$('.dedit-remote').doomEdit({editForm:{method:'post', action:'remote.html', id:'myeditformid'}, afterFormSubmit: function (data, form, el) {el.text($('input', form).val());alert(data);}});
});
</script>
</pre>
<h4>Result:</h4>
<p>Please <span class="dedit-remote">click me</span> to edit and save the content remotely!</p>
<h3>Remote submit with ajax example and JSON response</h3>
<pre>
<script type="text/javascript">
$(document).ready(function () {
$('.dedit-remote-json').doomEdit({editForm:{method:'post', action:'remote_json.html', id:'myeditformid'}, afterFormSubmit: function (data, form, el) {data = $.parseJSON(data);el.text(data.message);alert(data.message);}});
});
</script>
</pre>
<h4>Result:</h4>
<p>Please <span class="dedit-remote-json">click me</span> to edit and save the content remotely! A JSON response will be parsed.</p>
<h3>Multiple cells table edit example</h3>
<pre>
<script type="text/javascript">
$(document).ready(function () {
//Edit multiple cells inline
$('.edit-cell-inline').doomEdit({ajaxSubmit:false, afterFormSubmit: function (data, form, el) {el.text(data);}});
});
</script>
</pre>
<h4>Result:</h4>
<table>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td><span class="edit-cell-inline">1111</span></td>
<td><span class="edit-cell-inline">2222</span></td>
</tr>
<tr>
<td><span class="edit-cell-inline">3333</span></td>
<td><span class="edit-cell-inline">4444</span></td>
</tr>
<tr>
<td><span class="edit-cell-inline">5555</span></td>
<td><span class="edit-cell-inline">6666</span></td>
</tr>
<tr>
<td><span class="edit-cell-inline">7777</span></td>
<td><span class="edit-cell-inline">8888</span></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
/**
* Set up th edit in place items
*/
//Simple inline edit
$('.dedit-simple').doomEdit({ajaxSubmit:false, placeholder: true, afterFormSubmit: function (data, form, el) {el.text(data);}});
//Simple inline edit with save on outside click
$('.dedit-simple-blur').doomEdit({ajaxSubmit:false, submitOnBlur: true, submitBtn: false, cancelBtn: false, afterFormSubmit: function (data, form, el) {el.text(data);}});
//Inline edit with textarea
$('.dedit-textarea').doomEdit({ajaxSubmit:false, editField: '<textarea name="myEditTextarea" rows="10" cols="70"></textarea>', afterFormSubmit: function (data, form, el) {el.text(data);}});
//Inline edit with select
$('.dedit-select').doomEdit({ajaxSubmit:false, editField: '<select name="myEditSelect"><option value="male">male</option><option value="female">female</option></select>', afterFormSubmit: function (data, form, el) {el.text(data);}});
//Inline edit and remote save with ajax
$('.dedit-remote').doomEdit({editForm:{method:'post', action:'remote.html', id:'myeditformid'}, afterFormSubmit: function (data, form, el) {el.text($('input', form).val());alert(data);}});
//Inline edit and remote save with ajax with JSON response
$('.dedit-remote-json').doomEdit({editForm:{method:'post', action:'remote_json.html', id:'myeditformid'}, afterFormSubmit: function (data, form, el) {data = $.parseJSON(data);el.text(data.message);alert(data.message);}});
//Edit multiple cells inline
$('.edit-cell-inline').doomEdit({ajaxSubmit:false, afterFormSubmit: function (data, form, el) {el.text(data);}});
});
</script>
</body>
</html>