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

Icenium Device Simulator - Refresh / Redraw Issues with JQuery load() function.

8 Answers 106 Views

Report a bug

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

This question is locked. New answers and comments are not allowed.

Keith asked on 19 Feb 2013, 03:23 PM

I am working on a simple demo app to test being able to store each "view" in a separate .html file and then using the JQuery load() function to dynamically load them into the main index.html file at app startup. The intent is to separate the content of each view so that individual developers may work independently and views may be used across multiple projects. In general, this functionality seems to work but I am getting weird refresh / redraw issues with the Icenium Device Simulator. For example, if I update one of the view .html files and click save the simulator updates but CSS / Javascript is not applied correctly to the refreshed page (i.e. buttons are not styled and not clickable). The issue can be corrected on views (other than the main view loaded by default) by clicking the "reload" button on the simulator. I have yet to figure out how to fix the issue on the main default view. I have provided a code snippet below for reference.

index.html
-----------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="tabstrip-home" data-title="Hello World!"><div id="welcomeContent"></div></div>
<div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction"><div id="homeContent"></div></div>
<div data-role="view" id="tabstrip-geolocation" data-title="Geolocation"><div id="locationContent"></div></div>

<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>

<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
<a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
<a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
</div>
</div>
</div>

<script>
$('#welcomeContent').load('views/WelcomeView.html');
$('#homeContent').load('views/HelloView.html');
$('#locationContent').load('views/LocationView.html');
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</script>
</body>
</html>

WelcomeView.html
----------------------
<h1>Welcome!</h1>
<p>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</p>

<div class="buttonArea">
<a id="startNewWorkoutButton" class="button" data-role="button" data-click="startNewWorkout" data-icon="refresh">Start New Workout</a>
</div>

HelloView.html
------------------------
<h1>Say Hello!</h1>
<div id='helloWorldInput'>
<label for="txtName" style="display: inline-block;">Enter your name:</label>
<input type="text" id="txtName" value="" />
</div>
<div id='helloWorldText' style="display:block;"></div>
<div class="buttonArea">
<a id="resetButton" data-role="button" data-click="sayHelloReset" data-icon="refresh">Reset</a>
<a id="submitButton" data-role="button" data-click="sayHello" data-icon="compose">Submit</a>

</div>

<br />
<div class="buttonArea">
<a id="testButton" data-role="button" data-click="sayHello" data-icon="compose">Test</a>
</div>

LocationView.html
-------------------------
<h1>My Location</h1>
<div id="geoLocationContainer">
<div id="myLocation">Unable to get location information. Please check your network connection and try again.</div>
<a id="refreshMap" data-role="button" data-click="getLocation" data-icon="refresh">Refresh Location</a>
<div id="map_canvas"></div>
</div>

8 Answers, 1 is accepted

answered on 22 Feb 2013, 04:58 PM

Hello Keith,

What you need in your scenario is called remote view you can read about Kendo Mobile Remote View in their documentation.

But in short using your example:
1. Leave the welcome view content in-place at the first view and remove the other two views.
2. Change your footer to:

<div data-role="view" data-title="Hello World!">

<h1>App Home</h1>

<div class="buttonArea">

<a id="startNewWorkoutButton" class="button" data-role="button" data-click="startNewWorkout" data-icon="refresh">Start New Workout</a>

</div>

<a class="button" href="HelloView.html" data-icon="share">UI Interaction</a>

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="index.html" data-icon="home">Home</a>

<a href="views/HelloView.html" data-icon="share">UI Interaction</a>

<a href="views/LocationView.html" data-icon="globe">Geolocation</a>

</div>

3. Than make your HelloView.html & LocationView.html like one bellow:
(Each remote view has to have a wrapper with data-role="view" data-title="????")

<div data-role="view" data-title="UI Interaction">

<h1>UI Interaction</h1

</div>

Greetings,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

answered on 26 Feb 2013, 02:40 AM

Ok... the remote views thing is exactly what I was looking for. However, I am still seeing some weird initial state issues with the remote views. In my test app I simply moved the "Geolocation" view into a separate HTML file and loaded it in the manner you suggested. The view did load but the map was not displayed. Once I hit the refresh button the map was properly displayed. I am assuming this is because the remote view is not loaded till it is first displayed so the method used to initial the map did not find the view element to be updated. Is there any way to force these remote views to load at device startup just as if they were all part of the main view?

answered on 19 Mar 2013, 12:29 PM

Thanks for the links. I don't believe they solve the problem. I'm not in control of loading elements from Ajax and I really don't want to turn off Ajax loading of external pages as I want the transitions. Maybe I'm shooting for something that is not possible. If I remember correctly on my last jqm web app, when you link to external pages and then refresh I thought it refreshed back to the initial page. I'm probably missing something but, if a user can refresh the browser and get messed up css, that would be a pretty bad user experience.

I'm not sure what is different with what I have currently for Phonegap app. Right now I believe the issue will only occur during development. It happens in the simulator when Refresh is clicked on an external page and in Icenium Ion when the current app is on an external page and then I refresh with 3 fingers or by QR Code load.

Any thoughts on how to resolve or help me change my thinking. I very well could be thinking about this problem in the wrong way.

Thanks much,
Tom

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Icenium Device Simulator - Refresh / Redraw Issues with JQuery load() function.

8 Answers, 1 is accepted