I am having a problem getting a simple header message to show up while using Jquery mobile 1.4.2. The message shows on page load then quickly disappears. I cannot figure out what is hiding the message from displaying. Weirdly enough, when I delete the 'panel' from the page the message shows, however I need the panel for the functionality of the page. Also, while messing around with the Jsfiddle I noticed that earlier versions of JQM displayed the message properly. Thanks
Jsfiddle is http://jsfiddle.net/sAKq5/
<div data-role="page" id="pager">
<div data-role="panel" id="addpanel" data-position="right" data-animate="false">
</div>
<div class="header" data-role="header">
</div>
<div data-role="main" class="ui-content">
<h3>Your Table </h3>
<table id="xx">
</table>
<ul id="xxx">
</ul>
</div>
<div class="actionMsg">
<h5> Message holder at length </h5>
</div>
<div class="footer" data-theme="a" data-role="footer" data-position="fixed" class="actionMsg">
<h2>
Powered by
</h2>
</div>
</div>
Adding in the line
z-index: 1000;
into the css allows the message to be shown. If z-index is less than 1000, message still is not shown.
Related
I'm a touch lost - I have taken a popup example from the jquery demo page as a template...
If I put my popup within the first page, it works - I can call it from within js script to open.
Thus... the following does work
<div data-role="page" class="page" id="Menu">
<div data-role="header" data-position="fixed" class="ui-title center">
<div data-role="controlgroup" data-type="horizontal">
<span class='htitle'>Barserver.com</span>
</div>
</div>
<div id="MainContent">
<div id="MenuList"></div>
</div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
I can dynamically open it via
$("#popup").popup("open");
However if I move the popup to another (data-role) page within the same document, it does not get displayed, nor errors in console.log. Can anyone steer me forward? The following does NOT work...
<div data-role="page" class="page" id="OrderList">
<div data-role="header" data-position="fixed" class="ui-title text-center">
<div data-role="controlgroup" data-type="horizontal">
<span class='htitle'>Barserver.com</span>
</div>
</div>
<div id="OrderListContent" class="productdhtml ui-content"></div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
</div>
To avoid misunderstanding - the first code sample works, the second one does not work (meaning no errors, no modal like dialog box gets displayed).
Why?
(All help appreciated of course)
I got it (thanks to #Omar for direction). A coded answer is not easy but I will try draft and share in a few days (I'm behind on my work because of trying to fix this problem).
For the purpose of this note, when I say "this failed" I mean "no popup, no change in address bar, no console error."
I have a form. If operator attempted to navigate away, a test should be done to confirm all data was entered. All my a-href tags had page references, and jquery gives precedence to a-href tags over any other events I had applied. I had not considered the ramifications of this. The result? Form displayed, incompletely filled, operator selects to navigate elsewhere, popup call starts/ends but "failed" and jquery quickly navigates to the page named in the a-href page.
Solution:
When using popups, do not name pages in a-href tags. Thus, when using popups, avoid
<a href='#Page5'>Page 5</a>
and instead
<a href='#' id='page5'>Page 5</a>
and create an event that decides if a popup should be displayed, or if not, that page5 should be navigated to.
I hope that makes sense.
At the moment my mobile app looks similar to the one on the link below:
http://jsfiddle.net/TM6Dt/
with the following code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
Mail
Settings
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
What I'd like to do is have both of the circular buttons on the right side of the header bar. I've tried putting them in a controlgroup div but for some reason this changes them so they are no longer circular - I get square buttons with the icons in the middle. What's worse is they are not even aligned properly! You can see what I mean here:
http://jsfiddle.net/Gd8ZB/
and the code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
<div data-role="controlgroup" class="ui-btn-right">
Mail
Settings
</div>
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
How do I get around this problem? Any help would be appreciated!
I've done that as follows:
<div class="ui-btn-right">
Mail
Settings
</div>
Fiddle
http://jsfiddle.net/TM6Dt/1/
one way to do it is to change position of the first button in first example and move it to the right with following css
style="right: 40px; left: initial;"
I am having a problem with nested popups with v1.4.0.RC.1. It works in v1.3.2. I have a footer, which has a button, which opens a popup, which contains a listview, and one of the listitems opens a popup. Again, in v1.3.2, this works as expected... but not with v1.4.0.RC.1. I understand that v1.4 isn't out yet, but I pose this issue anyway as someone may have some insight that I haven't come up with yet. I have a fiddle for both versions. The code for each is exactly the same. The only difference is that the first fiddle uses the 1.3.2 libraries and the second fiddle uses the v1.4.0 libraries.
Also, I have seen answers linking to a jQM popup page, showing that the page itself indicates that chaining popups isn't allowed. However, that's typically a v1.2.0 of jQM. The popup demo in v1.3.2 doesn't indicate that restriction, and is supported by the fact that it does in fact work (see fiddle below).
That being said, if anybody has any guidance or information, I'd really appreciate it. I've poured through the limited 1.4.0 documentation and the interwebs and the only thing I can come up with is doing a setTimeout within the popupafterclose event to open another popup. That seems like a sloppy hack to me, and I'd like to avoid doing that if at all possible.
Anyway, below is code and fiddles for 1.3.2 and 1.4.0.RC.1.
Thanks!
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.3.2</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.3.2 above
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.4.0.RC.1</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.4.0.RC.1 above
I'm using jQM popup to 'alert' users of something. For example, I make a $.ajax() request and if there's something wrong with the response I shoot a popup.
Something like this:
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
</div>
$("#popupMsg").html(msg);
$("#popup").popup({
history:false,
overlayTheme: "a"
}).popup('open');
It all works fine, but If I change the popup to include a button, this way:
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
Then the link is not styled, and it will just show an 'Ok' link.
If I move the popup to a dialog then it all works, button and all, but since I want the page underneath to be seen, I'd like to keep it a popup.
Am I missing something? I saw a lot of questions about popups/dialogs, but they all refer to clicking a button to show them.
I use jquery-1.8.2 and jquery.mobile-1.2.0.
Edit: the solution to my case is that the popup div must go inside the page div, and not outside of it (as a dialog div would), like this:
Before (wrong):
<div data-role="page">
<div data-role="content">
...page stuff...
</div>
</div>
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
After (right):
<div data-role="page">
<div data-role="content">
...page stuff...
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
</div>
</div>
You need to refresh the jQM markup
http://jsfiddle.net/xvvCA/1/
http://jsfiddle.net/xvvCA/ ( inline button )
JS
var msg = 'Look! A new button!';
$("#popupMsg").html(msg);
$("#popup").popup({
history:false,
overlayTheme: "a"
}).popup('open');
$('#okButton').button('refresh'); // you need to refresh jQM markup
HTML
<div data-role="page">
<div data-role="content">
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
</div>
</div>
Please help,
jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.
<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
Try adding to the anchor the attribute rel="external".
Example:
Description
try giving <div data-role="page" first for your second page
When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!
Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.
Try linking to this page with an external link and you'll find it works fine.