Most online help I find only regurgitates other websites which is frustrating and time consuming. Then, many times they speak gobbly-gook language that even I, a programmer of over 30 years cannot interpret. There are so many languages to merge that I cannot be an expert at all of them. Here, I try to keep the explanations simple for a less-than-expert programmer can understand.
That said, this article is written for the mobile website developer who understands the basics of jQuery Mobile. If you need help understanding the issues herein, then please visit the jQuery Mobile website for the background.
I had to rush to get our 100% custom website mobile ready because the major search engines would demote us if our website wasn't abiding by THEIR standards. Many points are good however, if we were to follow them to a "T", all websites would lose their branding and look the same.
jQuery mobile was my chosen helper program (aka, "higher programming language") to accomplish this goal. It was easy to understand and had nice results. However, there are some nuances that are not explained in any "getting started" with jQuery mobile tutorial.
First was how it really behaves once programmed. For example, not using data-ajax="false" created problems that were not succinctly explained in any real tutorial. Let me explain.
The mobile site was started and the links were not working. It took hours to find the answer with an explanation. Even the jQuery Mobile page listing the Data Attributes doesn't explain
jQuery Mobile expects the links to be from id="page1" to id="page2" (See page container for the fule html code.).
Thus, "external" pages means anything not going a data role page
So, manually use data-ajax="false" in your <a href> tag for links not going to a data-role="page" section of the current doc.
I advise to manually do this and not globally, otherwise other places that need the data-role="ajax" will not work properly, such as forms.
That said, this article is written for the mobile website developer who understands the basics of jQuery Mobile. If you need help understanding the issues herein, then please visit the jQuery Mobile website for the background.
I had to rush to get our 100% custom website mobile ready because the major search engines would demote us if our website wasn't abiding by THEIR standards. Many points are good however, if we were to follow them to a "T", all websites would lose their branding and look the same.
jQuery mobile was my chosen helper program (aka, "higher programming language") to accomplish this goal. It was easy to understand and had nice results. However, there are some nuances that are not explained in any "getting started" with jQuery mobile tutorial.
First was how it really behaves once programmed. For example, not using data-ajax="false" created problems that were not succinctly explained in any real tutorial. Let me explain.
The mobile site was started and the links were not working. It took hours to find the answer with an explanation. Even the jQuery Mobile page listing the Data Attributes doesn't explain
- jQuery Mobile treats links as if they were an ajax call to another "page container", or
.<div data-role="page" id="page1"> - Each "page" is intended to have more than one page loaded as well in the data sent to the mobile device.
jQuery Mobile expects the links to be from id="page1" to id="page2" (See page container for the fule html code.).
Thus, "external" pages means anything not going a data role page
<div data-role="page" id="page1">, but a new html page.
So, manually use data-ajax="false" in your <a href> tag for links not going to a data-role="page" section of the current doc.
I advise to manually do this and not globally, otherwise other places that need the data-role="ajax" will not work properly, such as forms.
No comments:
Post a Comment