View with reload=true and a data-model set throws error on 2nd visit.

4 posts, 0 answers
  1. Alex Smith
    Alex Smith avatar
    17 posts
    Member since:
    Dec 2009

    Posted 22 Oct 2013 Link to this post

    The error thrown is: Uncaught TypeError: Cannot call method 'closest' of undefined.
    I have created a simple app to reproduce the behavior.

    Attached is the full project with kendo and jQuery dependencies, but I am including the source for search relevance.

    index.html
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <!-- Kendo UI Mobile CSS -->
            <link href="styles/kendo.common.min.css" rel="stylesheet" />
            <link href="styles/kendo.default.min.css" rel="stylesheet" />
            <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
     
            <!-- jQuery JavaScript -->
            <script src="js/lib/jquery/jquery.min.js"></script>
     
            <!-- Kendo UI Mobile combined JavaScript -->
            <script src="js/lib/kendo/kendo.all.js"></script>       
        </head>
        <body>
            <div data-role="layout" data-id="myLayout">
                <div data-role="header">
                    <div data-role="navbar">
                        <a id="btnBack" class="nav-button" data-align="left" data-role="backbutton">Back</a>
                        <span data-role="view-title"></span>
                        <a id="btnOK" class="nav-button" data-align="right" data-role="button" href="page2.html">Next</a>
                    </div>
                </div>
            </div>
     
            <div data-role="view" data-title="Test App" data-layout="myLayout">
                Welcome to the app
            </div>
     
            <script>
                var app = new kendo.mobile.Application(document.body,
                        {
                            transition: 'slide'
                        });
            </script>
        </body>
    </html>
    page2.html
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        </head>
        <body>
            <script src="js/app/page2.js"></script>
            <div data-role="view" data-layout="myLayout" data-model="p2Model" data-reload="true">
                <ul data-role="listview" data-template="listItem" data-bind="source: dsList"></ul>
            </div>
     
     
            <script id="listItem" type="text/x-kendo-template">
                #: FirstName # #: LastName #
            </script>
        </body>
    </html>

    js/app/page2.js
    var p2Model;
    if (p2Model == null)
    {
        p2Model = kendo.observable({
            dsList: new kendo.data.DataSource({
                data: [{id: 1, FirstName: "Bilbo", LastName: "Baggins"}, {id: 2, FirstName: "Malcolm", LastName: "Reynolds"}]
            })
        });
    }

    I set the reload="true" attribute on the root view in page2.html because my desire is to have the page refresh with changes made to the underlying model (p2Model) as well as update the datasource's data. When page2 is visited the first time, everything works as expected. But if you hit the back button in the app,  and then visit page2 again, the error is thrown.
    What is interesting to note is that if the singleton behavior of the p2Model is removed and it is reconstructed on each page2 visit, then it also works as expected.
    However, I desire to have some persistent attributes of the p2Model that could be set while visiting page2 and would not be lost when the page is revisited.
    Ideally I could use something like a requireJS module for this, but I have not seen any examples on how to leverage it with remote views.

    Are there any examples or best practices on how to leverage modular javascript in remote views? In the Kendo Music Store tutorial it seems to imply that Kendo will automatically load the .js module with the same name as a view (http://docs.kendoui.com/tutorials/Mobile/Kendo%20Mobile%20Music%20Store/kendo-mobile-music-store-organization#js-file-per-view) but I have not observed this working with a remote view like page2.html. Or perhaps my understanding of requireJS is incorrect.

    Thanks
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 24 Oct 2013 Link to this post

    Hello Alex,

    If I understand your case correctly, you don't need to use the data-reload attribute. Any changes made to the view model will automatically be propagated (via MVVM) to the UI layer. If this is not the case, can you please share an URL or a sample where we can observe the issue? I might be missing something.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Purna
    Purna avatar
    17 posts
    Member since:
    May 2012

    Posted 07 Nov 2013 Link to this post

    I am getting similar error when data-reload is set as true. On 2nd visit, actionsheet throws above error.
  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 11 Nov 2013 Link to this post

    Hi Purna,

    this does not sound familiar - the error which Alex described is related to the datasource being updated. If possible, please provide a runnable example, so that we can reproduce it on our side. Thank you in advance.
     

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top