+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / jQuery Mobile in Page Templates

jQuery Mobile in Page Templates

8 posts, 0 answered
  1. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    07 Jun 2014
    Link to this post

    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.

  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    07 Jun 2014 in reply to Samir Vaidya
    Link to this post

    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...

  3. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    07 Jun 2014 in reply to Steve
    Link to this post

    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: https://trcacademy.com/students/mobiletemplate

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

  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    07 Jun 2014 in reply to Samir Vaidya
    Link to this post

    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?

  5. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    07 Jun 2014 in reply to Steve
    Link to this post

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

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

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

  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    07 Jun 2014 in reply to Samir Vaidya
    Link to this post

    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.

  7. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    11 Jun 2014 in reply to Steve
    Link to this post

    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.

  8. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    11 Jun 2014 in reply to Samir Vaidya
    Link to this post
    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
8 posts, 0 answered