Webeng Webeng - 4 months ago 52
jQuery Question

Reverse engineering some Javascript Chatroom code

I am trying to understand the code some guy wrote for a chatroom. There is one line that I just can't seem to wrap my head around. What is this line doing:

params['id'] = r.insertID;


The line of code is at the end of the following code snippet:

$('#submitForm').submit(function(){

var text = $('#chatText').val();

if(text.length == 0){
return false;
}

if(working) return false;
working = true;

// Assigning a temporary ID to the chat:
var tempID = 't'+Math.round(Math.random()*1000000),
params = {
id : tempID,
author : chat.data.name,
gravatar : chat.data.gravatar,
text : text.replace(/</g,'&lt;').replace(/>/g,'&gt;')
};

// Using our addChatLine method to add the chat
// to the screen immediately, without waiting for
// the AJAX request to complete:

chat.addChatLine($.extend({},params));

// Using our tzPOST wrapper method to send the chat
// via a POST AJAX request:

$.tzPOST('submitChat',$(this).serialize(),function(r){
working = false;

$('#chatText').val('');
$('div.chat-'+tempID).remove();//this is removing the temporary line :)

params['id'] = r.insertID;
chat.addChatLine($.extend({},params));
});

return false;
});


MY CURRENT UNDERSTANDING:

The previous code is run after the html page is loaded. The code schedules an event handler for when a user submits a forum with id
submitForm
. So far so good. From there, a few verifications are done, and eventually the code gets to actually calling the function that will output the new line of text inside the chatroom
chat.addChatLine($.extend({},params));
.

The
params['id']
value would later be used in the function
chat.addChatLine
to identify each
<div>....</div>
that is being placed into the chat.

QUESTION: Where is the value coming from? There is no global variable
r
outside of the javascript function. From the looks of it, the value would appear to be
null
. Am I missing something here?

ORIGINAL SOURCE OF THE CODE:
http://tutorialzine.com/2010/10/ajax-web-chat-css-jquery/

Answer

r is the ajax response object, given to the callback function by tzPOST. This tzPOST is just a wrapper for $.post. So r is the ajax response by the requested webserver. Some shorter version of the code for better example:

//                                                   | here is 'r'
//                                                   | as parameter of the callback
//                                                   |
$.tzPOST('submitChat', $(this).serialize(), function(r) {
    params['id'] = r.insertID;
});

If you search for the tzPOST function in the scripts.js file, you will see, that it just uses jQuery's $.post function. The developer uses this to have a shorthand and a central point for the requests URL:

$.tzPOST = function(action, data, callback) {
    $.post('php/ajax.php?action='+action, data, callback, 'json');
}

On the php/server side the response is set in ajax.php by the lines:

$response = Chat::submitChat($_POST['chatText']);
echo json_encode($response);

The Chat::submitChat function is found in the Chat.class.php file. It inserts everything into database and returns the row id of the database.

public static function submitChat($chatText){
    /* someother code here*/

    // save to database and get row id back
    $insertID = $chat->save()->insert_id;

    // return the insert id
    return array(
        'status' => 1,
        // this is later 'r.insertID'
        'insertID' => $insertID
    );
}

Now params['id'] has the value of r.insertID, witch is the databse row id of the inserted data.

Comments