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

Hyperlink to remote views not loading remote view within layout in Index.html

3 Answers 276 Views

View

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

Chad asked on 08 Sep 2014, 07:09 AM

I can't figure out why if you have a hyperlink to a remote view as a drawer item, it will correctly render the remote view within the Index.html page and have all the copied elements from the layout...i.e. the header and script references, etc.

See link in drawer item below: "views/business.html?businessId=3".

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/main.css" rel="stylesheet" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu29iUhQeU6HuCPhv4cehlkdWaEn0H-5E&sensor=true"></script>

<script src="scripts/app.js"></script>

</head>

<body id="body">

<div data-role="layout" data-id="main">

<div data-role="header">

<div data-role="navbar">

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

<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>

</div>

</div>

<div data-role="drawer" id="appDrawer" style="width: 200px" data-title="Navigation" data-position="left" data-swipe-to-open="false">

<div data-role="header">

<div data-role="navbar">

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

</div>

<ul data-role="listview">

<li>

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

</li>

<li>

<a href="views/map.html">Map</a>

</li>

<li>

<a href="views/settings.html" data-icon="settings">Settings</a>

</li>

<li>

<a href="views/contacts.html" data-icon="contacts">Contacts</a>

</li>

<li>

<a href="views/business.html?businessId=3" data-icon="contacts">Business Test</a>

</li>

</ul>

</div>

</body>

</html>

But, if I put his same hyperlink in another view, it will navigate to that view, but it will NOT copy all the layout elements like the head section with the script references. I just get the html elements of the remote view....

<html><head></head><body><div id="businessDetail" data-role="view" data-title="Business Details" data-layout="main" data-model="APP.models.business" data-init="initBusinessDetails">

<img style="float:left;width:50px;margin-right:5px;" data-bind="attr: { src: data.image_url }">

<div style="float:left;display:inline-block;">

<span data-bind="text: data.name"></span><br>

<span data-bind="text: data.address1"></span><br>

<span data-bind="text: data.city"></span>, <span data-bind="text: data.postal_code"></span>

</div>

</body></html>

3 Answers, 1 is accepted

answered on 08 Sep 2014, 07:54 AM

Hi Chad,

the behavior you describe is how the mobile application navigation works. The mobile listview link items (the drawer menu in your case), the mobile buttons, and the tabstrip tab items taps are handled automatically by the mobile application. Most likely, the link you refer to is not a button or a listview item - so its click will perform a "regular" navigation to the remote view, which includes a full page reload.

Regards,
Petyo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 08 Sep 2014, 11:12 PM

Thank you for your response Petyo. I have 2 follow up questions.

1.) If you just want to display a simple hyperlink that is not a button or listview, how would you navigate to it such that it mimics that of a button, etc.?

2.) In my case, this is a hyperlink within a listview template. How should it be formatted to acheive this "automatic" navigation you mention.

<div data-role="view" data-title="Contacts" data-layout="main"

data-init="loading" data-model="APP.models.contacts">

<ul data-role="listview" data-style="inset" data-template="contactsTemplate"

data-bind="source: ds"></ul>

</div>

<!-- this is the template used by the listview. template items are automatically

wrapped in an <li> by Kendo UI Mobile

-->

<script type="text/x-kendo-template" id="contactsTemplate">

<img style="float:left;width:50px;margin-right:5px;" src="#: data.image_url#" />

<div style="float:left;display:inline-block;">

<a href="views/business.html?businessId=#: data.id#">#: data.name #</a><br />

<div>#: data.address1#</div>

<div>#: data.city#, #: data.postal_code #</div>

</div>

</script>