We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

ej.core.js function definition order breaks in lazily loaded scripts + fix

Thread ID:

Created:

Updated:

Platform:

Replies:

125594 Aug 26,2016 08:28 AM Aug 29,2016 06:44 AM JavaScript 1
loading
Tags: ejSpreadSheet
Gabriel Axel
Asked On August 26, 2016 08:28 AM

Greetings,

I generated a script that includes ejSpreadsheet using the custom script generator. When including it statically using a script tag in an HTML file it worked fine, but when lazily loading it from JS code (creating a script element, setting its src attribute and appending it to the document body) it failed on wd.init is not a function. When debugging it turned out that in the case of lazily loaded script, the function that calls wd.init() runs before wd.init is defined (because it's wrapped in a shorthand of "document ready" callback $(function(){...}), and the document is already ready then). I moved wd.init and the functions it calls to before that function and that resolved the issue. The order of function definitions that worked for me is:

  1. findElements + initControls
  2. checkUnobtrusive
  3. wd.init
  4. $(function () {...})

the complete rearranged code chunk is:

    var initControls = function (controls, op, name, proto, map, dir) {

        var types = proto.dataTypes, len = controls.length;

        for (var i = 0; i < len; i++) {

            var control = controls.eq(i), model = {};

            iterateAndSetModel(model, readAttributes(control, op, name), map, types);

            control[name](model);

        }

    }


    var findElements = function (name, op, el, proto) {

        var query = [], controlName = name.replace("ej", '').toLowerCase(), res = {};


        if (op.dataRole === true) {

            query.push("[data-role='" + name.toLowerCase() + "']");

        }

        if (op.ejRole === true) {

            query.push("[ej-" + controlName + "]");

        }


        res["role"] = el.find(query.join(','));


        if (op.directive === true) {

            res["directive"] = findAndChangeTag(el.find(controlName), (proto.validTags && proto.validTags[0]) || "div", controlName, el);

        }

        return res;

    };


    var checkUnobtrusive = function (name, proto, op, el) {

        var controls = findElements(name, op, el, proto), map = propMaps[name];


        if (((controls.role && controls.role.length) || (controls.directive && controls.directive.length)) && !map) {

            propMaps[name] = map = generatePropMap(proto.defaults);


            if (proto._unobtrusive)

                $.extend(true, map, proto._unobtrusive);

        }


        initControls(controls.role, op, name, proto, map);


        if (controls.directive)

            initControls(controls.directive, op, name, proto, map, true);

    };


    wd.init = function (element) {

        if (!element) element = $(document);

        else element = element.jquery ? element : $(element);


        var widgets = wd.registeredWidgets;

        for (var name in widgets) {

            checkUnobtrusive(widgets[name].name, widgets[name].proto, options, element);

        }

    }


    $(function () {

        var ds = $(document.body).data();

        options.ejRole = ds.hasOwnProperty("ejrole") ? readBoolAttr(ds, "ejrole") : options.ejRole;

        options.directive = ds.hasOwnProperty("directive") ? readBoolAttr(ds, "directive") : options.directive;

        if (options.ejRole !== true && options.directive !== true) options.dataRole = true;

        options.dataRole = ds.hasOwnProperty("datarole") ? readBoolAttr(ds, "datarole") : options.dataRole;


        if (options.ejRole !== true && options.dataRole !== true && options.directive !== true)

            return;


        wd.autoInit = ds.hasOwnProperty("autoinit") ? readBoolAttr(ds, "autoinit") : true;


        if (wd.autoInit !== true)

            return;


        var query = [], el;

        if (options.dataRole === true)

            query.push("[data-ej-init]");

        if (options.ejRole === true)

            query.push("[ej-init]");

        el = $(query.join(','));


        if (!el.length) el = $(document);

        wd.init(el);

    });


Shanmugaraja K [Syncfusion]
Replied On August 29, 2016 06:44 AM

Hi Gabrial, 

We have considered this “ej.unobtrusive.js function definition order breaks in lazily loaded scripts” as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 


Regards, 
Shanmugaraja K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;