View is not rendering. Infinite loading widget

[Jeffrey]

So I have 2 Kendo ViewModels that I had in a different format and it worked fine. I changed on of them and it is working, but the other is making the appBuilder simulator run the km-loader widget infinitely without any error messages. 

I will only be posting the code that is causing an error:

Here is the HTML

01.<!--Speakers page-->

02.<div data-role="view" data-layout="defaultlayout"

03.    data-title="Speakers" data-model="app.speakersList.viewModel">

04.    <div data-role="content">

05.        <ul data-role="listview" class="listview-template" data-template="speakers-view-template"

06.            data-bind="source: speakersDataSource"></ul>

07.    </div>

08.</div>

09.<script type="text/x-kendo-template" id="speakers-view-template">

10.    <img class="item-photo" src="styles/images/#:url#"/>

11.    <h3 class="item-title">#:name#</h3>

12.    <p class="item-info">#:description#</p>

13.</script>


Here is the paired JavaScript file:

01.(function(global) {
02.    var SpeakersViewModel,
03.        app = global.app = global.app || {};
04.
05.    SpeakersViewModel = kendo.data.ObservableObject.extend({
06.        speakersDataSource: null,
07.
08.        init: function() {
09.            var that = this,
10.                dataSource,
11.                jsonUrlToLoad;
12.
13.            //kendo.data.ObservableObject.fn.init.apply(that, []);
14.            jsonUrlToLoad = app.makeUrlAbsolute("scripts/dataSource/speakers.json");
15.
16.            dataSource = new kendo.data.DataSource ({
17.                transport: {
18.                    read: {
19.                        url: jsonUrlToLoad,
20.                        dataType: "json"
21.                    }
22.                }
23.            });
24.            that.set("speakersDataSource", dataSource);
25.     }
26.    });
27.
28.    app.speakersList = {
29.        viewModel: new SpeakersViewModel()
30.    };
31.})(window);

The JSON file is the same file that worked earlier and I reviewed it several times and could not find errors there so I will post it only if it is really needed.


One thing I think I should note is that when I commented out line 13 on the JavaScript file I get this error. However, I have been looking around and can't find the true source of the error.

Uncaught TypeError: Cannot read property 'set' of undefined kendo.mobile.min.js:9
Uncaught TypeError: Cannot read property 'viewModel' of undefined

[Jeffrey]

Here is the print screen of what is going on. It should be displaying a listview, but all it shows is the loading widget. Also, as you can see, the debugger is not displaying any errors. I have tried going through and setting breakpoints at all points that are involved with this viewModel and I have not yet found the source of the issue.

[Jeffrey]

the file did not attach first try.

[Petyo]

Hi Jeffry,

from what I see, you are extending the observable object, but not calling its base constructor - maybe this is the reason. Please change your code to this:

(function(global) {
    var SpeakersViewModel,
        app = global.app = global.app || {};

    var model = kendo.observable({
        speakersDataSource: null,

        init: function() {
            var that = this,
                dataSource,
                jsonUrlToLoad;

            //kendo.data.ObservableObject.fn.init.apply(that, []);
            jsonUrlToLoad = app.makeUrlAbsolute("scripts/dataSource/speakers.json");

            dataSource = new kendo.data.DataSource ({
                transport: {
                    read: {
                        url: jsonUrlToLoad,
                        dataType: "json"
                    }
                }
            });
            that.set("speakersDataSource", dataSource);
     }
    });

    app.speakersList = {
        viewModel: model
    };
})(window);

If this does not help, please review your network tab to verify that the request is performed correctly and the data is present in the datasource. 

Regards,
Petyo
Telerik

 

 

[Jeffrey]

Ah ha. That's what it is. The speakers.json is not loading in the network tab. if the link to the file is correct then why would the file not be loading? 

[Petyo]

Hi Jeffrey,

I am not sure what the reason may be. did you try updating the code to what I have provided? You may try reproducing the problem in an isolated sample - we will take a look and advise you accordingly. 

Regards,
Petyo
Telerik

 

 

[Jeffrey]

