Hi I have following HTML structure for my Android app with PhoneGap and JQM.
<body>
<div data-role="page" id="screen">
</div>
<div data-role="page" id="config" data-theme="a">
</div>
</body>
I am showing a time counter on #screen and some configuration to #config page. On touching anywhere on #screen stops counter and shows #config screen.
'#config' has a 'START' button on clicking which shows #screen again and starts counter.
To handle this I am using
$('#screen').bind('vmousedown', //code to show #config page);
$('#start_cycle').click(function(){
$.mobile.changePage('#screen');
});
My problem is that if I touches on #screen somewhere, where #start_cycle will appear, then on lifting my thumb back executes $('#start_cycle').click function.
It seems that my vmouseup event is performing click event on start button, without waiting for me to click it again.
How can I prevent this.
i have not tried this solution, but just by theory of how jQM works,
$('#screen').bind('vmousedown', function(e){
e.preventDefault();
//code to change the page to counter page.
return false;
})
The jQM says that, The v are followed by click events with a delay of 300ms on the same spot you touched. This might be the reason why your timer is getting started without you manually starting the timer. If the above didn't work, try attaching the touch events with native js methods.
Related
I'm developing jQuery Mobile (jQm) app.
I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.
I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.
I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)
As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?
$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).
This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.
I hope this helps.
Using jquery mobile 1.2, I have a popup menu (OK/Cancel) which should be answered before changing to a new page. But the page changes (and the popup disappears) before it is clicked:
if (rider.time.valueOf() > 0) {
$('#popupMsg').text("Rider has already finished; update the time?");
$('#alreadyFinished').popup("open");
}
alert("rf");
// other code.......
$.mobile.changePage("#finishLine");
// other code.......
I put in the 'alert' just to prove that the popup does actually appear - there it is, behind the alert, but the popup closes (and the page changes) as soon as the alert is clicked. Also tried removing the 'other code' but still the same problem.
Here's the html:
<div data-role="popup" id="alreadyFinished" class="ui-content">
<p id="popupMsg"></p>
<a data-role="button" data-theme="b" id="OKBtn">OK</a>
Cancel
</div>
Even without the buttons in the popup, the popup doesn't persist. So what's wrong?
A jQuery Mobile popup is part of a page. Changing the page will close any current popup, so you should not directly call it following the opening of a popup. The following code would open your popup and not close it.
if (rider.time.valueOf() > 0) {
$('#popupMsg').text("Rider has already finished; update the time?");
$('#alreadyFinished').popup("open");
} else {
alert("rf");
// other code.......
$.mobile.changePage("#finishLine");
// other code.......
}
If you want your popup to be modal, the simplest way is to bind the execution of the rest of your code to the closing of the popup. For instance, if you want the restOfCode function to be run after the popup is closed:
$('#alreadyFinished').popup("open");
$( "#alreadyFinished" ).on({
popupafterclose: function(event, ui) {restOfCode()}
});
I am using the fastklick plugin for iOS what is very popular on the net for speeding the click event on jquery mobile apps with phonegap on iOS.
The buttons and links are working very well except the back button from jquery.
If I use this:
<div data-role="page" id="test" data-add-back-btn="true">
then if I want to click on the button, there is already the delay from iOS. The button is getting blue at first and after that the page is sliding. How can I prevent this so this button is working fast like the other buttons I am creating with
<button>...</button>?
Is it possible to create my own back button and apply an event to it?
First remove data-add-back-btn="true" then you can try this:
<a class="ui-btn-left" data-icon="arrow-l" href="javascript:history.back(1) " data-theme="a">Back</a>
or this:
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
Just change #pageID to your real page ID. touchstart event is great for back button if you are just doing it and not a page scrolling.
In jQuery mobile I am using an iframe. When you press the back button (in the app or the browsers back button) the iframe content goes away. Then when you press the back button again the app transitions to the previous page.
The iFrame is getting added to history. I thought this was never supposed to happen.
A jsFiddle has been created that illustrates the puzzle in as simple a form as possible.
In it you will find a fragment of HTML that creates two jQuery Mobile pages. On the first page there is a link to go to the second page. On the second page,there are two back buttons (one on the header and one as a button on the page) and also a button to reload the <iframe>. To recreate the problem:
From page 1 follow the link to page 2
On page 2, click the button to load the <iframe>
Click either of the back buttons
You will notice that you do not go back to page 1.
Here is the HTML:
<div data-role="page">
<p>This is page 1</p> Go to page 2
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true">
<h1>Page 2</h1>
</div>
<p>This is page 2</p>
<p>What follows is the iFrame</p>
<iframe id="i1" width="500" src="http://www.ibm.com"></iframe>
<p>This button issues a programmatic back</p>
<button id="backButton">Go Back</button>
<p>This button loads new content into the iframe</p>
<button id="reloadButton">Reload iFrame</button>
</div>
Here is the JavaScript
$(function () {
$("#backButton").click(function () {
jQuery.mobile.back();
});
$("#reloadButton").click(function() {
$("#i1").attr("src", "http://www.microsoft.com?x=" + Math.random());
});
});
(This is the code you will find in the jsFiddle).
I'm guessing it is because JQM programatically manipulates the history with replaceState. You can read more about how they track history in an ajax environment in the docs
Show me some code or a fiddle and I may be able to give you a more detailed answer.
One answer that seems to work (so far) is not to attempt to reload the <iframe> via changing its src attribute but instead, inserting a brand new <iframe> element to replace the one that was previously there. The logic to achieve this might look as follows:
$("#frameLocation").html('<iframe id="i1" width="500" src=' + newURL + '"></iframe>');
A corresponding jsFiddle showing it working is available.
This has been tested on Chrome 38.0 and Internet Explorer 11.0.
I want to open a jQuery UI dialog when a user presses enter or space on a given element. It appears that the enter/space keys are being processed by the dialog, however, causing the default element (the cancel button) to be pressed. The dialog is closed almost as soon as it opens.
Here is a simplified demonstration:
<script type="text/javascript">
function Go() {
$("#dialog").text("Are you sure?").dialog({
modal: true,
buttons: {
Cancel: function() {
$("#dialog").dialog("destroy");
},
OK: function() {
$("#dialog").dialog("destroy");
}
}
}); // end .dialog
}
</script>
<input type="button" value="Test" onkeydown="Go()" />
<div title="Dialog" style="display: none;" id="dialog"></div>
If the button is given focus and then the user presses space the dialog opens and then immediately closes. If the user presses enter, the dialog closes so quickly it doesn't even flash (at least that was my experience with Firefox 3.5.3)
How do I prevent the dialog from processing the key from the onkeydown event which caused the dialog to open?
Try onkeyup if there is one. If it works, I'll give you the explanation(Busy).
Edit Explantion:
It's mainly because the onkeydown event does not get called once, it gets called continually while it's pressed down, and since computers opperate so fast(1 second is eternity to them) it get's called many times during one push down. The solution is not to call it when it's pushed down, but call it on the up part(when you let go).
Happens all the time in electronics with switches and logic gates etc. I forgot the technical terms.