Memo's automatisch toevoegen (AJAX)

Toelichting

Een AJAX memo systeem waarbij memo's automatisch opgeslagen worden. Maak een nieuwe memo aan door simpelweg tekst in het tekstveld te typen en vervolgens buiten het veld te klikken met je muis of op TAB te drukken. Kies je memo uit de lijst met laatste memos om hem te wijzigen.

Gebruiksaanwijzing
  • Memo aanmaken: tekst typen in leeg tekstveld, wegklikken of TAB drukken.
  • Memo wijzigen: memo selecteren, tekst wijzigen, wegklikken of TAB drukken.
  • Memo verwijderen: op kruisje achter memo klikken.

Voorbeeld

Klik hier voor een voorbeeld

Script

Code
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
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<?php
ini_set
('display_errors''On');
error_reporting(E_ALL);
require 
'../inc/stats.php';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jorendewit.nl - PHP Snippets - Automatisch memo's opslaan</title>
    
    <link rel="stylesheet" href="../../styles/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../../styles/ubb.css" type="text/css" media="screen" />
    
    <style type="text/css">
    h3.alert {
        color: red;
    }
    img.editdel {
        vertical-align: middle;
        cursor: pointer;
    }
    li.memo {
        color: #000;
        cursor: pointer;
    }
    #new {
        display: none;
    }
    </style>
    
    <script type="text/javascript" src="../../inc/mootools.js"></script>
    <script type="text/javascript">
    <!--    
        /**
         * Setup page for insertion of new memo
         */
        function newMemo()
        {
            // Set form parameters
            $('content_label').innerHTML = 'Nieuwe memo aanmaken';
            $('content').value = '';
            $('memoID').value = '';
            $('new').style.display = 'none';
            
            // Add onBlur event to textarea
            $('content').removeEvents().addEvent('blur', function()
            {
                if($('content').value != '')
                {
                    store();
                }
            });
        }
        
        /**
         * Get latest memo's from database. Update memo's list on succes.
         */
        function getLatest()
        {
            var url = 'memo/script.php?mode=getLatest';
            
            // Perform JSON remote request to retrieve latest memos
            new Json.Remote(url,
            {
                onComplete: function(jsonObj)
                {
                    if(!jsonObj.empty)
                    {
                        generateList(jsonObj.memos);
                    }
                    else
                    {
                        generateList(false);
                    }
                }
            }).send();
        }
        
        /**
         * Get one single memo from database, specfied by ID. Update the textarea on succes.
         * 
         * @param     id    integer    The id of the memo to be retrieved
         */
        function getMemoById(id)
        {
            var url = 'memo/script.php?mode=getMemoById&id=' + id;
            
            // Perform JSON remote request to retrieve the specified memo
            new Json.Remote(url,
            {
                onComplete: function(jsonObj)
                {
                    if(!jsonObj.empty)
                    {
                        updateTextarea(jsonObj);
                    }
                    else
                    {
                        alert('De memo met het opgegeven ID bestaat helaas niet (meer)...');
                        updatePage();
                    }                
                }
            }).send();
        }
        
        /**
         * Store memo in database (INSERT or UPDATE)
         */
        function store()
        {
            // Perform AJAX request to store the memo
            $('memo').send(
            {
                onComplete: function (responseText)
                {
                    updatePage();
                }
            });
        }
        
        /**
         * Delete memo from memo's list
         * 
         * @param    memoID    integer    The id of the memo to be deleted
         */
        function delMemo(memoID)
        {
            var confirmText = 'Weet je zeker dat je deze memo wilt verwijderen?';
            
            // Confirm if memo has to be deleted
            if(confirm(confirmText))
            {    
                var url = 'memo/script.php?mode=delete&id=' + memoID;
                
                // Perform AJAX request to delete memo
                new Ajax(url,
                {
                    method: 'GET',
                    onComplete: function()
                    {
                        updatePage();
                    }
                }).request();
            }
        }        
        
        /**
         * Update textarea/form with data of provided memo object
         * 
         * @param    memo    JSON    The JSON object representing the memo to be displayed in the textarea
         */
        function updateTextarea(memo)
        {
            // Set form parameters
            $('content_label').innerHTML = 'Memo wijzigen';
            $('content').value = memo.content;
            $('memoID').value = memo.id;
            $('new').style.display = 'block';
            
            // Add onBlur event to textarea
            $('content').removeEvents().addEvent('blur', function()
            {
                if($('content').value != memo.content && $('content').value != '')
                {
                    store();
                }
                else
                {
                    updatePage();
                }
            });
        }
        
        /**
         * Generate list of latest stored memo's
         * 
         * @param    memos    JSON    The JSON object representing the latest memo's
         */
        function generateList(memos)
        {
            // Create header element
            var h2 = new Element('h2');
            h2.innerHTML = 'Laatste memos';
            
            // Empty the latest_memos div and re-append the header
            $('latest_memos').empty();
            $('latest_memos').appendChild(h2);
            
            // If memos list is empty
            if(memos == false)
            {
                // Create new p element for displaying message
                var p = new Element('p');
                p.innerHTML = 'Er zijn geen memos om weer te geven';
                
                // Append element to memos div
                $('latest_memos').appendChild(p);
            }
            else
            {
                // Create list element
                var ul = new Element('ul');
                
                // Loop through all the memos in the JSON object
                memos.each(function(memo)
                {
                    // Truncate content if larger than 50 characters
                    if(memo.content.length > 50)
                    {
                        content = memo.content.substr(0, 50) + '...';
                    }
                    else
                    {
                        content = memo.content;
                    }
                    
                    // Create new list element for the memo
                    var li = new Element('li', {'class' : 'memo'});
                    li.href = '';
                    li.innerHTML = memo.date + ' - ' + content;
                    li.title = memo.content;
                    li.addEvent('click', function(e)
                    {
                        e = new Event(e).stop();
                        getMemoById(memo.id);
                    });
                    
                    // Create edit button and add onClick event
                    var edit = new Element('img', {'class' : 'editdel'});
                    edit.src = 'memo/edit.gif';
                    edit.alt = 'Edit';
                    edit.addEvent('click', function(e)
                    {
                        e = new Event(e).stop();
                        getMemoById(memo.id);
                    });
                    
                    // Create delete button and add onClick event
                    var del = new Element('img', {'class' : 'editdel'});
                    del.src = 'memo/delete.gif';
                    del.alt = 'Delete';
                    del.addEvent('click', function(e)
                    {
                        e = new Event(e).stop();
                        delMemo(memo.id);
                    });           
                    
                    // Append edit and delete buttons to li element
                    li.appendChild(edit);
                    li.appendChild(del);
                    
                    // Append li element to ul element
                    ul.appendChild(li);
                });
                
                // Append memos list
                $('latest_memos').appendChild(ul);
            }
        }
           
           /**
            * Update the entire page, eg. call newMemo() and getLatest().
            */    
        function updatePage()
        {
            newMemo();
            getLatest();
        }
        
        /**
         * Update the page on first load
         */
        window.addEvent('domready', function()
        {
            updatePage();
            
            $('new').addEvent('click', function(e)
            {
                e = new Event(e).stop();
                updatePage();
            });
        });
    //-->
    </script>
