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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

125594 Aug 26,2016 12:28 PM UTC Aug 29,2016 10:44 AM UTC JavaScript 1
loading
Tags: ejSpreadSheet
Gabriel Axel
Asked On August 26, 2016 12:28 PM UTC

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 10:44 AM UTC

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.

Warning Icon 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.Close Icon

;