jQuery Mobile in Page Templates

I have been creating jQuery Mobile Pages in Sitefinity.  However, I have found a major problem in the ability to use Page Templates in conjunction with jQuery Mobile.

When I add the CSS and appropriate JavaScript links in the Page Template and then subsequently add my User Control to the actual Sitefinity Page, I can see that the CSS and the appropriate jQuery Scripts are being added to the page, however, when I attempt to render the Sitefinity Page, the jQuery Mobile CSS is NEVER applied to the screen!

The only way I have been able to reliably get my Sitefinity Pages to render is by adding the CSS and JavaScript links for jQuery Mobile directly to my Sitefinity Pages rather than basing it on a Page Template and then simply adding my User Control to the Sitefinity Page that uses the jQuery Mobile Page Template.

How do I rectify this so that I can simply manage all of my CSS and JavaScript links to jQuery Mobile solely in the Page Template?

I am using Sitefinity v. 7.0.

Can you post a video or something, it doesn't make much sense...if the css is loaded and you've validated it in firebug then the only thing stopping it from rendering would be if your theme classes are overriding the mobile styles...

I am attaching 2 screenshots of the issue.

It seems that I have isolated the issue.  It seems to have to do with rendering over SSL.  In my Page Template, I have linked to my CSS and JS files for jQuery Mobile are are unsecure.  However, the Page is secured by SSL.

When I include the CSS and JS directly in the SItefinity Page, it renders just fine.  It is only when it is in the Page Template that it fails to render.

Here is also a sample Url to view the issue: trcacademy.com/.../mobiletemplate

This is a working Url with the CSS and JavaScript embedded directly on the Sitefinity Page: www.trcacademy.com/.../my-class-schedule

Not doubting that it happens by any means...but I need to see firebugs net and\or console tabs to see why...

 Certainly if you're delivering the resource via http://site/file.css over https the browser will shut it down...are you using relative links or absolute?

Here is also a sample Url to view the issue: trcacademy.com/.../mobiletemplate

This is a working Url with the CSS and JavaScript embedded directly on the Sitefinity Page: www.trcacademy.com/.../my-class-schedule

I even converted the Page Template to render from the jQuery CDN but the issue still occurs.

Yeah it's the same problem I said...see attached

You can't load http content in https

The difference I see between the two URLs you sent is that one is loading from a cdn or external site (in the image) where the other is loading the resources from your site (relative) so the https is prefixed to the resource.

Thanks.  I just changed the Url in my Page Template to https:// instead of http:// and that seemed to work.

It is unfortunate that I have to create a Page Template to support https separately from one for all pages, but at least there is a workaround available.

You could also just wrap up a quick widget\control or use javascript to inject them in with the proper prefix instead of a whole new template eh