setInterval（）触发但ajax更新div内容不起作用

Question

In the onDocumentReady(), $(function () {...}) , I have a line: window.setInterval("readPluginCache();", 3000);

The readPluginCache() method invokes an ajax call to retrieve and format replacement html for a named $('#pluginCacheData') element.

I can see in Chrome (F12) that the ajax start, complete and success events are being recorded every three seconds (as expected).

However, the new html isn't replacing the old html values... I have a button on the page (as a backup) and it calls the readPluginCache() method; it works!

How do I make the setInterval() methodology to work?

function readPluginCache() {
    if (!isAuthorized) {
        addMessageError("Error: Unauthorized readCache attempt.");
        return false;
    }

    $('#pluginCacheData').hide();
    $.ajax({
        type: "POST",
        url: infoPageName + "/BriskPluginCacheInfoHtml",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function (response) {
        $('#pluginCacheData').empty();
        $('#pluginCacheData').append(response.d);
    }).fail(function (jqXHR, exception) {
        if (jqXHR.responseText.toLowerCase().indexOf('html') !== -1) {
            addMessageError("Internal Server Error: readPluginCache().     Please check the event log.");
        }
        else
            addMessageError("Error: " + jqXHR.responseJSON.Message);
        alert(exception);
    }).always(function () {
        $('#pluginCacheData').show();
    });

    return true;
}

Answer 1

Okay, I got it working; but I'm not sure why this works... I have abstracted the original ajax call by encapsulating it another function called readAll(), so: window.setInterval(readAll, 3000). The readAll() calls three different ajax-based html/div modifying methods sequentially. I did this b/c there are other parts of the page that also need to dynamically update... It's a mystery to me why this works when one ajax call didn't.