Hello I'm trying to combine in a div the .sortable operation of jquery-ui with swipe evente on mobile device. Unfortunately when a div is .sortable it does not handle the 'swipe' event.
Any Ideas?
jQuery UI doesn't support touchevents at the moment. You could use a plugin which converts the mouseevents as touch events here is link to the Homepage and Github. Thats the only way i know how to make jQuery UI widges touchable.
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've got a drawer div that comes out from the right on click. I want it to close when it gets swiped to the right and I've tried using the jQuery swiperight event but it doesn't seem to do anything.
Are you loading a version of jQuery mobile on your page?
I think the 'swiperight' event is from jQuery mobile.
Try adding it to your list of scripts.
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
https://api.jquerymobile.com/swiperight/
I am stuck on this, I am trying to unhide / hide jquery mobile flip switches using knockout. When knockout action is applied the jquery mobile controls stopped working. Could you please help me on this
here is the code
target.formattedValue(target());
return target;
and jsFiddle where the third control would hide if female selected but when male selected again the control disabled and not working
http://jsfiddle.net/FU7Nq/45
San.
When inspecting the rendered DOM of the following element:
<div data-bind="if: isMale">...</div>
you can see that after the radio button is changed to female, then the entire rendered HTML of that DIV is removed. Then, when switching back to the male, the content of that DIV is rendered back, but is this means that events are still attached to those slider HTML elements? I'm not sure how the way jQuery mobile attached the events, but it seems to me that this is the problem, cause you are clicking on the slider, but no action is taken. You can workaround this by recreating the Slider again:
$("#select-ifmale").slider()
Eventually this can be a bug in jQuery mobile. Sorry for suggesting this as an answer, but I don't have enough points, just to comment on your question.
jQuery mobile automatically adds classes to all elements on my page on loading... this really messes up the jQuery UI widgets I have on the page. Is there any way to prevent jQuery mobile from automatically adding classes to my HTML elements? I only wan't some of the jQuery mobile widgets on my page, and I want to specify them explicitly.
You can ask jquery mobile not to touch your widget by putting the attribute below:
data-role="none"
I'm trying to bind a tap event to no avail:
$('label[for=p_divisionR]').bind('tap', function(){
$('#propertyTypeDivision').parent().show();
$("#propertyType").parent().hide();
$("#propertyTypeDivisionRL").parent().hide();
hideBedrooms();
});
I have tried with .live('tap', fn) as well which doesn't work. However when on a desktop, using .live('click', fn) works fine.
Why would the click event work but not tap? It's being tested on an iPad using jQuery mobile rc1.
See:
http://m.bentons.propertylogic.net/
You can use other events like touchstart along with click. They respond to touch on safari in iOS. This approach worked for me.
$('#p_divisionR').live('click touchstart', function(){
$('#propertyTypeDivision').parent().show();
$("#propertyType").parent().hide();
$("#propertyTypeDivisionRL").parent().hide();
hideBedrooms();
});
Use vclick There were issues with tap back in the beta days and their developers recommended people use vclick. vclick will work on both mobile and desktop. Tap will sometimes trigger multiple events.
$('#p_divisionR').live('change', function(){
$('#propertyTypeDivision').parent().show();
$("#propertyType").parent().hide();
$("#propertyTypeDivisionRL").parent().hide();
hideBedrooms();
});
EDIT:
http://jsfiddle.net/jostster/UHX5k/1/
Forgot you were using radio buttons. For those you should use change instead of vclick