src/main/webapp/note/update.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Note/Update</title>
        <link rel="stylesheet" type="text/css" href="/restful/css/style.css"/>
        <script type="text/javascript" src="/restful/js/restful.js"></script>
        <script type="text/javascript">
            // window.onload
            window.onload = function() {
                var url = location.href;
                var idx = url.substring(url.indexOf("?")+1, url.length);
                
                var endpoint = "/restful/api/note/" + idx;
                
                ajaxCall('GET', endpoint, null, null, function(data) {
                        var status = data.status;
                        if (status == 'OK') {
                            success(data);
                        }
                    }, function(data) {
                        fail(data);
                    }
                );
            };
    
            // Success function
            function success(data) {
                var html = "";
                
                if (data.response != null) {
                    var note = data.response;
                    
                    html += "<table>";
                    html += "<tr>";
                    html += "<td>subject</td>";
                    html += "<td><input type=\"hidden\" name=\"idx\" id=\"idx\" value=\"" + note.idx + "\"><input type=\"text\" name=\"subject\" id=\"subject\" tabindex=\"1\" value=\"" + note.subject + "\"></td>";
                    html += "</tr>";
                    html += "<tr>";
                    html += "<td colspan=\"2\"><textarea name=\"content\" id=\"content\" tabindex=\"1\" rows=\"5\" cols=\"25\">" + note.content + "</textarea></td>";
                    html += "</tr>";
                    html += "</table>";
                }
                
                document.getElementById('note').innerHTML = html;
            }

            // Fail function
            function fail(data) {
                var html = data.response;
                document.getElementById('note').innerHTML = html;
            }
            
            // Update note
            function update() {
                var url = "/restful/api/note";
                
                var idx =  document.getElementById('idx').value;
                var subject =  document.getElementById('subject').value;
                var content =  document.getElementById('content').value;
                
                if (!subject) {
                    alert('Please input subject');
                    return;
                }
                if (!content) {
                    alert('Please input content');
                    return;
                }
                
                var params = {
                    'idx': idx,
                    'subject': subject,
                    'content': content
                };
                
                ajaxCall('PUT', url, null, params, function(data) {
                        var status = data.status;
                        if (status == 'OK') {
                            location.reload(true);
                        }
                    },
                    function(data) {
                        alert(data.response);
                    }
                );
            }
            
            // Delete note
            function deletion() {
                var url = "/restful/api/note";
                
                var idx =  document.getElementById('idx').value;
                
                if (!idx) {
                    return;
                }
                
                var params = {
                    'idx': idx
                };
                
                ajaxCall('DELETE', url, null, params, function(data) {
                        var status = data.status;
                        if (status == 'OK') {
                            location.replace("list.html");
                        }
                    },
                    function(data) {
                        alert(data.response);
                    }
                );
            }
        </script>
    </head>
    <body>
        <p>Update</p>
        <table style="width: 200px;">
            <tr>
                <td colspan="2"><div id="note"></div></td>
            </tr>
            <tr>
                <td align="left"><input type="button" value="Update" onclick="update();"></td>
                <td align="right"><input type="button" value="Delete" onclick="deletion();"></td>
            </tr>
        </table>
    </body>
</html>