jQuery "Microsoft JScript runtime error: Object expected"

Question

I have the below code that does not seem to work at all :( I keep getting:

Microsoft JScript runtime error: Object expected

The error seems to occur when the timeout is done. So if I raise the timeout with 10 seconds the error holds for another 10 seconds.

I want to be able to update the number of friends online async. The number is shown with the following html:

<a href="" id="showChat" >Friends online <strong id="friendsOnline">(?)</strong></a>

The friends part is set at the first run, but when the timeout calls back it does not fire again. Also, I cannot see on which line the error occurs because if I want to break on the error it just shows "no source code" etc.

The code below is the code I'm using. Thanks!

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> 
<script src='/Scripts/MicrosoftAjax.js' type="text/javascript"></script> 
<script src='/Scripts/MicrosoftMvcAjax.js' type="text/javascript"></script> 
<script src='/Scripts/jquery.autocomplete.js' type="text/javascript"></script>

<script type="text/javascript"> 
$(document).ready(function() {
    UpdateFriendsOnline();
    function UpdateFriendsOnline() {
        window.setTimeout("UpdateFriendsOnline()", 1000);
        $.get("/Account/GetFriendsOnline", function(data) {
            $("#friendsOnline").html("(" + data + ")");

        });
    }
});
</script>

Answer 1

Try this:

window.setTimeout(UpdateFriendsOnline, 1000);

The version you had would have worked if the function was defined in the global namespace.

This way, you're passing in a local reference to the function, which will get called every second.

---

EDIT:

If you need to cancel the previous request before the new one starts, you can do something like this:

<script type="text/javascript"> 
$(document).ready(function() {
    var request;   // Stores XMLHTTPRequest object
    UpdateFriendsOnline();
    function UpdateFriendsOnline() {
        if(request) request.abort();  // Abort current request if there is one

        window.setTimeout(UpdateFriendsOnline, 1000);

           // Store new XMLHTTPRequest object
        request = $.get("/Account/GetFriendsOnline", function(data) {
            request = null;  // Clear request object upon success
            $("#friendsOnline").html("(" + data + ")");
        });
    }
});
</script>

Answer 2

Change your setTimeout() like this:

window.setTimeout(UpdateFriendsOnline, 1000);

Currently your function isn't available outside the document.ready, so it's not accessible as a global function, which passing it as a string is trying to access it as. As a general rule, never ever pass setTimeout() a string if you can avoid it...it can cause problems like this case, and I can't think of an example (that if avoidable) is made better by it being a string.

Also, I suggest firing it when you get the response back, otherwise you'll start queuing up overlapping ajax requests, you can do that by adjusting your function to this:

function UpdateFriendsOnline() {
  $.get("/Account/GetFriendsOnline", function(data) {
    $("#friendsOnline").html("(" + data + ")");
    window.setTimeout(UpdateFriendsOnline, 1000);
  });
}