This is a migrated thread and some comments may be shown as answers.

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

3 Answers 67 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alex Smith
Top achievements
Rank 1
Alex Smith asked on 22 Oct 2013, 09:57 PM
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

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 24 Oct 2013, 08:40 AM
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!
0
Anatoli
Top achievements
Rank 1
answered on 07 Nov 2013, 02:15 PM
I am getting similar error when data-reload is set as true. On 2nd visit, actionsheet throws above error.
0
Petyo
Telerik team
answered on 11 Nov 2013, 11:39 AM
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!
Tags
General Discussions
Asked by
Alex Smith
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Anatoli
Top achievements
Rank 1
Share this question
or