How to send the last class of a div in an ajax poll?

Question

I'm having trouble with my ajaxPoll chat system. I'm trying to send the last Id of the chat message's div back to php, so then the query can only show results that are higher than the last id sent.

All the chat messages are in a div called chat_log. A message would have a div around it with the class of the message's id. It would have the text message then the ID of that message, for example: class="message543". Okay so to make it easier to understand, here's a sample bit of HTML, with the structure and in the right order.

<div id='chat_log'>
    <div class='message435'></div>
    <div class='message436'></div>
    <div class='message437'></div>
    <div class='message438'></div>
    <div class='message439'></div>
    <div class='message440'></div>
    <div class='message441'></div>
</div>

As you can see, there are 7 messages in the div max. Any messages higher than that are wiped out (all if that works fine, just a little bit of extra information.) Another thing to note, I use the jquery library and a jquery plugin found here, credit to this blog post. (Information about what the plugin does can be found there.)

---

What I've tried:

function ajaxGo() {
    $.ajaxPollSettings.pollingType = "interval";
    $.ajaxPollSettings.interval = 700;
    $.ajaxPollSettings.maxInterval = 1000;
    $.ajaxPollSettings.durationUntilMaxInterval = 2000;

    var httpcount = 1;

    var lastDiv = lastDiv = $('#chat_log').find('div:last-child');
    var lastId = lastDiv[0].className.substring(7);

    $.ajaxPoll({
        url: "place_chat/update.php",
        type: "POST",
        data: {
            where: where,
            'last': lastId
        },
        dataType: "html",
        cache: false,

        successCondition: function (result) {
            var responseString = result;

            if (result != '') {
                $(result).appendTo('#chat_log').show();
                lastDiv = lastDiv = $('#chat_log').find('div:last-child');
                lastId = lastDiv[0].className.substring(7);
                console.log(lastId);
                httpcount = httpcount + 1;

                if (!hasFocus && !titleCurrentlyChanging) {
                    changeTitle();
                }

                soundHandle = document.getElementById('soundHandle');
                soundHandle.src = '../Sounds/Message.wav';
                soundHandle.play();
            }
        }

    });
}

$(document).ready(function () {
    $('#chat_log').append('<div class="message0">Test</div>');

    setTimeout(ajaxGo, 500);
}); 

---

The code takes off the string 'message', then grabs the number. The code:

lastDiv = lastDiv = $('#chat_log').find('div:last-child');
lastId = lastDiv[0].className.substring(7);
console.log(lastId);

...works correctly when pasted in the console and outputs the correct, last div's message id.

However it does not when ran non-manually (probably because it's not in a function or in a loop or what not), the code for some reason, only sends '0', when there are other messages with id's of 1000+. I've also tried many other things, like setInterval's, Etc. One thing I think may be causing the issue is the variable scope, it's as if when the success function of the poll is being called, it won't adjust the lastId variable. I'm not entirely sure if this is the case though. If it is the case, I would appreciate support on how to fix the variable scope in order for the code to work correctly.

On a side note, the php is working successfully, so I need no assistance with that.

Important Edit (Make the issue easier to understand): The code

lastDiv = lastDiv = $('#chat_log').find('div:last-child');
lastId = lastDiv[0].className.substring(7);

...works fine, it's the surrounding area (the structure) of it is what seems to be the problem. Also where is not relevant to this where just tells php where the script was sent from. I am aware that there is a div appended on first called test, that's to define the first lastId as 0. The Loop should handle getting the latest lastId, but it doesn't.

What I have discovered: lastId is not being edited in the ajaxPoll, it gets the right lastId from the div, but does not edit lastId. Which makes it ALMOST definite that it's a scope problem

Answer 1

One problem is ajaxPoll. You create the data to be sent once and it is not re-evaluated on each poll.

Another problem is that lastId is local to the ajaxGo function. Move it outside.

Here is a jsfiddle that uses jQuery.ajax and setInterval:

var lastId = 0;

function ajaxGo() {

    $.ajax({
        url: "/echo/html/",
        type: "POST",
        data: {
            'last': lastId,
            html: '<div class="message' + (parseInt(lastId) + 1) + '">' + (parseInt(lastId) + 1) + '</div>'
        },
        dataType: "html",

        success: function(result) {

            if (result) {
                $(result).appendTo('#chat_log').show();
                lastDiv = $('#chat_log').find('div:last-child');
                lastId = lastDiv[0].className.substring(7);
                console.log(lastId);

/*                if (!hasFocus && !titleCurrentlyChanging) {
                    changeTitle();
                }

                soundHandle = document.getElementById('soundHandle');
                soundHandle.src = '../Sounds/Message.wav';
                soundHandle.play();*/
            }
        }

    });
}

var timer = setInterval(ajaxGo, 1000);​

Some code that was not relevant to your question was commented out or omitted.

Answer 2

If it is a scope problem, it will probably be fixed by putting

var lastId = -1;

at the top of your code, then replacing var lastId = ... with lastId = ....