Most of the example sites (like below) that JQM link to use a common navigation system, I'll use this site as an example:
http://www.takemefishing.org/mobile/
When linking to another page that isn't already in the DOM, they use the ajax navigation for example, on the homepage they link to 'Fish Species' with a href of
#/mobile/fish-species.
On click, this actually loads the page into the DOM via ajax from /mobile/fish-species which only contains the <div data-role="page" id="fish-species">... content here ...</div>
Then the address bar is updated to /mobile/#/mobile/fish-species.
If you go directly to /mobile/#/mobile/fish-species (e.g. by using the refresh button or a direct link), it loads the homepage with all the CSS, JS etc etc, and then via ajax loads /mobile/fish-species into the DOM seemlessly.
This structure/system seems to be the common method used on JQM sites, for example Walt Disney and Standford University.
My question is how are they making this magic happen? I suspect JQM is doing almost all of the work, and there is just some config option or flag that I am missing.
Here's what I've tried
I have a basic JQM homepage /mobile/index.html with the DOCTPYE, <head> section with CSS, JS etc etc included, and a link to another page page2.html:
<li>Page 2</li>
Page 2 is similar to the 'Fish Species' page whereby it just containts the:
<div data-role="page" id="page2.html">... content here ...</div>
Now, when I click the link on the homepage, page2.html is loaded into the DOM via ajax and shown. The problem is the addressbar shows:
/mobile/page2.html
If I then click the browsers refresh button, or navigate directly to /mobile/page2.html, of course the browser just loads page2.html containing only the page <div> and no head section or CSS/JS included.
What am I missing to get the link to show #/mobile/page2.html in the address bar when loaded, and then if refreshed I want to load the homepage then pull page2 in via ajax, just like the example sites do?
I am using the latest JQM at http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
Jquery Mobile will interpret navigation to the address #address as navigation to the page named address
This means that you can define in your single index.html two pages, for instance
<div data-role="page" id="index.html">link to JQM page2</div>
<div data-role="page" id="page2.html">... content here ...</div>
Clicking on the link in the first page will load the content of the second page and update the location displayed in your browser's address bar accordingly.
This is the standard JQM approach, used for instance in the stanford website you linked to.
The Disney and Fish websites look like they are doing things slightly differently as they apparently dynamically generate the target page by binding to the pagechange event, analyzing the target address and acting accordingly. You can see more details on dynamically generating pages in the jquery mobile docs.
Related
is there any possibility to make smooth slide transition between two seperate html files?
Like for example.
On one html is
Link
and after clicking this link page is not reloading, just sliding to the second file?
You have to load the second HTML file into an iFrame or into a DIV by ajax, then slide it into view. You can use jQuery for that and for easy access to animations.
You may also would like to update the URL of your page, for that you can use location.hash to do it without reloading the page. You can also check for observehashchange plugin for jquery to check for the hash change when a user changes the URL.
You can view a sample here.
To have Google access the pages, you can add a sitemap.xml to your site to describe the pages and you may also have to setup webmaster tools to provide Google with useful information about your site. Here you can add the links and Google will got it. I have a page where more than 5000 links are seen by Google, however they aren't on any page by default.
But if you want to have normal <a> links on your page, you can use a simple jQuery to trigger the animation instead of going to the link.
Go to page 2
Go to page 3
Go to page 4
<script>
function LoadPage(page) {
//Put your page loader script here
}
$(document).ready(function(){
$(a).click(function(event){
event.preventDefault();
var page = $(this).attr('href').substr(1);
LoadPage(page);
});
});
</script>
i'm having a problem with jqueryMobile popup widget.
HTML (via jquery mobile Site):
<a id="testId" href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
besides that on the page is an MVC3 Pager:
#Html.PagedListPager(Model.Items, page => Url.Action("ListA", "List", new { page }))
all the scripts are loaded, jqyerymobile is loaded (checked using $.mobile)
the test scenario:
i open a page:
List/ListA
and click on a link to show the dialog. - Works
i change the page of the paged List, so my URL changes to
List/ListA?page=2
i click on the show dialog link - nothing.
i go back to page 1 of the paged list, click show popup, Nothing.
But:
when i enter a page URL like List/ListA?page=2 and load the page from scratch ( like a new tab, or window) , the popup works on this page, until pagesList page change.
when on step 2 i force the reload of the page by using Ctrl+R / Crtl+F5 (depending on the browser) it starts to work on this page.
tried also all combinations of
$('#..').popup('open')
.popup('close'), etc,
It all points me to thinking, that some part of initiation like creating jquerymobile widgets fails on pages with &page=something.
the markup is all there, selectors correctly select the popup element, but open simply doesn't work.
Or maybe when the page is reloaded on a different paged List position, some objects remain in the browsers context what prevents them from being re-created on new page, hence some valid, but not working references.. i don't know.
Can anybody provide me with come clue, to why this is happening?
jquery mobile version: 1.3.1
So I'm working with a few multipage Jquery Mobile documents that I want to be able to navigate between but not leave the WebView created by the mobile web app and still have the transitions. I've come across Todd Thomson's subpage widget and basically couldn't understand how to set everything up (visual learner and there are no template or demos on his github, no worries Todd if your out there).
So my question is, when you navigate from index.html to a multipage Jquery mobile document,page1.html via ajax is it possible to clear out what remains from the index.html and load the rest of the page1.html after the transition?
When you link from index.html to page1.html which is a mutli page document you need to add the attribute rel="external" to the link. This clears out the dom for you to allow linking between the multiple pages in the document via the # anchors.
This is an issue I ran into before and I am still unsure as to why it happens.
The page in question is - http://nexrem.com/dragontimer/testdir/mobile/index.html
When you hit the Select server button, the page flashes the content that should be there, then its blank! One way I know this can be fixed is by adding data-ajax="false" to the link; however if I do that, then I run into another problem: on iPhone if I add the page to my home screen and then run it - click the 'Select Server' - opens up a browser instead of staying within the web app.
My goal is for users to be able to add the page to their home screen, with no url bar and just run all pages from within. It seems that having <meta name="apple-mobile-web-app-capable" content="yes" /> and the data-ajax="false" together isn't working out.
So basically 2 things:
How can I fix the screen flashing and displaying blank (unless refreshed)
or how can I have the web app with no toolbar and not open the browser every time user clicks buttons?
Thank You
Edit: Here is the code for index.html and servers.html
index.html - http://pastebin.com/Qh5s7QRp
servers.html - http://pastebin.com/Exv2MJrS
In your file index.html, include rel="external" instead of data-ajax="false" inside the definition of your link Select server.
So, you should have this instead:
Select server
You may also need to replace every data-ajax="false", that you included in the <a> links of both your HTML files index.html and servers.html, with rel="external".
Check the online doc for more information about rel="external" at http://jquerymobile.com/test/docs/pages/page-links.html :
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Hope this helps.
The question might be slightly hard to understand, so I'll explain it more verbosely:
Say I have a mobile site on a website and the root of the site is http://www.site.com/mobile/
If I load up this page without any hashes in the URL, then I get one div with data-role="page" in the DOM. If I then click a link to another page, which might take me to the URL http://www.site.com/mobile/#/mobile/contact.html, I get another data-role="page" link for that page is inserted into the div. That's all fine and correct.
However, if I then follow a link on this page back to the home page (but not the back button) and get the URL http://www.site.com/mobile/#/mobile/, then rather than jQuery Mobile reusing the same data-role="page" div that was there when the page was first loaded, a new one is inserted into the DOM.
This has the effect that any JavaScript bound to the 'pagecreate' event that targets specific ids within the home page doesn't work as the ids are ambiguous.
One thing I noticed when inspecting the generated HTML is that a data-role="page" div loaded directly (not through a hash Ajax load) has a data-url attribute that is equal to the id of that div, but when it is loaded through a hash, then data-url is equal to the hash value. I wonder if this inconsistency is causing the issue?
jQuery Mobile uses data-url for internal linking. It will typically populate these itself and change target the data-role="page" containers using the hash links. I suggest that any generated page have the data-url pre-populated by the server (i.e. do jQuery's job for the first page that the user lands on - if they land on the homepage, populate the data-url field with the homepage information, etc).
For example:
<div data-role="page" id="home-page" data-url="<?php echo $_SERVER['REQUEST_URI'];?>">