Webeng Webeng - 1 year ago 124
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:


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:


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

working = false;

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

params['id'] = r.insertID;

return false;


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
. 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

value would later be used in the function
to identify each
that is being placed into the chat.

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


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download