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.
Related
Selection of words in an autocomplete input field (within a dialog) is not working properly when using JQuery UI in combination with Touch Punch. It seems to work if the autocomplete field is directly on the HTML page, but not in a dialog.
Note that selection by mouse is working perfectly in all cases, but selection by touch (i.e. on mobile device) not.
I have reduced the whole case to a few lines of HTML and JavaScript code.
Once with JQuery UI Touch Punch, once without JQuery UI Touch Punch.
I am able to reproduce the error with all combinations of browser and OS, e.g. Chrome on an iPhone, Chrome on an Android mobile as well as with Safari on an iPad,
Would be nice if somebody knows a workaround.
I think this behavior is a result of the fact that on one the one hand Touch Punch developers are not that smart and on the other hand jQuery UI seems to be not very cooperative with Touch Punch.
There are two ways how mouse event might be triggered:
browser might simulate click events after touch events
some library might simulate click events after touch events
Your example without Touch Punch works because mobile browsers currently simulate click events.
So how Touch Punch works and how it messes things up? If you look at the source code https://github.com/furf/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js you'll see that it wraps $.ui.mouse.prototype._mouseInit with its own code and the main intention is to attach various touch-related listeners for all widgets that inherit $.ui.mouse. So far so good. But what exactly those listeners do? The _touchStart handler runs a check using $.ui.mouse internal API:
self._mouseCapture(event.originalEvent.changedTouches[0])
to check if it needs to simulate mouse events. The logic is: if there is no click handler in the widget, there is no need to simulate click. It looks OK at the first glance but what's going wrong? The autocomplete widget puts its dropdown menu to the outside context of the containing dialog and thus touch events on the menu items actually hit listeners registered by touch-punch for the dialog (or rather for its draggable and resizable sub-components). But the dialog subcomponents have no click listeners and thus events are not simulated by the library. Moreover, draggable in your version (see https://github.com/jquery/jquery-ui/blob/1-11-stable/ui/draggable.js) calls
this._blurActiveElement( event );
unconditionally and this seems to stop browser from generating mouse events. So now neither browser nor library simulate click event.
It seems that in the development branch of jQuery UI the bug is fixed https://github.com/jquery/jquery-ui/commit/8c66934434214ab92cbcf46240beb739154fdfbf but for a bit different reason. This fix seems to be available in the jQuery UI 1.12.1 but not in your 1.12.0
So the simplest solution seems to be to upgrade jQuery UI to 1.12.1
See working demo with jQuery UI 1.12.1 at https://jsfiddle.net/cjvgv102/1/ and http://jsfiddle.net/cjvgv102/1/embedded/result/
Ugly hack (stop here unless you really have to)
If for some reasons you can't upgrade jQuery UI, you can do a hack by explicitly creating a fake mouse object on the dropdown and calling its _mouseInit so event will not be handled by dialog's sub-components.
$( "#demoDlg" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Close": function() {
$( this ).dialog( "close" );
}
},
open: function(event, ui) {
$( "#words" ).autocomplete({
source: ["these", "are", "some", "words"]
});
// super-hack
$( "#words" ).autocomplete("instance").menu.element.mouse().mouse("instance")._mouseInit();
}
});
See full demo at
https://jsfiddle.net/3ptgks3t/1/
I am developing a PhoneGap apps and have the following page flow.
registrationPage > areaSelectionPage > orderDetailPage > areaSelectionPage
I would like the back button only appear on the last areaSelectionPage. If areaSelectionPage is coming from registrationPage, the back button should not appear. How can I do it?
I haven't tested the code, but you can take the following approach.
pagebeforeshow receives two arguments, event and ui. To get the previous page use, ui.prevPage and then apply the check.
$("#areaSelectionPage").on('pagebeforeshow', function(event, ui) {
if (ui.prevPage.attr('id') === 'registrationPage') {
//hide back button here
$('a[data-rel="back"]').hide();
}
});
If you see this fiddle you will notice that in order to spawn the Tooltip the mouse has to leave and reenter the div foo after the Tooltip has been initialized.
I thought that maybe I could manually trigger the Tooltip using tooltip("open"). Unfortunately, the mouse tracking doesn't work when I do that. See this fiddle.
Does anyone have an idea how I could get the Tooltip to open with mouse tracking enabled without having to leave and reenter the div? In case you are wondering why I need to do this, I am working with WebGL in a canvas element that takes up the entire screen.
I am using the track: true option and I faced to the same problem in a different context. I am working with richfaces and have some ajax calls which rerender parts of a page.
After each rerender, i needed to rebuild tooltips present in the rerendered part so i decided to attach an event handler to the document and to rebuild thoses tooltips on mouseenter, and then manually open them by calling $(...).tooltip('open')... tooltips are displayed correctly but the mouse tracking doesn't work anymore.
So instead of using $(...).tooltip('open'), i trigger a mouseenter event and work with css class to init only once :
jQuery(document).on('mouseenter', '.tt', function() {
jQuery(this).tooltip({
content: function() { ... },
items: ".tt, .ttped",
track: true
})
.toggleClass('tt ttped')
.trigger('mouseenter');
});
I edited your jsFiddle, which rebuild tooltip each time you enter on #foo and another one which init tooltip only once (static content)
All of the JQuery Mobile documentation I can find about navigating backwards assumes I am going to do this using an anchor tag and suggest I add data-rel="back" to the tag.
I'm not navigating from a tag, I'm mixing with PhoneGap which means I'm calling javascript functions like PhoneGap.something(goForwardOnSuccess,goBackwardsOnFailure);
where
function goFowardOnSuccess()
{
$.mobile.changePage('#next', { transition: 'pop' });
}
function goBackwardOnFailure()
{
$.mobile.changePage(/* I HAVE NO IDEA WHAT GOES HERE */);
}
One of the main things I'm using this sort of thing for is putting up a "Busy Doing Something In Native Code Don't Touch Me..." click shield screen with the "loading" stuff and then closing it in the completion functions.
However, I find when I try that from a button on a screen I "popped" into place, I find myself back at the home page (goes back two levels).
The documentation is maddeningly vague about how to navigate backwards from pure javascript. Any clues would be very nice.
Notice also that I tend to pop these busy screens from everywhere so explicitly coding a transition back to the screen I want isn't really an option.
It's definitely not clear in the documentation, but there are small allusions to it.
Try using:
$.mobile.back();
it makes sense to use data-rel="back" for something like that:
<a href="#" data-rel="back" ...
but it is better to use history.back(); inside javascript code blog i.e
.....
.....
var cId = $(this).val();
// do something with control ID then
.....
.....
goBackParent();
}
function goBackParent(){
history.back();
}
Why not just use data-rel="back" as an attribute to your back button, this will take the user back 1 page.
Also equivalent to history.back()
You are going back "two levels" because if you fire changePage programmatically via
$.mobile.changePage('#next', { transition: 'pop' });
and omit all the other options, you are triggering two functions:
changePage
hashChange
Normally on a regular transition, the hashChange is blocked, while on backwards transitions, the changePage should be blocked (not sure here...). So in your case you have your (wanted) hashChange and an unwanted (changePage) transition.
Check the JQM docs for the options you can pass along in your changePage call or look in the 1.0 source code #3140 for all available options. I would try also passing changeHash:false or fromHashChange:true along in your function call and see what happens.
If you want to dig deeper you will have to look for ignoreNextHashChange and how its value changes though JQM.
A call to history.back() will do that.
Add changeHash: true from where you are redirecting.
And then use 'history.back()' or 'history.go(-1)' from your current page. It will only take you 1 page back.
$.mobile.changePage("yourpage.html",{ transition: "flip", changeHash: true});
I want to show a popup screen on my page using JQuery UI Dialog widget.
To implement this I have a <div class="popup-placeholder"> on my page. Actually there are more than one on the page (If this makes a difference to the solution)
On click of a button, I am initializing the dialog and 'open'ing it. The initialization of the popup is inside the action click because it is supposed to make an Ajax call to get the content of the popup. (I tried taking the initialization out of the click event, but that did not work $('div.popup-placeholder').dialog(); )
var popupContext = $('#' + contextControl.id + ' > .popup-placeholder');
popupContext.html(formHtml);
$(popupContext).dialog({
bgiframe: true,
modal: true,
autoOpen: false,
closeOnEscape: false,
dialogClass: '',
draggable: true,
position: 'center',
resizable: false,
width: 600
});
On click of the action button, the form shows and does what it is supposed to.
Now, I have a close link on the popup WHICH IS NOT A DIALOG BUTTON, but just another link with an event binded to it.
It does this...
$('#popup-placeholder-61').dialog('close');
where #popup-placeholder-61 is the same as $(popupContext)
The problem I am facing now is that, on close of the popup, the same action button does not show the popup again. The issues seems to be that the <div class="popup-placeholder"> has been removed from the mark-up.
I tried the solutions on the following page but did not help -
Jquery Dialog Close on StackOverflow
So, I need more help
After struggling a bit, i came up with a best solution. Please use below line instead of dialog('close')
$('#popup-placeholder-61').dialog("destroy");
This will allow div to retain its position
My issue has been resolved, but I will be looking into why my earlier approach did not work.
What I was doing earlier was that I had multiple place-holders with different IDs, and I was making only one of them the dialog. I used some Jquery selectors to select the appropriate div for the dialog box and had issues as described above.
The only change I did now is that I have a single div which acts as the placeholder. And that now works. It also initialized fine outside my event.
So, maybe it was something to do with my selectors? I will try more and if I find something will post it as a follow up.
Thanks.
Try taking the initialization code out of the click event it may be that by trying to rebind everything again it's failing to pop the dialog open with the second click ... I had a similar problem which I "resolved" by creating the the markup for the dialog every time the dialog was to be opened.
The ajax bit of your problem is not hold back for you to take the initialization out of the click event, just load your ajax content on the click event and show the dialog with dialog('open').
The main problem was that I was looking for the dialog div in the wrong place.
See this post for more details ...
Jquery Dialog - div disappears after initialization