Response title
This is preview!
Move this topic
SSL and JQM
in jQuery Mobile
•
9 years ago
The page I'm building works well until I make it an SSL protected page. At that point the JQM styling disappears. Is there anything I can do to overcome this problem?
The pertinent head code looks like this:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
1
Replies(13)
Re: SSL and JQM
9 years ago
It's likely failing because you're attempting to load non-secure resources from a secure page. This may or may not work depending on the user's browser settings. Don't include the protocol in your locations so that it uses SSL or non-SSL connections based on the original connection type of your site:
Or you can also host the jQuery Mobile resources on your own server and reference them via a relative (or absolute to your doc root) path.
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
- <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Or you can also host the jQuery Mobile resources on your own server and reference them via a relative (or absolute to your doc root) path.
Leave a comment on bagman's reply
Re: SSL and JQM
9 years ago
Thank you bagman. That does work!
Which browser settings? I'd like to advise users that settings must be correct for the page.
Leave a comment on Fred B's reply
Re: SSL and JQM
9 years ago
You don't need any special browser settings.
Bagman was just pointing-out that without the fix, some browsers might work, and some might not, depending on settings. Some browsers might have a security setting to allow loading non-secure resources from a secure page.
Most browsers no longer support this setting, though.
Leave a comment on watusiware's reply
Leave a comment on Fred B's reply
Re: SSL and JQM
9 years ago
I'm using a two page sequence. The first page has a submit button which takes me to the second page.
I'm using JQM on the first page and not using JQM on the second page.
I have links to three stylesheets in the head section of my non-JQM second page. When I access this second page from the submit button on the JQM first page, none of the stylesheets are working on the second page. When I access the non-JQM second page from a page other than the JQM first page, the three stylesheets are working.
What's causing this problem? Both pages are SSL protected, and my "<form action=" line on the first page uses "https".
Leave a comment on Fred B's reply
Re: SSL and JQM
9 years ago
I'd like to state this more simply.
Going from a JQM coded page to a normally coded page seems to disable my stylesheet links on the normally coded page. Is there anything I can do?
Leave a comment on Fred B's reply
Re: SSL and JQM
9 years ago
It's better to post each question as a separate post.
Pretty hard to diagnose problems without an example:
If you're going from a JQM page to a non-JQM page, you need to use data-ajax="false" or data-rel="external" on the link.
Impossible to tell if this is the problem, without seeing your pages. As well, impossible to tell why it *is* working when linked from a page other than the first one. I'd guess that you have inappropriately used data-ajax="false" where you shouldn't, and haven't used it where you should.
But that's *two* guesses. Better to show us what you have done.
Leave a comment on watusiware's reply
Re: SSL and JQM
9 years ago
Thank you, watusiware, that worked! I used:
echo"<form method=\"post\" action=\"https://www.mysite.com/nextpage.php\" data-ajax=\"false\">";
Leave a comment on Fred B's reply
Re: SSL and JQM
9 years ago
Keep in mind that this is inefficient, ugly, and annoys the user.
If I have to link to an external site or non-JQM page, I try to do so in a separate browser tab. It makes it more clear that the user is leaving your site, solves the "back" problem (the site you link to might block "back"), and once the user does switch back, it will be much faster, as they will just be switching browser tabs and the document won't have to re-load.
Leave a comment on watusiware's reply
Re: SSL and JQM
9 years ago
Thank you for these words of caution, but I'm having no problems. I'm not truly linking to another site. I'm just linking to another page on my site, and once I get to the other page, I seem to be able to freely use the back button. It's all fast and efficient.
I'm purposely sounding confident here in case I didn't fully understand what you said.
Does the fact that I used data-ajax =:"false" instead of data-rel = "external" help this issue?
Leave a comment on Fred B's reply
Re: SSL and JQM
9 years ago
When you link using data-ajax="false" or data-rel="external" (they both do exactly the same thing) the document is reloaded. You will usually get an unavoidable "white flash". You cannot use a page transition.
When the user returns to your JQM page, the document is again reloaded. This means *everything*. CSS, JS, etc. jQuery and jQuery Mobile initialization is repeated, and then your page has to be enhanced.
Contrast this with a normal jQuery Mobile page load. A page is inserted into the document, and (typically) an old page is removed. The new page is enhanced. The CSS and JS don't have to be loaded or initialized, as that is done when you load the first page.
Every time you return from a data-ajax="false" page, it is a complete "do-over".
And, so, it should be avoided if possible. I would try to make the page you are linking-to use jQuery Mobile if at all possible.
data-ajax="false" is jQuery Mobile's "emergency ejector seat". It's comforting to know it is there. It's not a good idea to use it regularly.
Leave a comment on watusiware's reply
Re: SSL and JQM
9 years ago
Thanks for the explanation. I have three pages altogether in my sequence. I'll make them all JQM.
Leave a comment on Fred B's reply
Re: SSL and JQM
9 years ago
watusiware-
I just read the following which brings home your point about not needing data-ajax="false". Markup conventions
When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via ordinary HTTP POST or GET still apply. Additionally, the
id attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. You must be careful to use unique id attributes so there will be only one of each in the DOM. Be sure to pair them properly with label elements via the for attribute. This made me realize that all I have to do is put my stylesheets in the head of my first page, and the stylesheets will work on all my JQM pages. Sorry, I hadn't really understood this is where you were pointing. Now I understand why I need all three of my pages in JQM. I see your point about efficiency - not having to re-load everything.
Leave a comment on Fred B's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Fred B's question
{"z30001523":[14737000004712752,14737000004722314,14737000004722330,14737000004722368,14737000004710587,14737000004724039,14737000004732047,14737000004734037,14737000004739255],"z7664639":[14737000004712863,14737000004712925,14737000004733019,14737000004733027],"z5881376":[14737000004722266]}