How do I make the update status (ajax) using JQuery?
How do I make the update status like what you are doing now (facebook + ajax) using JQuery?
I found a tutorial that is very similar to this one, but they use mootools, is there a tutorial that uses JQuery?
I am new to javascript and jquery, I need your guys and advice
EDIT:
An example of mootool can be found here:
http://nettuts.com/tutorials/php/twitter-emulation-using-mootools-12-and-php/
Basically you want to make a jQueryPOST
request to the server with the content of your form. (Check out the examples to see how this works ...) Save the published data to your database, send a response to the client, and use a callback to refresh the page by reloading certain fields that need to be updated.
I haven't seen any tutorials for creating this specific functionality, but if you play a little with jQuery and your server-side language, you can quickly figure it out.
a source to share
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
a source to share
@Tomas and @Natrium basically told you what you need to know.
Since you say that you are new to javascript and jQuery, I would recommend you check out http://docs.jquery.com/Main_Page
For specific Ajax 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
a source to share
If you follow mootools' example exactly as it is, the javascript will just need to be changed to this in order to work (in much 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');
}
});
});
a source to share
Not to promote too much on my own, but I wrote a tutorial on this. very easy to do: http://blog.twostepmedia.co.uk/dynamic-jquery-twitter-status/
a source to share