How to do an update status (ajax) with Jquery?

Question

How to do an update status like what are you doing now (facebook + ajax) with Jquery?

I found a tutorial that very similar to this, but they using mootools, is there a tutorial that use Jquery?

I am a new to javascript and jquery, I need your guys help and advice

EDIT:

The mootool example can be found from here:

http://nettuts.com/tutorials/php/twitter-emulation-using-mootools-12-and-php/

Answer 1

here is a nice example to do some simple jquery-ajax with PHP

Answer 2

Basically what you want to do is to make a jQuery POST request to the server with the contents of your form. (Take a closer look at the examples to understand how it works...) Store the posted data in your database, send a response to the client and use a callback function to update the page by re-loading the specific fields that should be updated.

I haven't seen any tutorials to create this specific functionality, but if you play around a little with jQuery and your server-side language-of-choice you should be able to figure it out pretty quickly.

Answer 3

you probably want to do this..

$("div").html("<span class='red'>Hello <b>Again</b></span>");

or

$("p").text("<b>Some</b> new text.");

Checkout JQuery Docs

Answer 4

@Tomas and @Natrium have basically told you what you need to know.

Since you say you are new to javascript and jQuery, I'd recommend you to check out http://docs.jquery.com/Main_Page

For Ajax specific documentation, check out http://docs.jquery.com/Ajax

To learn the basics of jQuery (even if you don't know a lot of javascript), I recommend the book "Learning jQuery" http://www.packtpub.com/learning-jquery-1.3/book/mid/220409c024ep

Answer 5

If you were to follow the mootools example exactly as they have it, the javascript code would simply need to be changed to this to work (basically the same way) in jQuery:

$(function() {
    //make the ajax call to the database to save the update
    $.ajax({
        url: '<?php echo $_SERVER['PHP_SELF']; ?>',
        method: 'POST',
        beforeSend: function() {
            $('submit').attr('disabled','disabled');
        },
        complete: function(xhr,status) {
            $('submit').disabled = 0;
            $('#message').removeClass('success').removeClass('failure');
            $('#message').fadeIn(3000);
        },
        success: function(data,status) {
            //update message
            $('#message').text('Status updated!').addClass('success').fadeIn('medium');

            //store value, clear out box
            var status = $('#status').val();
            $('#status').val('');

            //add new status to the statuses container
            var element = $('<div class="status-box">');
            element.html(status + '<br /><span class="time">A moment ago</span>');
            $('#statuses').prepend(element);

            //place the cursor in the text area
            $('#status').focus();

        },
        error: function(xhr, status, error) {
            //update message
            $('#message').text('Status could not be updated.  Try again.').addClass('failure').fadeIn('medium');
        }
    });
});