Unable to use Syncfusion JavaScript components in LightSwitch HTML

StackOverflow https://stackoverflow.com/questions/21595082

質問

I have just bought the SyncFusion Essential Studio Enterprise for $599. I am using their LightSwitch Silverlight components with no issues but seem to be having some strange issues when using the JavaScript components.

This is all of the content of the default.htm file from a brand new (and completely empty) LightSwitch HTML Client with the modifications required for SyncFusion:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Application1.HTMLClient</title>

    <script type="text/javascript">
        // Work around viewport sizing issue in IE 10 on Windows Phone 8
        if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
            document.writeln("<style>@-ms-viewport { width: auto!important; }</style>");
        }
    </script>

    <link rel="stylesheet" type="text/css" href="Content/light-theme-2.0.0.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-light-2.0.0.css" />
    <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.0.min.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-2.0.0.min.css" />
    <!-- SyncFusion -->
    <link rel="stylesheet" type="text/css" href="http://cdn.syncfusion.com/js/flat-azure/ej.widgets.all-latest.min.css" />
</head>
<body>
    <div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
        <div class="msls-app-loading-img"></div>
        <span class="ui-icon ui-icon-loading"></span>
        <div class="ui-bottom-load">
            <div>Application1.HTMLClient</div>
        </div>
    </div>

    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
    <script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
    <!--<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>-->

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.3.0.min.js"></script>
    <script type="text/javascript" src="Scripts/datajs-1.1.1.min.js"></script>
    <script type="text/javascript" src="Scripts/Generated/resources.js"></script>
    <script type="text/javascript" src="Scripts/msls-2.0.0.min.js"></script>
    <script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            msls._run()
                .then(null, function failure(error) {
                    alert(error);
                });
        });
    </script>
    <!-- SyncFusion -->
    <script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
    <script src=" http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.cultures.js "></script>

    <script src="http://cdn.syncfusion.com/js/ej.widgets.all-latest.min.js"></script>
</body>
</html>

In IE11/10, I get the following error message: "Failed to load model: Error: Out of stack space"

In Chrome, I get a similar message: "Failed to load model: RangeError: Maximum call stack size exceeded"

In FireFox, I get a similar message as well: "Failed to load model: InternalError: too much recursion"

The errors indicate that it may be a component trying to register multiple times or something, my question is why and how can I fix this?

This of course, works fine on a standard HTML page (I'm looking at the samples provided)...just has the issue with LightSwitch.

EDIT The following is the response I received from Syncfusion. As noted, this does not have any effect:

Start Email

Thanks for using Syncfusion Products.

We are able to reproduce the above reported issue and we have analyzed that the issue has been caused due to incorrect array iteration in msls-2.0.0.js and unwanted Array's prototype function addition for finding lastItem in ej.widget.all.js. In order to overcome this issue we have prepared a work around which as follows.

Code Snippet:

<script src="http://cdn.syncfusion.com/js/ej.widgets.all-latest.min.js"></script>
<script type="text/javascript">
    ej.buildTag = function (tag, innerHtml, styles, attrs) {
        var tagName = /^[a-z]*[0-9a-z]+/ig.exec(tag)[0];
        var id = /#([a-z]+[-_0-9a-z]+)/ig.exec(tag);
        id = id ? id[id.length - 1] : undefined;
        var className = /\.([a-z]+[-_0-9a-z ]+)/ig.exec(tag);
        className = className ? className[className.length - 1] : undefined;
        return $(document.createElement(tagName))
            .attr(id ? { "id": id } : {})
            .addClass(className || "")
            .css(styles || {})
            .attr(attrs || {})
            .html(innerHtml || "");
    }
</script>

We have confirmed this as a defect and have logged a defect report for this. And we suggest you to follow the above workaround until the defect is available in our upcoming Main release [2014 Vol-1] which is expected to be released at the end of March. We appreciate your valuable patience until then.

Please get back to us if you need further assistance.

Thanks/Regards,

End Email

役に立ちましたか？

解決

This is issues with incorrect array iteration in msls-2.0.0.js and also unwanted Array's prototype function addition for finding lastItem in ej.widget.all.js

To get things working, you can add the following script in $(document).ready

$(document).ready(function () {
    delete Array.prototype.lastItem;
    msls._run()
    .then(null, function failure(error) {
        alert(error);
    });
});

EDIT

After the above workaround, syncfusion controls are failed to work. Could you contact the Syncfusion support regarding this issue.?

EDIT2

I found the workaround to make the controls working fine. Paste the below script in default.htm

<script src="http://cdn.syncfusion.com/js/ej.widgets.all-latest.min.js"></script>
<script type="text/javascript">
    ej.buildTag = function (tag, innerHtml, styles, attrs) {
        var tagName = /^[a-z]*[0-9a-z]+/ig.exec(tag)[0];

        var id = /#([a-z]+[-_0-9a-z]+)/ig.exec(tag);
        id = id ? id[id.length - 1] : undefined;

        var className = /\.([a-z]+[-_0-9a-z ]+)/ig.exec(tag);
        className = className ? className[className.length - 1] : undefined;

        return $(document.createElement(tagName))
            .attr(id ? { "id": id } : {})
            .addClass(className || "")
            .css(styles || {})
            .attr(attrs || {})
            .html(innerHtml || "");
    }
</script>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top