Okay. I have done some playing around and I found some more information that may help/ a temporary workaround. 

When I updated the your code the network would not load the JSON file, but it would not freeze. However, when I went back a version to what I originally had it said that the JSON file was loading, but it was going into an infinite load freezing the simulator. 

When i import the JSON data straight into the dataSource without using -->transport -->read, the file loads correctly and displays in the template, so I know the JSON data, template, viewModel seem valid when it loads.

I have a theory, but I can't find any documentation to support  it. With transport -->read, is there a length limit for a string variable? one of the pieces to the dataSource holds a string that reaches 479 characters. if that's the case then i could try splitting the string into several and just edit the template to display all the strings back to back.

[Jeffrey]

Actually, negate that last theory. It appears that the viewModel is undefined. I am not entirely sure how it is undefined since I am directing it to the kendo.observable object.

HTML view

01.<!--Speakers page-->
02.<div data-role="view" data-layout="defaultlayout"
03.    data-title="Speakers" data-model="app.speakers.viewModel"
04.    id="speaker-listview">
05.    <div data-role="content">
06.        <ul data-role="listview" data-bind="source: speakersDataSource"
07.            data-template="speakers-listview-template">
08.        </ul>
09.    </div>
10.</div>
11.<script type="text/x-kendo-template" id="speakers-listview-template">
12.    <img class="item-photo" src="styles/images/#:url#"/>
13.    <h3 class="item-title">#:name#</h3>
14.    <p class="item-info">#:description#</p>
15.</script>

Javascript viewModel

01.(function(global) {
02.    var SpeakersViewModel,
03.        app = global.app = global.app || {};
04.
05.    var model = kendo.observable({
06.        speakersDataSource: null,
07.
08.        init: function() {
09.            var that = this,
10.                dataSource,
11.                jsonUrlToLoad;
12.
13.            //kendo.data.ObservableObject.fn.init.apply(that, []);
14.            jsonUrlToLoad = app.makeUrlAbsolute("scripts/dataSource/speakers.json");
15.
16.            dataSource = new kendo.data.DataSource ({
17.                transport: {
18.                    read: {
19.                        url: jsonUrlToLoad,
20.                        dataType: "json"
21.                    }
22.                }
23.            });
24.            that.set("speakersDataSource", dataSource);
25.     }
26.    });
27.
28.    app.speakersList = {
29.        viewModel: model
30.    };
31.})(window);

I will also add the other html files that have any interaction at all with this view.

home.html

01.<!--home body-->
02.<div data-role ="view" id="home" data-id="home" data-title="M15">
03.    <header data-role="header">
04.        <div data-role="navbar">
05.             <span data-role="view-title"></span>
06.             <img class="navbar-logo" data-align="right" src="styles/images/logo_head.png"/>
07.        </div>
08.
09.    </header>
10.            <div data-role="content">
12.                <ul data-role="listview" data-layout="mobile-view" data-style="inset">
13.                    <li data-icon="about"><a class="home" data-role="button" href="views/about.html">About</a></li>
14.                    <li data-icon="recents"><a class="home" data-role="button" href="views/schedule.html">Schedule</a></li>
15.                    <li data-icon="fastforward"><a class="home" data-role="button" href="views/workshops.html">Workshops</a></li>
16.                    <li data-icon="contacts"><a class="home" data-role="button" href="views/speakers.html">Speakers</a></li>
17.                    <li data-icon="camera"><a class="home" data-role="button" href="views/livealbum.html">Live Album</a></li>
18.                    <li data-icon="phone"><a class="home" data-role="button" href="views/feedback.html">Feedback</a></li>
19.                    <li data-icon="featured"><a class="home" data-role="button" href="views/sponsors.html">Sponsors</a></li>
20.                    <li data-icon="cart"><a class="home" data-role="button" href="views/vendors.html">Vendors</a></li>
21.                    <!--<li data-icon="icon-facebook"><a class="home" data-role="button" href="views/facebookstream.html">Facebook Stream</a></li>
24.                    <li data-icon="toprated"><a class="home" data-role="button" href="views/accommadations.html">Accommodations</a></li>
25.                    <li data-icon="more"><a class="home" data-role="button" href="views/aboutks.html">About Kansas City</a></li>
26.                    <li data-icon="action"><a class="home" data-role="button" href="views/contactus.html">Contact Us</a></li>
27.                </ul>
28.            </div>
29.</div>

