Problem loading remote views

[Ronnie]

Hello,

I've recently updated to the latest build of Kendo Mobile.

I have been working on integrating the mobile framework into a CMS that has a dynamically generated navigation and objects. One of the things I am struggling with the most is the use of hashtags within the URL's.

For example:
I have a dynamic navigation that outputs the tabstrip nav like this:

<div data-role="footer">

                <div data-role="tabstrip" id="custom-tabstrip">

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

                 

               <a href="/gallery/" data-icon="camera">Gallery</a>

                 

               <a href="/blog/" data-icon="compose">Blog</a>

                 

               <a href="/contact/" data-icon="globe">Contact</a>

                 

               <a href="?mobileFormat=false" data-icon="action">Full Site</a>

                </div>
</div>

Each href is a dynamic page generated by the CMS. Unfortunately, whenever a link is clicked, Kendo insists on adding a hashtag in the URL, thinking it's a local view (i.e. http://kendo.themodmedia.com/#/gallery). I've even tried using absolute URL's in the href and the output is like this: http://kendo.themodmedia.com/#/http://kendo.themodmedia.com/gallery.

Is there a way to tell Kendo that if the href does not start with a hash tag, then it is not a local view?

Another example is that the CMS contact form outputs a string appended to the URL when the form is submitted. Something like
"?nocache=1#form1234567890" which jumps to a div of that id that displays the form response (i.e. "Thank you!"). The problem is that because that hash tag is in the URL, Kendo tries to load it as a local view, which doesn't exist.

Is there a global way to tell Kendo "If the div contains a data-role of "view" try to load a view; if not, just behave normally"? It just seems like Kendo is trying to force everything into a view and forgets that hash tags are still used for other things within a website.

Here is the demo site: http://kendo.themodmedia.com?mobileFormat=true (once the URL is loaded, you can remove the ?mobileFormat=true string).

Thanks!
Ronnie

[Petyo]

Hello Ronnie,

Upon navigation, Lendo UI puts both remote and local views' paths in the segment part of the URL - if you check the browser console, there should be ajax requests performed to fetch the remote views.

Unfortunately, this conflicts with the browser built-in anchor behavior - there is no workaround for this behavior currently - if you need to put a certain element into focus, you may look into jQuery scrollTo method.

On a side note, the app you refer to suffers from a common problem - application gets re-initialized in every remote view loaded, resulting in multiple hash tag change listeners - the visible defect from that is that pages slide multiple times on top of each other. The mobile application should be initialized only once - in the initial app view.

All the best,
Petyo
the Telerik team

[Ronnie]

Hi Petyo,

Thank you for the quick response. So if I understand you correctly, if I re-worked my implementation to have the homepage contain the markup for the layout, then have each of the sub pages only contain the "views", this might work better? I am just trying to figure out a good structure that will work with Kendo that doesn't involve having each "view" loaded on the initial index page.

Do you have an example of a directory structure I could refer to that does this? 

Thanks!

[Alexander Valchev]

Hello Ronnie,

I am just trying to figure out a good structure that will work with Kendo that doesn't involve having each "view" loaded on the initial index page.

This is not possible. As Petyo explained, remote Views are fetched via Ajax requests and injected inside the index page. For more information please this help topic. KendoUI Mobile is a single page application, if you do not load external views inside the index page, the browser should change its location which basically will destroy the single page architecture.

So if I understand you correctly, if I re-worked my implementation to have the homepage contain the markup for the layout, then have each of the sub pages only contain the "views", this might work better?

Yes this should work well. Do not forget that the mobile application should be initialized only once - in the initial app view.

Kind regards,
Alexander Valchev
the Telerik team

[Ronnie]

Thanks Alexander,

I am starting to get a little more traction with this...

The only issue I have now is wrapping my head around file paths... If my application is in a subdirectory, and I try to load external views, the request fails. For example, if my site is located at www.example.com/kendo, and I try to load an "about" page, the actual URL would look like this: www.example.com/kendo/about. In the Kendo AJAX request, the path looks like this www.example.com/kendo/#/kendo/about and does not load the view.

If I load the application from a top level domain, this works a little better, however 2 things happen: the "highlighted" icon on the tab strip starts getting confused after I click back to the homepage and if I try to go to other paths of pages (ie /about/our-team) the page loads without the framework.

Another question I have, is what if a user landed on the "about" page without going to the homepage first? How would Kendo know to load the application?

Are there any examples of Kendo Mobile successfully integrated into a CMS that I could take a look at? Maybe I'm just barking up the wrong tree here ;-)

[Alexander Valchev]

Hi Ronnie,

Mobile application does not require any 'special' way for defining file paths. Paths are standard - "../" leads to the parent, "/" to the root and "foo/" to a child directory. When a remote view is loaded, you will see a hash tag in the address bar:

www.example.com/kendo //application url
www.example.com/kendo#foo.html //remote view named foo

The application URL cannot change from www.example.com/kendo to www.example.com/kendo/about because that will cause reload of the page.

Another question I have, is what if a user landed on the "about" page without going to the homepage first?
The application should be able to resolve direct link to one of the Views. Did you tested this? What problems you observe?

I am afraid that we do not have samples that demonstrate KendoUI Mobile integration with CMS. 

Regards,
Alexander Valchev
the Telerik team