<html>
<head>
    <title>Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" 
            src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
    </script>

    <script>
        //add li elem with each user in $user-list
        function renderUsers(users) {
            $('#user-list').empty();
            for(user in users) { $('#user-list').append( $('<li/>', { html: users[user] }) ); }
        }
        function getUsers() { $.get("/users", renderUsers); }
        function addUser() { 
            var jxhr = $.post("/add-user", { user: $('#name').val() }, renderUsers)
                        .fail(handleError); 
            getUsers();
        }
        function handleError(xhr) {
            $('#error').text(xhr.statusText + ": " + xhr.responseText);
        }

        //init
        $(function() { getUsers(); });
    </script>
</head>
<body>
    <h1>Welcome</h1>
    <p id="error"></p>
    <ul id="user-list"></ul>
    <input type="text" id="name" placeholder="user name"/>
    <button onclick="addUser()">Add User</button>
</body>
</html>

<html>
<head>
    <title>Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" 
            src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
    </script>

    <script>
        //add li elem with each user in $user-list
        function renderUsers(users) {
            console.log("rendering users" + users);
            $('#user-list').empty();
            for(user in users) { 
                $('#user-list').append( $('<li/>', { html: users[user] }) ); 
            }
        }

        function getUsers() { $.get("/users", renderUsers); }

        function handleError(xhr, status, errorThrown) {
            $('#error').text(xhr.statusText + ": " + xhr.responseText);
            console.log("some error(xhr):" + xhr + "| status:" + status + "| errorThrown: " + errorThrown);
        }

        function addUser() { 
            var jxhr = $.post("/add-user", { user: $('#name').val() }, getUsers).fail(handleError); 
        }

        //init
        $(function() { getUsers(); });
    </script>
</head>
<body>
    <h1>Welcome</h1>
    <p id="error"></p>
    <ul id="user-list"></ul>
    <input type="text" id="name" placeholder="user name"/>
    <button onclick="addUser()">Add User</button>
</body>
</html>

Fix first POST-GET negotiations. On sucess call 'getUsers' instead 'renderUsers'.
Fix first POST-GET negotiations. On sucess call 'getUsers' instead 'renderUsers'.
