jquery-mobile-angular-adapter Route Example

[jvelasco86]

Hello,

I'm trying to implement the jquery mobile adapter but when I do click on any link always says: "Error loading page".

I've been looking at examples (this is one: http://plnkr.co/edit/DNGiT83csWMmfYnHXOop?p=preview) but has the same problem.

Watching this example, what is the problem? Where I can see a complete example that works well?

thank you very much

[cpt-pete]

Hello,

It works if you change

tgt: "#/list", 

to

tgt: "list",

See http://plnkr.co/edit/HV3BPhGZdKr3Sm1HHNLw

If you want to use hash bang urls instead of html5 ones you can. But you need to specify this in the config:

app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
       $locationProvider.html5Mode(false);

Your links in the html would then need to look like :

 <a href="/#!/list" data-role="button">Employee</a>

However I'm not sure if this works in Plunker because it uses an iFrame to display your content.

[jvelasco86]

Hello petergledhill,

If I try the example show me the same error.

Thanks for help

[cpt-pete]

Ah, in that case I think the problem is with Chrome. If you check the console you should see the message

"Refused to execute script from 'https://github.com/tigbro/jquery-mobile-angular-adapter/raw/master/compiled/jquery-mobile-angular-adapter.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. "

So Chrome can't use files from Github because Github reports script files as being plain text. I think Github changed is recently to stop people using it as a CDN. There's probably a way of tricking Chrome into using the file but I'm not sure.

Other 'solutions' include using Firefox or hosting the file yourself somewhere else.

Good luck!

[tbosch]

Hi, here is a working plunker: http://plnkr.co/edit/0PCsfWHRVBHzOoBGu5Em?p=preview

I changed the url for the adapter to the following: https://rawgithub.com/opitzconsulting/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter.min.js. By this, Github transfers it with the correct response type "text/javascript".

Furthermore I changed your routes to use tgt: "list" instead of tgt: "#/list".

Hope this helps, Tobias

[tbosch]

P.S.: Just as a hint: If you have problems in a plunk or a jsfiddle, first look into the dev tools :-)

[wazzzzza]

Hi It displays a blank screen on IE7, please tell me how I can make it work with this browser ? Thanks

[tbosch]

Sorry, that's not possible and it also makes no sense as JS in IE7 is really slow :-(