fcount is undefined

Question

I have a variable that I use for caching or temporary storage to avoid repeated requests to the server:

var div2acc = {};

Then there is this function which gets an array from a WCF service or reads it from my div2acc object:

function getAccounts(div_id){
        if(!div2acc.hasOwnProperty(div_id)){
                $.ajax({
                        url: "/Services/OG.svc/GetListOfAccounts",
                        data: { moduleId: mod_id, divisionCode: div_id },
                        success: function(data){
                                        div2acc[div_id] = data;
                        }
                });
        }

        $("#pnlAccounts").setTemplate( $("#tplAccounts").html() );
        //alert(div2acc[div_id]);
        $("#pnlAccounts").processTemplate(div2acc[div_id]);
        $("#pnlAccounts > ol > li").click(function () {
                addDesignation($(this).attr("id"), $(this).text(), "");
        });
}

It checks if div_id is a defined property which would contain an array of accounts copied from the data variable. It then fires up jTemplates and passes the data stored in the div2acc[div_id] property.

The weird thing is that the first time getAccounts is fired with a certain div_id, I get an "fcount is undefined" in Firebug. The second time around, it's works fine and parses the template. I decided to insert an alert() right before the the template is processed and see what div2acc[div_id] is passed to processTemplate(). Turns out, div2acc[div_id] is always undefined the first time getAccounts(div_id) is called, but the second time around, it's fine. What's even more bizarre, is when I insert alert() itself, "fcount is undefined" error doesn't show up anymore and the template is parsed on the first try, right after I click "OK" in the alert window.

I'm clearly misunderstanding something here.

Answer 1

function getAccounts(div_id) {
    if (!div2acc.hasOwnProperty(div_id)) {
        $.ajax({
            url: "/Services/OG.svc/GetListOfAccounts",
            data: {
                moduleId: mod_id,
                divisionCode: div_id
            },
            success: function (data) {
                div2acc[div_id] = data;
                getAccounts(div_id);
            }
        });
    } else {

        $("#pnlAccounts").setTemplate($("#tplAccounts").html());
        //alert(div2acc[div_id]);
        $("#pnlAccounts").processTemplate(div2acc[div_id]);
        $("#pnlAccounts > ol > li").click(function () {
            addDesignation($(this).attr("id"), $(this).text(), "");
        });
    }
}