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

Maintaining views in Multiple html files throwing error

4 Answers 68 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
akshay
Top achievements
Rank 1
akshay asked on 16 Mar 2013, 09:41 AM
Hi,

I am trying to maintain views in multiple html files so that different pages does not redefine references to the Kendo UI Mobile script or CSS resources like

<script src="lib/jquery-1.8.3.js"></script>
<script src="lib/kendo.mobile.min.js"></script>
<link href="lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />

But when references are not added to different html files, the styling does not work and gives the error "Uncaught ReferenceError: kendo is not defined ".

PFA the sample application in which i am trying to maintain views in multiple html files.

Any help for the resolution of the error will be most appreciated.





4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 19 Mar 2013, 04:49 PM
Hi Akshay,

This happens because the page is reloaded by the following code:
window.location.href = "app/view/TaskList.html";

KendoUI Mobile is a SPA framework - mobile application fits on a single web page with the goal of providing a more fluid user experience. Changing the window location breaks this concept.

If you would like to navigate to remote View, please use the navigate method of mobile application. 
app.navigate("app/view/TaskList.html");

In addition, the application should not be re-initialized in the remote view file.
To understand how remote Views work, please read this help topic.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
akshay
Top achievements
Rank 1
answered on 23 Mar 2013, 07:49 AM
Thanks Alexander.

The error is not thrown and able to navigate to next screen using app.navigate method but the function "getTaskList" is not fired for data-show attribute.

<div data-role="view"  data-layout="default" id="idTaskList"  data-show="getTaskList" data-init="initPullToRefreshScroller" data-layout="mobile-tabstrip">
</div>

Sample Application is attached in which app.navigate method is used to navigate to next screen.

Any help will be much appreciated.
0
Accepted
Alexander Valchev
Telerik team
answered on 26 Mar 2013, 05:15 PM
Hello Akshay,

The problem comes from the fact that the script is included in the <head> tag of the remote View file. Note that:

The remote view request will also append (but not initialize) any additional views found in the AJAX response. Inline style elements, inline script elements, and mobile layout definitions will also be evaluated and appended to the application. The elements must be available in the root of the response, or nested inside the body element.
Scripts and styles from the head element (if present) will not be evaluated.

To understand how remote Views work please read this help topic.

In addition, the application is still re-initialized in the remote View file. As explained in my previous post application should not be re-initialized in the remote view file.

Please correct those issues and let me know if the problem still persists.
 

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
akshay
Top achievements
Rank 1
answered on 29 May 2013, 04:35 PM
Thanks Alexander for the help.
It is working with single html file having all references.
Tags
General Discussions
Asked by
akshay
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
akshay
Top achievements
Rank 1
Share this question
or