<html>
<head>
    <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/sijax/sijax.js"></script>
    <script type="text/javascript">
        {{ sijax_js }}
    </script>
</head>

<body>
    <div id="messages" style="border: 1px solid #e0e0e0; margin-bottom: 20px; height: 100px; padding: 5px; overflow-y: scroll;"></div>
        
    <form id="messageForm" name="messageForm">
        Message: <input type="text" id="message" style="width: 400px" />
    
        <input type="submit" value="Send" />
        <button id="btnClear">Clear messages</button>
    </form>
    
    <script type="text/javascript">
    $(function() {          
        $('#messageForm').bind('submit', function() {
            Sijax.request('save_message', [$('#message').attr('value')]);
            
            //Prevent the form from being submitted
            return false;
        });

        $('#message').focus();

        $('#btnClear').bind('click', function() {
            Sijax.request('clear_messages');

            return false;
        });
    });
    </script>
</body>
</html>

