Reload page not working when page id is in URL

[marcorinck]

Hi,

I'm playing around with current master version of this adapter and am trying out the new routing features.

Something still happens which I didn't understand in current stable version either.

Look at this fiddle: http://jsfiddle.net/marcorinck/WmPYT/2/

Links in content of pages use normal jqm link via "#pageId". Buttons in header use the routings defined in the app. Both are working when you load this code in a separate file, the buttons in header don't work in the fiddle, though.

BUT ...

when either variant of link is used and the page-id is visible in the URL you can't reload the page anymore via browser.

When using a jqm link the url looks like expected, f.i. "index.html#zwei" but when I reload I get an exception in console:

Uncaught TypeError: Cannot read property '1' of null

When clicking a button in header which is using angular routing the url suddenly looks like this: "/zwei" and when I reload the page of course the server can't find it as the html file is omitted from the url.

How do I use routing links correctly? Or are you still working on that?

Thanks!

[tbosch]

Hi, this is related to the the html5 history support of angularjs. By this, angularjs is able to change the url to non existing pages but internally still stay on the old route. Please have a look at the html5 history api. You can deactivate this behavior though using the following code:

        var ng = angular.module("ng");
        ng.config(['$provide', function ($provide) {
            $provide.decorator("$sniffer", ['$delegate', function ($sniffer) {
                $sniffer.history = false;
                return $sniffer;
            }]);
        }]);

By this, angularjs will always just update the hash of the url, but not use the history api to change anything else.

Could you try this?

Tobias

[marcorinck]

Yes that is working much better, though not without problems:

both link types (jqm and angular routes) load and display the first defined page in the HTML page and only after you this first page (very shortly) it' navigating to the page given in the URL. If a transition is set for navigation, its VERY visible for users.

For a better example I have uploaded the example from the fiddle to my domain so you can see it easier: http://entwicklertagebuch.com/jqm.html

[tbosch]

Hi, sorry, I didn't really get the problem... Your page is now working as follows: If you use the buttons in the header, you get a flip navigation as defined in the routes (also with the browser back button). If you use the links in the page body, you get the default transition, as there you are using hashes (e.g. #main2), but the routes are defined for paths (e.g. /main2).

As far as I can see this works as expected. Could you check again?

Thanks, Tobias

[marcorinck]

Yes you are right, this is working as expected. Sorry, I didn't make myself clear.

If you really reload the page with the browser (F5) you first see the first defined page in the HTML and then the transitition to the page in the URL.

f.i. this URL: http://entwicklertagebuch.com/jqm.html#/jqm.html#zwei

First you see the content for "main" page and then the transition to "zwei". I would expect to only see the content for "zwei".

On desktop browsers and dsl connections this works really fast, so maybe you don't get when not really looking into it, but on more complex pages with mobile browsers and mobile connections its much more visible.

[tbosch]

Hi, this should work now, I created a test for this. If it does not work for you, please reopen the ticket.

Thanks, Tobias

[tbosch]

Hi, this should now also work without the path mentioned above!

Tobias