CODEWITHSUNDEEP
jqueryajaxstatus
show_lol
show_lol

Reputation:

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

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/

Upvotes: 0

Views: 7786

Answers (6)

benhowdle89
benhowdle89

Reputation: 37484

Not to self promote too much but i wrote a tutorial on this very thing. very easy to do: http://blog.twostepmedia.co.uk/dynamic-jquery-twitter-status/

Upvotes: 0

KyleFarris
KyleFarris

Reputation: 17548

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');
        }
    });
});

Upvotes: 0

Cherian
Cherian

Reputation: 19418

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

Upvotes: 1

jrharshath
jrharshath

Reputation: 26583

@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

Upvotes: 1

Tomas Aschan
Tomas Aschan

Reputation: 60634

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.

Upvotes: 2

Natrium
Natrium

Reputation: 31174

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

Upvotes: 1

Related Questions