Feeds:
Posts
Comments

Archive for January, 2013

If you create a custom module that has embedded javascript (for example a field control), the fact that the javascript gets bundled into the module for deployment is great for portability.

It can be a little bit tedious, however, for troubleshooting, editing, and debugging. I make use of the Chrome developer tools extensively, for example, to set breakpoints in my javascript, and inspect properties. Even just locating my embedded scripts within the many “Telerik.Web.UI.WebResource.axd” files can be a challenge. And when I want to incorporate changes, I have to rebuild my module, and recycle the website, waiting for the changes to come through on the browser.

I have come up with a (hopefully) better way to work through these changes: during development I now have my module js file call and load an external, static js file that can live in the root of the Sitefinity webapp and which can be edited and reloaded on the fly. Then, when edits are all complete and everything is good, I can move the external js back into the module for bundling.

For example, I have a custom “DocumentSelectorFieldControl” that I’m building up in a custom module:

1

In the “DocumentSelectorFieldControl.js” file, I have the following:

function loadScript(url, callback) {

    var script = document.createElement("script");
    script.type = "text/javascript";

    if (script.readyState) {  //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" ||
                    script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function () {
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
};

// temporarily working from static js file in sitefinity web app folder
// move back here when working
loadScript("/testing.js", function () {
    //initialization code
});

Type.registerNamespace("MyApp.CustomFields.DocumentSelector");

*NOTE* that you must include the “registerNamespace” method call here (it’s my last line). If it’s in the external js file (testing.js) it doesn’t function. Presumably this is because of a timing issue where your module is trying to access the js object via namespace, but it’s null.

I then add a “testing.js” file to my SitefinityWebApp:

1

And now, in testing.js in my SitefinityWebApp, I can put all of my custom code for the field control:

1

Advertisements

Read Full Post »