Question

I’m building a live theme picker for a project of us and it works. That’s great! But I’ve got one bug left, which I can’t solve and it drives me crazy.

This is the problem: On the moment you’ll load the theme picker page, the backbone app (it’s build with Backbone JS, Underscore JS and jQuery) is started. On the initialization the app looks up several things, and one of the things is: what color set do I need to use for the current theme (the current theme settings are stored in a DB).

This is the function that’s called on initialization:

    // Select the colorset for the first time a new theme is picked
    selectColorset: function( newTheme ) {
        // Check or this is a new theme or not
        var themeCheck = ( typeof newTheme !== "undefined" ) ? true : false,
            colorset = ( !themeCheck ) ? parseInt( $("#js-colorset-input").val() , 10 ) : 0;

        // Select the right list
        $("#js-theme-colors ul").eq( colorset ).addClass("selected-set");
        this.renderColorStyle( colorset );
    }

As you can see this function is used on two ways: First on initialization and when you switch to an other theme.

First I look up: why is this function called? Is it called on the change event, or is it called on initialization. If it’s called on initialization, the newTheme variable will not hold any data.

On initialization the color set number will be a number in an hidden field on the page. So now we’ve got the color set number, we can render the color set stylesheet (this.renderColorStyle( colorset )):

    // Insert the color stylesheet
    renderColorStyle: function( colorset ) {
        // Check or the colorset is given
        if( typeof colorset === "undefined" || colorset === "" ) {
            colorset = 0;
        }

        // Define the stylesheet for this theme
        if( $("#js-theme-iframe").contents().find("#js-theme-colorset").length > 0 ) {
            // Change the current stylesheet
            $("#js-theme-iframe")
                .contents()
                .find("head #js-theme-colorset")
                .attr("href", "stylesheets/themes/theme-" + this.themeID + "/theme-color-" + colorset + ".css");
        } else {
            // Insert a new stylesheet
            var stylesheet = $("<link />", {
                href: "stylesheets/themes/theme-" + this.themeID + "/theme-color-" + colorset + ".css",
                rel: "stylesheet",
                id: "js-theme-colorset"
            });

            // Append the stylesheet to the iframe
            $("#js-theme-iframe").contents().find("head").append( stylesheet );
        }
    }

As you can see, I first check or we’ve got an color set (just to be sure) and because we don’t have an color set stylesheet on initialization, we’re gonna build one. This is done with jQuery. As you can see, I’m building the element with a href, rel and an id (which is used to find the color set stylesheet).

But jQuery keeps giving me an empty array back on initialization.. So the stylesheet is not there.. All the data is there, and when I use the console.log() function to see or the data is really there, it turns out it is. So that’s not it.

But I really can’t find out why this happens. Because if I call these functions on a theme change, it all works and jQuery creates the stylesheet.. So only on initialization it doesn’t work and it drives me crazy..

Hopefully someone can explain me how it’s possible that the exact same functions are called every time, but on initialization it has an other output (with the same numbers and variables) than on theme change..

Answer 1

The whole problem was: I’d called the selectColorset() before I even initialized the iFrame. Thanks to @Leandro I figured out that, that was my mistake. Thanks for the help!