I am looking for a somewhat slick solution to have an "in-page" dialog box on one of my JQM pages. I am trying to avoid leaving the page, because the dialog popup is a "lookup" that helps a user populate a form field. I don't want to leave the actual page, so to not lose any other information the user has already entered.
My first attempt was using the simpledialog2 plugin, which I use on other parts of the site for popup menus. While it works great for basic links, it gets really clunky on longer lists. It feels very limited when it comes to sizing and especially scrolling.
I somewhat like the built-in JQM implementation of the dialog popup for long multiselects. To give you an idea, take a look at this jsfiddle
Does anyone know how this dialog popup is implemented and if I can call the same method in some way? If not, does anyone know of alternatives to pro due such an "in-page" dialog?
Any help is appreciated.
PS: I can't use the multi-page template in JQM, because the site is built as a web app and I am relying on the AJAX loading of individual pages, which the multi-page template doesn't support.
The dialog you illustrated in your jsfiddle can easily be called in its own page. You can either put data-rel="dialog" in an anchor tag dialogor you can add data-role="dialog" to your page container. Here is an example
dialog.html
<div data-role="dialog">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
Also note that they are planning on producing the in page dialogs I believe your looking for in JQM v 1.2 . Here is a preview of that http://filamentgroup.com/tests/popup/docs/pages/popup/index.html. So I guess if your really patient you'll get exactly what your looking for.
Here you need an undismissible popup rather than a dialog.
<div data-dismissible="false" data-role="popup" id="myPopup">
<span>Content...</span>
</div>
Now in javascript call,
$('#myPopup').popup().popup('open');
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.
Please can somebody explain in more detail what $.mobile.hashListeningEnabled does when enabled/disabled in jQuery Mobile?
I have tried debugging the source, but there are some bits of code I do not fully understand. And the documentation is a bit abstract (https://api.jquerymobile.com/global-config/):
jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself or use simple deep-links within a document that scroll to a particular id.
The reason I ask, is because I am having problems on iOS 9 with <select data-native-menu="false"> elements. If this list too long, jQuery Mobile creates a full-screen dialog.
But it closes straight after displaying. I have been looking around and noticed somebody else has the same problem: JQuery .popup("open") not working properly on iOS 9 device.
One answer suggested seems to work OK for me - which is to set hashListeningEnabled to false:
$(document).on('mobileinit', function () {
$.mobile.hashListeningEnabled = false;
});
But I am not comfortable rolling this out to production until I understand what exactly it does.
$.mobile.changePage seems to still function.
You can have multiple pages in one html file. And you can go to "another page" even if that page is actually another div with data-role="page" in it.
http://demos.jquerymobile.com/1.4.5/pages-multi-page/
So, if you are using this type of navigation, you are screwed.
Apple guess that somebody could make an XSS attack using hash.
/pages-multi-page/#two
popups are using hash also: /pages-multi-page/#&ui-state=dialog
I built a jQuery Mobile Page, which consists of several different Pages (I don't use divs but pages to load content like in a "traditional" Website.
If a page is loaded without ajax (First Page first load for example or with rel=external) the pageshow event is triggered. If a page is loaded with a jQM Ajax request, the pageshow event is not triggered, does anyone have any idea how to solve this issue?
Thanks in Advance
John
The Solution was, as Omar stated, to put the javascript
$(document).on('pageshow',function(e){/* Code here */});
into the data-role="page" div.
Thanks!
In my game app I use :
<div id="player_screen_page" data-role="page" data-dom-cache="true" class="background">...</div>
construction to keep previously-visited page. But after use cache I need to delete it. I didn't find answer how to do this on the Internet.
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.