Adapter will error when href is undefined

[caseman72]

In iOS - when you click on a link that has an href it pops the address bar down. I found that if you add an link and click on it via JS it doesn't show the address bar (just change_page via ngm-vclick).

But this code - errors later when you do thisUrl.length:

thisUrl = $this.attr( "href" );

So I changed it to this:

thisUrl = $this.attr( "href" ) || "";

[tbosch]

Hi, could you provide a fiddle for this? Which event are you firing on which element? If you trigger the click event on the link, it should have the href attribute set...

By the way, did you try the following approach:

var mod = angular.module('ngm', []); //setup angular app
mod.controller("MainCtrl", function($scope, $location) {
    $scope.click = function() {
        $location.url('#page2');
    }
});

and then:

    <a href="" ngm-vlclick="click()">Page2</a>

Look here: http://jsfiddle.net/ZHKBA/128/

I tried with the iOS simulator, and couldn't reproduce the address bar popping up when clicking. Neither in the normal case with a link link <a href="#page2"> nor with the example above....

Using the $.mobile.changePage directly is not recommended with the adapter. I would use the default $location mechanism of angular instead. By this, you still get history support (back button, ...), which you don't get if calling $.mobile.changePage directly...

Tobias

[tbosch]

Hi, ok, I could reproduce your problem when using external jqm pages. Have a look here: http://plnkr.co/edit/4UXicZwFMjZcg2i582ZL?p=preview

The approach with using ngm-vclick and then changing $location does no more show the address bar when clicking. So you could go with a more "default" approach, instead of clicking a link programmatically.

Does this solve your problem?

Tobias

[tbosch]

Here is the direct link to open the plunk in an iPhone/iOS Simulator, so you can directly check if the address bar is popping down: http://run.plnkr.co/ZbwrCTw7b7iNPim6/

Did work in iOS Simulator 6...

Tobias

[mlegenhausen]

Apart from that I have also the problem in a normal browser. For me the fix was simply to add a check if a href attribute exists.

[caseman72]

We don't use the $.mobile.changePage; the change_page method adds an anchor and clicks it - but we can easily try the $location method.

I still don't see the reason why you need to have href="" just as I don't like class="" in the DOM either - the check for length on an jquery method is problematic as it can return undefined.

[caseman72]

Can you specify a transition with $location ?

[tbosch]

Hi, sorry for the late reply. You can specify a transition when using $location as follows:

        $location.routeOverride({jqmOptions: {transition: 'pop'}});
        $location.url('#page2');            

See here: https://github.com/tigbro/jquery-mobile-angular-adapter#service-location-extensions

[tbosch]

Hi, now I understood: Your external page contained an <a> tag without a href attribute. Would be easier for me next time if you could provide a jsfiddle / plunk...

Thanks for submitting this issue though! Tobias