jQuery BlockUI and iframe vs require.js

Hi folks

We are using jQuery BlockUI plugin to indicate long-running operations.

progress-indicator.js

(function script() {
    "use strict";

    define(["jquery", "jquery.blockUI"], function module($) {
        function showProgressIndicator() {
            $.blockUI();
        }

        return {
            showProgressIndicator: showProgressIndicator
        };
    });
})();

Also we show popups using iframes.

When we execute long-running operation from popup, BlockUI blocks only popup iframe and that doesn’t look great especially for small popups.

So we want to block the whole page, and to do that we just have to call BlockUI in the global window context.

window.top.$.blockUI()

However, require.js complicates things. If we replace $ with window.top.$, it defeats the whole purpose of the require.js modular approach.

We want to load jquery and jquery.blockUI dependencies from top level window, but there is no a way to achieve this with vanilla require.js so I decided to write a simple plugin.

top.js

(function script() {
    "use strict";

    define([], function module() {
        return {
            load: function load(name, parentRequire, onload, config) {
                window.top.require([name], onload);
            }
        };
    });
})();

then we call this top plugin

progress-indicator.js

(function script() {
    "use strict";

    define(["top!jquery", "top!jquery.blockUI"], function module($) {
        function showProgressIndicator() {
            $.blockUI();
        }

        return {
            showProgressIndicator: showProgressIndicator
        };
    });
})();

Such an elegant solution, isn’t it?

Stay tuned