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".
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....
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> <!-- application views will be rendered here --> </div> <!-- application drawer and contents --> <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> </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"> <!--<label for="Name">Name:</label><input id="name" data-bind="value: data.name" />--> <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></div></body></html>3 Answers, 1 is accepted
0
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
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!
0
Chad
Top achievements
Rank 1
Rank 1
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.
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>0
Hi Chad,
in general, you can use the touch widget (which has no visual effect on the element), and navigate manually in its tap event handler.
In order for the listview link to be "enhanced", it should be the top and only element in the template. Please refer to the following help topic.
Regards,
Petyo
Telerik
in general, you can use the touch widget (which has no visual effect on the element), and navigate manually in its tap event handler.
In order for the listview link to be "enhanced", it should be the top and only element in the template. Please refer to the following help topic.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!