</head>
<body>
    <div id="wrap">
        <p class="none small align-right"><a href="/view/44/">&lt;-- Terug naar Scripts</a></p>
        <h1>Automatisch memo's opslaan</h1>
        <div id="info">
            <p>PHP versie: &gt;= 5.1</p>
            <p>Javascript: <a href="http://www.mootools.net" target="_blank">MooTools Framework</a></p>
        </div>
        
        <p>Een AJAX memo systeem waarbij memo's automatisch opgeslagen worden. Maak een nieuwe memo aan door simpelweg tekst in het tekstveld te typen
        en vervolgens buiten het veld te klikken met je muis of op TAB te drukken. Kies je memo uit de lijst met laatste memos om hem te wijzigen.</p>
        
        <p>De broncode van de benodigde bronbestanden kun je hier vinden: <br />
            - <a href="/view/44/">memo.php</a><br />
            - <a href="memo/script.phps" target="_blank">memo/script.php</a><br />
            - <a href="memo/db.phps" target="_blank">memo/db.php</a><br />
        </p>
        
        <h3>Gebruiksaanwijzing</h3>
        <ul>
            <li>Memo aanmaken: tekst typen in leeg tekstveld, wegklikken of TAB drukken.</li>
            <li>Memo wijzigen: memo selecteren, tekst wijzigen, wegklikken of TAB drukken.</li>
            <li>Memo verwijderen: op kruisje achter memo klikken.</li>
        </ul>
        
        <noscript><h3 class="alert">Let op! Javascript moet ingeschakeld zijn om deze applicatie correct te laten werken!</h3></noscript>
        
        <form name="memo" id="memo" method="post" action="memo/script.php?mode=store">
        <input type="hidden" name="memoID" id="memoID" value="" />
        <p>
            <label id="content_label" for="content" class="field"></label>
            <textarea name="content" id="content" class="none" cols="50" rows="5"></textarea>
        </p>
        <p><a href="#" id="new">Nieuwe memo maken</a></p>        
        </form>
        
        <div id="latest_memos"></div>
    </div>    
</body>
</html>

Reacties