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

Advertisements

About mnaoumov

Senior .NET Developer in Readify
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s