I'm having a very strange issue...
When I click in a button that is disabled, the header scrolls up... (demo below)
Why this happen?
Demo
Here is the code:
<div data-role="page" data-theme="b" #TempData["DataUrl"]>
<div data-role="header" data-position="fixed">
MyApp
</div>
<div data-role="content">
<div style="height:300px">Content</div>
<div class="controlGroupButtons" data-role="controlgroup">
<a class="Button1" data-role="button">Marcar</a>
<a class="Button2" data-role="button">Desmarcar</a>
</div>
</div>
$(".Button1, .Button2").buttonMarkup().addClass("ui-disabled");
Just add data-tap-toggle="false" to the header div and the problem will vanish! Because when the buttons are disabled, the click will be trigger tap event. Once Tap event is triggered, it will show/hide header.
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.
given the example below
<div data-role="popup" id="popupDialog" 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 now
delete it tomorrow
delete it next week
</div>
Then the following javascript code used to open the dialog
$("#popupDialog").popup("open");
Can somebody tell me how do I tell which button was clicked ?
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>
Anytime I put in a simple footer bar, instead of docking at the bottom of the screen, it floats in the middle, halfway up the screen. My code is as simple as is permitted:
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the search methods from the following table.</p>
</div>
<div data-role="content">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
</div>
<div data-role="footer">
<h1>Hey guys!</h1>
</div>
</div>
</body>
This results in a nice header and three nice button links, followed immediately by a footer in the middle of the screen! Why would it appear there instead of attaching to the bottom of the viewport?
try this one
<div data-role="footer" data-position="fixed">
<h1>Hey guys!</h1>
</div>
As of JQM 1.3, you can use the data-position="fixed" in the footer div to achieve this:
<div data-role="footer" class="ui-bar" data-position="fixed">
<h4>I am a fixed footer!!</h4>
</div>
However, the footer seems to be floating on top of the content (like full screen background image) rather than being applied at the bottom of the image.
While #stay_hungry has a solution as well the problem is the content
<div data-role="content">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
</div>
The footer is applied after the content and is not fixed to a position by default, so if your content does not fill the screen your footer will appear in what looks like the middle of the screen.
Example:
http://jsfiddle.net/ZLMQk/
Now add some content to push the footer down the page:
http://jsfiddle.net/ZLMQk/1/
And more content:
http://jsfiddle.net/ZLMQk/2/
Using the Fixed Position:
http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed.html
Or Persistent option:
http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-a.html
is also an option that might work for you