From the index page of the site, I am loading another page which has 3 divs with the data-role of page.
However, jquery mobile only appends one of the pages to the dom.
I presume the changePage function is grabbing the first div with a data-role of page and inserting it. I wonder if there is a way to get it to insert all the divs with a data-role of page or dialog.
Any help more than appreciated.
thanks
What you are trying to do is currently not possible with JQM, as only the first page from a multipage gets loaded into the DOM.
I would point point you to a link in the JQM docs that would explain this behavior, but there isn't one... I already filed this as issue on Github, so that the Docs at least make clear what you can do and what does not work with multipages.
As I'm stuck with the same issue I started writing a plugin to be able to load multipages (among other things). I still have a few things to sort out, but when it's working I can send you the link.
You can use a "subpage" plugin to get the behavior you desire. Basically one page contains a bunch of subpages, which all get loaded into DOM. The pattern would be:
<div data-role="page">
<div data-role="subpage">
</div>
<div data-role="subpage">
</div>
<div data-role="subpage">
</div>
</div>
The project is available here: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget.
I've personally been having problems with this plugin, but I think for simple scenarios, it works fine.
Also, there is no documentation for it. For example, I still don't know the proper way to call $.mobile.changePage() with this plugin. :)
According to JQM at this page:
"jQuery Mobile currently only supports loading of single page documents via AJAX. To navigate to a multi page document you must disable ajax on the link by adding the data-ajax="false" attribute. There is also a widget to allow for supporting sub-pages by Todd Thompson available at https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget"
You can also add rel="external" attribute to the href pointing to Page B.
rel="external" and data-ajax="false" will force JQM to load the entire page as new. Unfortunately, it appears this removes the ability to use a page transition from PageA to PageB.
Example: Page B
I'm now looking to load Page B with JQM methods instead of relying on the automagic mechanisms. It appears you must use single page templating throughout (as recommended) or pagecontainer load method (essentially the same as single page) if you want hashtag transitions within a "single page", after the DOM is initially loaded. For example, link to a single page, listen to "pageinit" of that page, then use pagecontainer("load"). Make sure the subsequent page (the page your're injecting) is not needed as a direct incoming page.
Related
This appears to be pretty basic but I can't figure it out.
Using a jqm multipage template, I'm trying to allow users to jump from a link one page (id='page1') directly to an image in another page (id='page2').
FIDDLE
It appears I am constrained, by html hyperlinking rules and jqm, to this:
<a href='#page2'>go to image on p2</a>
... which of course jumps the user to the top of page2.
But that's not what I want. I want the user to jump directly to the IMAGE, which is close to the bottom of page2, tagged like so:
<img id='image-id'>
But tagging the link with the image's id (not the page's id), i.e. tagging it like this
<a href='#image-id'>go to image on p2</a>
doesn't work.
I get the feeling I'm missing something very obvious, but can't figure it out.
Any suggestions? Or is this not possible?
I've got a different problem but found this question in my travels... thought I would add an extract from the jquery mobile page:
http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/
Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.
I am building a website for a class project using ASP NET MVC 5, wherein I need a section of the website to display a page from a different website. The goal is to somehow embed that page in my view, so UI interactions are still possible with the embedded page, as if the page was visited directly in the browser (the end effect is that the page is rendered and allows interaction but my website theme always stays around it)
I know one way to do it is to just put it inside an iframe in my View. But I want to know if there is a different solution. My instructor suggested using partial views, but I can't figure out how to achieve the same result. Can anyone suggest a different way to achieve this ? Also, what would be the right way to do this in terms of security (I believe iframe is), but I want to know other's opinion ?
Thanks.
I suggest you use a sandboxed IFrame e.g.
http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
src="https://blah.com/index.html"
style="border: 0; width:130px; height:20px;">
</iframe>
You can tweak how much power the content in the Iframe has (i.e. can it run scripts).
I guess you could also look at using a partial view. My guess is you'd need to use a WebClient instance to download the HTML source of the target webpage, and then pass that HTML into a partial view. But I don't see how any script tags would render correctly for you, which means the page would not be interactive.
From the documentation, http://jquerymobile.com/test/docs/pages/page-links.html
It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
Now, that seems to only apply to GET requests (i.e. via link elements). However, what is the guideline for POST requests? Right now, for the project I am currently working on, if I make a POST request with response that contains multiple N internal pages (lots of divs with data-role="page" and unique IDs), jQuery mobile only loads the first one it sees, and ignores the rest.
I am pulling my hairs out, not sure what to do to work around this. Is there a way to force jQuery mobile to do to full page reload?
Thanks a bunch in advance!
It turns out that data-ajax will work just fine inside the form tag. i.e
<form action="target.php" method="post" data-ajax="false">...</form>
Previously, I thought I had set data-ajax="false". However, it turns out that with the PHP framework (yii) I use, there is a big difference between "data-ajax" => false and "data-ajax" => "false" (former assigns to boolean type, and later is string type). Anyway, long story short, data-ajax is indeed the solution.
I'm playing around with jQuery Mobile and ran into some (for me) strange behavior.
I have a bunch of links each pointing to the same jQM page, #otherpage, but with different values for the URL query string, like #otherpage?q=foo, #otherpage?q=bar, and so on. The change to the other page works fine but the query string sticks between clicks, so if I first click the link to #otherpage?q=foo, and then goes back to the first page, all subsequent page changes to #otherpage will have q=foo, no matter what the currently clicked link's href says.
jsFiddle didn't seem to have support for jQM so I put an example here: http://cpak.se/dump/location-search-test.html
I've tried this in Chrome and Safari on Mac.
I use the query string to pass simple data between pages since I have other code hooked into the pagechange events, that is more or less unaware of what earlier code might have done. If I can't get this working I'll have to find another way to pass data around... :P
Cheers!
/Christofer
Disabling jQm seems to be the easiest solution for updating the url parameters correctly in the browser. E.g. adding data-ajax="false" in the link anchor and not using $.mobile.changePage.
<a href="#page?id=1" data-ajax="false">
In a dynamic app modify the value of href beforehand.
I've looked up for this issue because it seems a little bit weird indeed. There is a open issue about this: https://github.com/jquery/jquery-mobile/issues/2859
Atm jQuery Mobile doesn't recommend using query parameters:
We don't currently support query parameters as part of the hash
fragment, though this is something that's been discussed frequently
internally and is on the feature request list.
They advise to use a plugin like:
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
https://github.com/azicchetti/jquerymobile-router
However, there is a workaround since the data-url of the active page in the DOM DOES change, you can retrieve this with $(".ui-page-active").attr("data-url"); I've tested this on your website and it gave me all 3 uniques URLs
jQuery Mobile by default does not allow passing query-string parameters to internally linked pages. Check-out the very bottom of this documentation page (the second bullet from the bottom of the page): http://jquerymobile.com/demos/1.0rc3/docs/pages/page-navmodel.html
jQuery Mobile does not support query parameter passing to
internal/embedded pages but there are two plugins that you can add to
your project to support this feature. There is a lightweight page
params plugin and a more fully featured jQuery Mobile router
plugin for use with backbone.js or spine.js.
I'm working on a mobile view of our site. I'm trying to implement JQuery mobile but I'm seeing two issues that might prevent me from continuing and hoping some of you have insights.
Many pages are brought up by searches. But when the page is brought up from a search box I can't get it to load as rel='external', thus the page loads via Ajax. Great, except the pages that load are almost always larger pages broken up into data-role='page'. So when the page loads it's unable to navigate within that page, though it does hide the secondary sections. According to the documentation I need to put the rel="external" on the form, but that is not working for me. Is it possible to get the page to load without Ajax via a form submit?
Second question in same topic. In the crawl, walk, run fashion first step is a basic mobile friendly site. But I'm hoping this can also be the foundation for a PhoneGap based version of the site. From what I understand the basic model for PhoneGap will break if pages are not always loaded in Ajax as it will trigger a browser load. Since JQM requires any page with embeded data-role=page sections to be loaded via rel=external, which turns off Ajax loading, does this mean using JQM will preclude using Phone Gap to create the native client later?
Thanks in advance for any replies.
This script below should be put between your jquery min and your jquery mobile min. Otherwise it will not take effect. Adding an extension to the $.mobile with these ajax functionalities turned off may help your issue. All 3 are not needed, but they are all test worthy for your issue.
<script>
$(document).bind('mobileinit',function(){
$.extend( $.mobile , {
ajaxFormsEnabled: false,
ajaxLinksEnabled: false,
ajaxEnabled: false
});
});
</script>
Phonegap is for building phone applications, not mobile websites. It is composed Javascript which talks to specific libraries to interface with the mobile device itself.