Ensure that Kinetic code ALWAYS executes AFTER externally loading DIV

Question

I'm using the Boxer library from www.formstone.it to display a modal popup window over my HTML page. On triggering the modal window, HTML content gets loaded into the modal DIV from a file on my server. The Boxer code:

$(".boxer.boxer_object").click(function(e) {

    e.preventDefault();
    e.stopPropagation();

    $obj = $('<div class="outer_container" />').load("http://www.myserver.com/game_modal.html",function(){

    setTimeout(function (){

        ... Kinetic code which loads several image and GUI elements for a simple game ...

    }, 2000); // delay Kinetic code execution with 2 seconds

    $.boxer($obj);

});

Even though it does seemingly only execute the KineticJS code AFTER the HTML code has loaded, I do still sporadically get the following error:

Uncaught TypeError: Cannot set property 'innerHTML' of null

As I understand it, this error occurs when the canvas is trying to target a DIV which does not yet exist. In other words, the KineticJS code executes AFTER the code has loaded but BEFORE the relevant container DIV has become part of the page structure.

As seen in my code above, I now use a setTimeout() function to delay the KineticJS code execution with 2 seconds. Even though less than ideal, I have not seen the error again, with the game graphics loading every time. However, this is a fix that may be working on my browser but which may fail for someone else in other conditions.

Is there a proper way in which to ensure that the KineticJS code will ALWAYS execute AFTER the externally loaded HTML code has become part of the page structure? i.e. after the container DIV which the KineticJS code targets for the HTML5 canvas actually exists?

Answer 1

You should be able to skip the ajax call and render the game's container and loading markup manually:

var $game = $('<div id="outside_container" style="text-align:center; width:900px; height=600px;"><span style="display:inline-block; line-height:600px; font-size: 4em;">LOADING...</span></div>');

Then use the 'callback' option to initialize the game:

$boxer($game, {
    callback: initGame
});

function initGame() {
    // kinetic js code
    ...
}