Question

Sorry if the question title is a little confusing, but I’m not sure exactly how to word my problem.

I have the following synchronous ajax call (the purpose of which is to get json file contents).

$.ajax({
    url: "/JsonControl/Events.json",
    dataType: 'json',
    async: false,
    success: function(jsonObj) 
    {
        for (var i = 0; i < jsonObj.events.length; ++i) 
        {
            if(day == jsonObj.events[i].dateNumber && (navDate.getMonth() + monthAdjust) == (jsonObj.events[i].dateMonth -1) && navDate.getFullYear() == jsonObj.events[i].dateYear)
            {
                document.getElementById("cGrid" + gridMod).className="eventDay";
                document.getElementById("cGrid" + gridMod).onmousedown = function(){document.getElementById("eventBox").src="/Event htms/Event.htm"; document.getElementById("eventBox").document.getElementById("title").innerHTML = (jsonObj.events[i].title);}
                document.getElementById("cGrid" + gridMod).style.backgroundColor = "#336633";
                isAnEvent = true;
            }
        }
    }
});

The problem I am having is with the following line (line 12, if ‘$.ajax({‘ is line 1):

document.getElementById("cGrid" + gridMod).onmousedown = function(){document.getElementById("eventBox").src="/Event htms/Event.htm"; document.getElementById("eventBox").document.getElementById("title").innerHTML = (jsonObj.events[i].title);}

I have been told that I need closure, but I can’t make heads or tails of any examples I have seen, as I have never seen syntax set up in such a way, and examples I have tried don’t work (I will give details on what “don’t work” means further down).

This is what I attempted (I replaced the concerning line mentioned above with this one, shown below).

(function(index) {
                document.getElementById("cGrid" + gridMod).onmousedown = function(){document.getElementById("eventBox").src="/Event htms/Event.htm"; document.getElementById("eventBox").document.getElementById("title").innerHTML = jsonObj.events[index].title;}
            })(i);

The error I get is this:

Uncaught TypeError: Cannot call method 'getElementById' of undefined 

I get this error with the original problem line, as well as, with the replacement line, just shown above.

I find this self-executing function stuff pretty new, so I’m not sure how to proceed.

Any advice on how to plot what the actual value of jsonObj.events[i].title at the time it is accessed instead of literally plotting ‘jsonObj.events[i].title’ would be greatly appreciated.

I also tried (guessing, as I was) the valueOf method, but quick research has shown that simply returns the value of a boolean value.

Answer 1

Combination of wrapping the in-loop code (as suggested by Justin) with moving to .contentDocument for <iframe> contents, along with a couple other changes.

See comments in code or ask below to understand what is happening. (I’m assuming #eventBox is an <iframe>)

function (jsonObj) {
    for (var i = 0; i < jsonObj.events.length; ++i) (function (i) { // `i` inside function is protected from outside changes
        var cGridMod; // holder to reduce lookups
        if (day == jsonObj.events[i].dateNumber
          && (navDate.getMonth() + monthAdjust) == (jsonObj.events[i].dateMonth -1)
          && navDate.getFullYear() == jsonObj.events[i].dateYear) {
            cGridMod = document.getElementById("cGrid" + gridMod);
            cGridMod.className="eventDay";
            cGridMod.onmousedown = function () {
                var eventBox = document.getElementById("eventBox"); // holder to reduce lookups
                eventBox.onload = function () { // set an onload listener so #document exists at time of execution
                    eventBox.onload = null; // unset it so it only fires once
                    eventBox.contentDocument.getElementById("title").innerHTML = (jsonObj.events[i].title);
                      // using `.contentDocument` to get <iframe> document
                };
                eventBox.src="/Event htms/Event.htm";
                  // now set location (done after so onload will fire when loaded)
            };
            cGridMod.style.backgroundColor = "#336633";
            isAnEvent = true;
        }
    }(i)); // invoke the function for this iteration of the loop; `i`
}