Question

I have a javascript function that I am trying to add to my document, to give it a sense of being updated in real time. It is an AJAX call to my MVC controller which returns a JSON result and adds it to the list at the top, and then hides the last li, and then removes the last li.

The problem is, the function works flawlessly 8 times, and then goes screwy. After the first 8 times, the function only hides the last item in the list, every other time it adds one to the top. So after the first 8 runs, my list grows by 1 li every other run of the script:

Here is my function:

<script type="text/javascript">
    $(document).ready(function () {
        function latestBranch() {
            $.getJSON("Home/LatestWristband", null, function (html) {
                var showHideSpeed = 200;
                var firstLI = $("#recentBranches ul li").first();
                if (firstLI.text() !== html) {
                    firstLI.before('<li>' + html + '<\li>');
                    $("#recentBranches ul li").first().hide().show(showHideSpeed);
                    $("#recentBranches ul li").last().hide(showHideSpeed / 4,
                        function () {
                            $("#recentBranches ul li").last().remove();
                        });
                }
            });
        };
        setInterval(latestBranch, 500);
    });
</script>

I have tried several things to get this to work. My first thought is that the interval was quicker than the script was getting rid of the last list item, but I have tested this with a interval of 5000 for the get, and 1000 for the hide/show of the elements, which should provide an extra 3000ms at least before the next call. I have also tried changing this:

$("#recentBranches ul li").last().hide(showHideSpeed / 4,
                        function () {
                            $("#recentBranches ul li").last().remove();
                        });

to:

$("#recentBranches ul li").last().remove();

however I get the same problem after 8 times. It seems though that after it gets into this rhythm of only working every other time, it keeps it indefinetly. I have tried looking aroudn, but I can’t seem to find anything that would explain these symptoms…

Answer 1

You’re using the wrong slash to close the <li>, which means you’re actually adding 2 <li>s per request. (The second one is blank)

change this line:

firstLI.before('<li>' + html + '<\li>');

to this:

firstLI.before('<li>' + html + '</li>');