converting from prototype to jquery

Question

I'm trying to do a simple ajax update of a div from a php file that gets data from a mysql database. One function populates the div, the other adds messages to the database and is called on click of a submit button. I was wondering if someone could give me their equivalents in jquery. Below are the prototype versions.

<script>
function getMessages()
{
    new Ajax.Updater('chat','messages.php', {
     onSuccess:function(){window.setTimeout( getMessages, 3000 ); }
     });
     }
getMessages();
</script>

<script>
function addmessage()
{
    new Ajax.Updater('chat','add.php',
     {
      method:'post',
      parameters: $('chatmessage').serialize(),
      onSuccess: function() {
      $('messagetext').value = '';
      }
      } );
      }
</script>

Thank you guys in advance.

Answer 1

The jQuery .ajax() call does it all. It has wrappers with less parameters like .get(), .post() and .load() that you can use for less verbose syntax.

You don't mention what format the data you get back is in. You need to specify in the .ajax() call. Roughly:

function addMessage(message) {
  $.ajax({
    url: 'add.php',
    success: function() {
      $("#chatmessage").text('');
    },
    error: function() { ... },
    timeout: 3000,
    data: {
      message: message
    } 
  });
 }

function getMessages() {
  $.ajax({
    url: 'messages.php',
    dataType: 'html',
    timeout: 3000,
    error: function() { ... },
    success: function(data) {
      $("#messages").html(data);
    }
  });
}

Note: the dataType parameter just needs to match whatever the script produces. If messages.php produces, say, an HTML list of messages then set it the dataType to "html". If that is the case, you can also simplify the code to:

function getMessages() {
  $("#messages").load("message.php");
}

Note: the load() function is just a wrapper around .ajax(). Use .ajax() if you need to set things like timeouts, error handling, etc. For example:

<div id="messages"></div>
<input type="button" id="getmessages" value="Get Messages">
...
<script type="text/javascript">
$(function() {
  $("#getmessages").click(function() {
    $(this).attr("disabled", "true");
    $.ajax({
      url: 'message.php',
      dataType: "html",
      timeout: 5000,
      error: function() {
        alert("Error talking to server.");
        $(this).attr("disabled", "false");
      },
      success: function(data) {
        $("#messages").html(data);
        $(this).attr("disabled", "false");
      }
    });
  });
});
</script>

The above is a fuller example and should give you an idea of what you can use the extra parameters for. If you don't need them just use the shorthand versions.

Answer 2

$.ajax({
    type: "GET",
    url: "messages.php",
    data: "name=John&location=Boston",
    success: function(){
        window.setTimeout(getMessages,3000);
    }
});

for second addmessage

$.ajax({
    type: "POST",
    url: "add.php",
    data: $('#chatmessage').param(),
    success: function() {
        $('messagetext').value = '';
    }
});

for further details have a look at http://docs.jquery.com/Ajax