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

4 posts, 0 answers
  1. Chad
    Chad avatar
    29 posts
    Member since:
    Nov 2012

    Posted 08 Sep 2014 Link to this post

    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 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>
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 08 Sep 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Chad
    Chad avatar
    29 posts
    Member since:
    Nov 2012

    Posted 08 Sep 2014 in reply to Petyo Link to this post

    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>
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 10 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready