Question

I’m building a chatroom that sends messages via AJAX. Whenever I hit enter, with the data: parameter, it returns an error, but if I remove data:, it doesn’t do anything. This is very puzzling, and I’m wondering what I’m doing wrong. Here is what I have:

$("#form").bind("keypress", function(e) {
    if (e.keyCode == 13) {
      $.ajax({
       type: 'POST',
       url: "send-message.php",
       data: "message="+$("#message").val()+"&user="+$("#user").val()+"&room="+$("#room").val(),
       success: $("#message").val(""),
       error: $("#message").val("FAIL"),
      });
        return false;
    }
});

I use PHP in my AJAX call, so I don’t know if that is causing the problem?

Answer 1

Try this:

...
$.ajax({
   type: 'POST',
   url: "send-message.php",
   data: {message: $("#message").val(), user: $("#user").val(), room: $("#room").val()},
   success: function() { $("#message").val(""); },
   error: function() { $("#message").val("FAIL"); }
});
...

In the above code:

a) data sent as JSON – this will make sure that any url encoding and escaping will be correctly performed by jQuery as needed

b) success and error options must be callback functions