-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
148 lines (140 loc) · 4.9 KB
/
index.php
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>jQuery AJAX editable plugin DEMO</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.ajaxeditable.js"></script>
<script src="js/jquery.ajaxeditable.validators.js"></script>
<style type="text/css">
.editOk {background:url('images/ajax-ok.png') center right no-repeat;}
.editError {background:url('images/ajax-error.png') center right no-repeat;}
.editable-saving {background:url('images/spinner.gif') center right no-repeat;}
.editable-invalid {background:#c00;color:#fff;}
.level-editable input {width:40px;display:block;}
.amount-editable input {width:60px;display:block;}
.rank-editable select {width:80px;display:block;}
.not-updated {background:#000;color:#fff;}
#log {width:30em;height:10em;overflow:auto;margin-top:1em;}
</style>
</head>
<body>
<h1>jQuery AJAX editable demo</h1>
<p>Change values in input fields. Level can be 1-9, Amount has to be 0 or greater. You can use up/down arrows or TAB to navigate. Enter to confirm, ESC for cancel current change.</p>
<p>When update is successful on server side (random results for demo), you see message added in log.</p>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Level</th>
<th>Amount</th>
<th>Rank</th>
</tr>
<tr data-id="100">
<td>Foo sr.</td>
<td><div class="level-editable">3</div></td>
<td><div class="amount-editable">40</div></td>
<td><div class="rank-editable">noob</div></td>
</tr>
<tr data-id="101">
<td>Kate</td>
<td><div class="level-editable">6</div></td>
<td><div class="amount-editable">23</div></td>
<td><div class="rank-editable">pro</div></td>
</tr>
<tr data-id="102">
<td>Mike</td>
<td><div class="level-editable">1</div></td>
<td><div class="amount-editable">85</div></td>
<td><div class="rank-editable">noob</div></td>
</tr>
<tr data-id="103">
<td>Foo jr.</td>
<td><div class="level-editable">4</div></td>
<td><div class="amount-editable">107</div></td>
<td><div class="rank-editable">good</div></td>
</tr>
<tr data-id="104">
<td>Bar</td>
<td><div class="level-editable">9</div></td>
<td><div class="amount-editable">61</div></td>
<td><div class="rank-editable">awhsom</div></td>
</tr>
</tbody>
</table>
<p>Log:</p>
<div id="log"></div>
<script type="text/javascript">
$(function() {
// helpers for demo
$log = $('#log');
var log = function(msg) {
$log.append($('<div>' + msg + '</div>'));
};
// function for getting all necessary parameters for ajax call handler
var editDataPrepare = function(property, $element, value) {
$element.animate({ width: '-=20' }, 200);
return {
source: property,
id: $element.closest('tr').attr('data-id'),
data: value
};
};
// when ajax response is returned, do something useful...
var editCallback = function($element, reply) {
var success = (reply.status === 'ok'),
$parent = $element.parent(),
className = success ? 'editOk' : 'editError';
$parent.addClass(className);
$element.animate({ width: '+=20' }, { duration: 700, complete: function() { $parent.removeClass(className); } });
if (success) {
log('Property ' + reply.input.source + ' updated to ' + reply.input.data + ' for id=' + reply.input.id);
}
};
$('.level-editable').ajaxEditable({
validator: ajaxEditableValidators.prepare('number', { minValue: 1, maxValue: 9 }),
classNameEditableSet: 'level-editable',
ajaxPrepare: function($element, value) {
return editDataPrepare('level', $element, value);
},
ajaxCallback: editCallback
});
$('.amount-editable').ajaxEditable({
validator: ajaxEditableValidators.prepare('number', { minValue: 0 }),
classNameEditableSet: 'amount-editable',
ajaxPrepare: function($element, value) {
return editDataPrepare('amount', $element, value);
},
ajaxCallback: editCallback
});
$('.rank-editable').ajaxEditable({
inputType: 'select',
inputData: {
noob: 'Noobie',
good: 'Good',
pro: 'Pro ^_^',
awhsom: 'Awhsom!'
},
arrowKeysNavigation: false,
classNameEditableSet: 'rank-editable',
ajaxPrepare: function($element, value) {
$element.removeClass('editable-invalid');
return editDataPrepare('rank', $element, value);
},
ajaxCallback: function($element, reply) {
var success = (reply.status === 'ok'),
$parent = $element.parent(),
className = success ? 'editOk' : 'editError';
$parent.addClass(className);
$element.animate({ width: 80 }, { duration: 700, complete: function() { $parent.removeClass(className); } });
if (success) {
log('Property ' + reply.input.source + ' updated to ' + reply.input.data + ' for id=' + reply.input.id);
} else {
$element.addClass('editable-invalid');
}
}
});
});
</script>
</body>
</html>