index.html

01.<!DOCTYPE html>
02.<html>
03.<head>
04.    <title>M15 2014</title>
05.    <meta charset="utf-8" />
06.
07.    <script src="cordova.js"></script>
08.    <script src="scripts/jquery.min.js" type="text/javascript"></script>
09.    <script scr="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
10.    <script scr="scripts/kendo.all.min.js" type="text/javascript"></script>
11.    <script src="scripts/kendo.mobile.min.js" type="text/javascript"></script>
12.    <script src="scripts/app.js" type="text/javascript"></script>
13.    <script src="scripts/speakers.js" type="text/javascript"></script>
14.    <script src="scripts/workshop.js" type="text/javascript"></script>
15.    <script src="scripts/livealbum.js" type="text/javascript"></script>
16.    <script src="scripts/schedule.js" type="text/javascript"></script>
17.
18.    <!--<link href="styles/jquery.mobile.inline-png-1.4.2.css" rel="stylesheet" type="text/css"/>-->
19.
20.    <link href="styles/kendo.dataviz.mobile.css" rel ="stylesheet" type="text/css"/>
21.    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
22.    <link href="styles/main.css" rel="stylesheet" type="text/css"/>
23.    <link href="styles/jquery.mobile.icons-1.4.2.css" rel="stylesheet" type="text/css"/>
24.
25.</head>
26.<body>
27.    <!-- this empty view must be here or it will not redirect to the initial view-->
28.    <div data-role="view"></div>
29.
30.    <!--define layouts for the header/footer of pages here-->
31.    <div data-role="layout" data-id="defaultlayout">
32.        <header data-role="header">
33.           <div data-role="navbar">
34.            <a data-role="backbutton" data-align="left" data-transition="slide">Back</a>
35.                <span data-role="view-title"></span>
36.                <img class="navbar-logo" data-align="right" src="styles/images/logo_head.png"/>
37.            </div>
38.        </header>
39.    </div>
40.
41.</body>
42.</html>

I hope with all this information we can finally figure out what I am doing wrong with the Kendo framework.

[Petyo]

Hello Jeffrey,

The code you have posted features typos and mismatched name variables (speakers vs speakersList). Also, the init method of the observable is never called. For your convenience, I prepared a runnable example based on the code you have posted - please examine it. 

Regards,
Petyo
Telerik

 

 

[Jeffrey]

The typos were from me trying a ton of different ways to try and fix it and I guess i forgot to change that back. I do see how the init was not called. I had tried to do a "data-init=" call to the init function, but that had proved unsuccessful, so I wasn't sure what I had needed.

Okay, what I found when I created a new project and imported the code you gave me (and I also scratched the code down to bare essentials) is that the JSON file is loading in the network tab and it is still displaying the loading widget infinitely. However, if I put in another JSON file I am using for a dataSource on another view and it worked perfectly. I can get the speakers.json to dataSource to work like in index_with_data.html that I attached, but not like index.html that is also attached.


And I know it is not the file path, because the network tab shows that it is loading and I could load another json from the same file path, or the format of the dataSource that is preventing it to load, since the other json is in the same format and I can copy paste it into the "data:" and it works fine.

your version of speakers.json worked fine as well.

I changed the dataSource a bit to see if the length of the strings was what was keeping it from loading correctly and it still did not work. I even made a version of the dataSource that was completely void of all non-letter characters between the quotation marks and that did not work either. At this point I might as well just make due with the data inside the Javascript file, but I want to understand WHY this is happening. 


P.S- because of file attachment restriction It forced me to upload the files as .txt


[Petyo]

Hello Jeffery,

the speakers.txt is does not contain valid JSON - you can validate it using one of the various online tools, like this one.

Regards,
Petyo
Telerik