Question

Sorry guys, maybe this has been asked before. But I googled around for several days and still cannot solve the problem. I am developing a chatting system using Google App Engine with Python. I would like the user to enter her/his message and click “Submit” button. That action will trigger an Ajax post function “addMsg()” to POST the message to class Chat (URL: “/chat”), which will add the message to datastore. There is another Ajax function “updateMsg()” which will update the message list periodically.

The code works fine for message updating, however, I am not able to post the message correctly. Can anybody help me? Thanks. Here are my codes:

chat.html:

    <p>
    <form method="" action="">
    <input type="text" name="message" size="60" /><br />
    <input type="button" value="Submit" onclick="addMsg('message')" />
    </form>
    </p>
    <div id="chatcontent"> </div>
    <script>
    function addMsg(message) {
        $.ajax({
            type: "POST",
            url: "/chat",
            data: {'message': message},
            cache: false
        });
    }
    </script>

    <script>
    $(document).ready(function() {
        function updateMsg() {
            $.ajax({
               url: "/message",
               cache: false,
               success: function(returndata){
                    $("#chatcontent").html(returndata);
               }
            });
            setTimeout(updateMsg, 4000);
        }
        updateMsg();
    });
    </script>

message.html:

    {% for chat in chatlist %}
    <p>
      {{ chat.text }} ({{ chat.user.account }}) {{chat.created|date:"D d M Y" }}
    </p>
    {% endfor %}

chat.py:

    # Called by URL "/chat"
    class Chat(webapp2.RequestHandler):
        def post(self):
            message = self.request.get('message')
            newchat = ChatMessage(user=self.session['userkey'], text=message, created=datetime.datetime.now())
    newchat.put()

    # Called by URL "/message"
    class Message(webapp2.RequestHandler):
        def get(self):
            que = db.Query(ChatMessage).order('-created')
            chatlist = que.fetch(limit=100)
            render(self, 'message.html', {'chatlist': chatlist})
            # Note: render() is a function to be imported, which is just a normal template rendering function. It works fine and is omitted here.

Answer 1

Chat.html

<p>
<input type="text" name="message" size="60" /><br />
<input type="button" value="Submit" onclick="addMsg()" />
</p>
<div id="chatcontent"> </div>
<script>
function addMsg() {
    var message = $('input[name=message]').val();
    $.ajax({
        type: "POST",
        url: "/chat",
        data: {'message': message},
        cache: false
    });
}
</script>