I have old code, and I'm not sure how to change it, I need to use the old .returnValue, but it isn't there anymore, how can I fix this?
rootElement.onSelectStart.listen((Event e) {
e.returnValue = false;
});
Thanks
As far as I know this indicates if the event was cancelled.
I think defaultPrevented is what you are looking for.
http://api.dartlang.org/docs/channels/stable/latest/dart_html/Event.html#preventDefault
http://api.dartlang.org/docs/channels/stable/latest/dart_html/Event.html#defaultPrevented
Related
I'm using the twitter typeahead library. Version: 0.10.4
I have been able to bind events to the "opened", "selected" events but nothing happens when I bind the event "rendered", although it is in the documentation.
Has any of you guys come across this issue?
Here is the code I'm using:
typeAhead.on('typeahead:selected', function(e, suggestion) {
alert(0);return; // Shows the alert
})
typeAhead.on('typeahead:rendered', function() {
// Nothing happens
});
had the same issue, debugging I've found out this line
typeAhead.data().ttTypeahead.dropdown.datasets[0].onSync('rendered', function(){
console.log('rendered');
});
it's working for me and I aint found any better than this, without modifying typeahead libraries.
if you have more datasets, just change to a for loop.
I'm having troubles with this event too. I'm using version 0.11.1 and as far as I can see I think there's a kind of bug when passing arguments to the callback function:
if you use this handler:
function(obj, matches) {
console.log(matches);
}
you seem to get only one (the first one, of the several matched suggestions.
if you use this handler:
function(obj, match1, match2) {
console.log(match1);
console.log(match2);
}
you get two, and so on.
Actually all suggestions are passed as this handler prove:
function() {
console.log(arguments);
}
skipping the first slot, the remaining are the current suggestions, so I think this is a bug of the plugin.
As title suggests I am building a mobile website with JQuery Mobile (1.3.0) and am trying to implement Google Places Autocomplete (API v3) to aid user input of location data.
The autocomplete functions correctly on desktop device, but not when used on a mobile device (I have only tested on iOS 6).
When used on mobile device the dropdown list of relevant locations do appear, but simply disappear when you press one without loading the selection on the map.
I have looked around and seen some solutions that sight the z-index of
.pac-container
as the culprit (see: http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).
I have implemented these fixes but to no avail, and I am not convinced that z-index is the problem because I can see that the selected item does change to it's :hover state/colour when pressed on mobile.
Please if anyone has suggestions I am all ears, need any more details let me know.
Saravanan's answer is a bit overkill. To fix the conflict with FastClick and PAC, add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Thanks Daniel. But the solution I have given has some performance impact.
I have modifed the FastClick library little bit to accomplish that.
First I have added a param to FastClick constructor, where defaultElCls will be the elements which should not implement fastclick.
function FastClick(layer, defaultElCls) {
'use strict';
var oldOnClick, self = this;
this.defaultElCls = defaultElCls;
Then modify needsClick method:
FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();
if (nodeName === 'button' || nodeName === 'input') {
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
// Don't send a synthetic click to disabled inputs (issue #62)
if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
return true;
}
} else if (nodeName === 'label' || nodeName === 'video') {
return true;
}
return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));
};
Then pass pac-item to the FastClick constructor
new FastClick(document.body, "pac-item");
Hope this will be taken care by FastClick library as well :)
I've also encountered this bug, and determined fastclick to be the culprit. I was originally going to go with Devin Smith's answer, but epegzz's warning about MutationEvents being deprecated led me to MutationObservers, and since I haven't seen a fix involving them I thought I'd share my solution.
var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
var self = this;
mutations.forEach(function(mutation){
// look for the container being added to the DOM
var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
// if it is, begin observing it
if (pac_container_added){
var pac_container = mutation.addedNodes[0];
self.observe(pac_container, observer_config);
}
// look for pac-items being added (as children of pac_container)
// This will not resolve if the observer on pac-container has not been created
var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
// when pac items are added, add the needsclick class
if (pac_item_added) {
$('.pac-item, .pac-item span').addClass('needsclick')
}
});
});
observer.observe(document.body, observer_config);
It is more complex than I'd like it to be because we can't just add observer.observe('pac_container') in the top level, since its added asynchronously. Luckily, the solution for that problem is also MutationObservers.
We add another observer to pac_container when it is created. That way, it detects the pac-items being added, and when they are, we add the needsclick class.
This is my first time using MutationObservers, so feedback/improvements would be appreciated. As you can see, I used both jquery, but it should be pretty easy to pull it out.
There is a patch for fastclick that makes it work well with google places autocomplete. See This answer :)
After much hair pulling I have found the problem to be the "FastClick" library I added to my project.
As #Saravanan Shanmugam points out in this comment https://stackoverflow.com/a/16932543/1177832
FastClick seems to interfere with autocomplete. Also see above link for the workaround he has added to get the two to play nice.
As the subject states, how do I trigger the actions to take place inside a
modelController.$parsers(...)
without user input... the only way I can think of is wrapping them inside a function and call it, but is there a better way to trigger
**//pseudo
$(modelController).trigger('just got dirty');**
the reason I would need this is to trigger the input field to validate itself on submitting page.
I have found a way to solve this - just call the parsers with the model value:
angular.forEach(ngModel.$parsers, function (parser) {
parser(ngModel.$viewValue);
});
It`s so simple, and it seems to be the most correct solution.
This question is actual for me also... Because i am resolving this issue with:
var triggerParsers = function() {
var val = ngModel.$viewValue;
ngModel.$setViewValue(null);
ngModel.$setViewValue(val);
};
It took me a little bit, but I figured out that I can't click on my inputs because of the touch.punch script I'm using to enable jquery UI drag functionality on touch devices. Anyone familiar with this script know why that might be? The form actually resides down the tree of the parent object. Does anyone know a way I can override or force through the selection? I'm going to try binding events that force focus to the input right now but maybe someone here has some insight?
JEditable + jQuery UI Sortable + jquery.ui.touch-punch
I have spent all day on this problem and I finally figured out the solution. The solution is very similar to kidwon's answer. However, I was using jeditable which dynamically creates input fields without class names. So I used this conditional statement instead of checking the class name:
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
I think this is a better solution as it always uses the native functionality for any input or textarea fields.
To anyone who might wind up here with a similar situation using the very handy touch.punch hack, simply forcing the focus through on a click event will work just fine!
$('.input').bind('click', function(){
$(this).focus();
});
Folks, the other two answers here did NOT work for me, but Danwilliger's solution works; however, it's not clear from his answer how exactly to set it up in the Touch Punch JS file. For future answer-seekers, here's what to do. Again, this is Danwilliger's solution -- I'm just clarifying.
Change this section in jquery.ui.touch-punch.js (on approximately line 30):
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
To this:
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
Best of luck!
OK here's another solution if your textfield whatever HTML element is ain't focusing,scrolling, selecting words, moving text cursor around the text and whatever different scenarios might come then you may override the jquery.ui.touch.punch.js script.
I assume that your element isn't the draggable one but probably a child of it as my case was.
Put a class on your html element, for example class="useDefault".
Then go to the script file and find that part:
...
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
....
As you can probably see event.preventDefault(); assures that jquery.ui.touch.punch.js
overrides the default behaviors of the browser. To prevent that for our particular class node, make the following modifications:
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
event.stopPropagation();
} else {
event.preventDefault();
}
This solution is tested with webkit browsers only and jQuery UI Touch Punch 0.2.2 release.
Hope that quick solution helps, BR
Thanks to #Danwilliger and #jeremytripp for the solution. Being that this issue has been known for years and yet has still not been worked into touch-punch author's Git repo, I forked it with the solution added here:
https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js
I would be quite happy for the author to incorporate those few lines of a change into the original library and make this one unneeded then, but if that never happens, it's nice to have a single source file to reference.
Jacob's answer worked with a slight modification—I found that using the click event resulted in inconsistent behavior on iPad, ios9 Safari. Sometimes I'd press once on a field and it would focus, other times I had to press three times. Changing click to touchstart solved the problem for me (I also used event delegation since my form was added dynamically):
$('form').on('touchstart', 'input,textarea',function(){
$(this).focus();
});
One solution is to use a handle.
Add an icon inside and use this to drag. Then the inputs work fine.
<li><span class="move">Move</span><input...../></li>
$("#sortableList").sortable({
handle: ".move"
});
I actually tried adding the lines which Danwilliger mentioned, it did not do the trick for me.
What worked for me was
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
$(touch.target).focus();
} else {
event.preventDefault();
}
I am not really sure why the other answers posted did not work, but for anyone else out there if they have the same issue try my solution out :).
Throttlehead's solution worked for me. Simpler perhaps to just use the JQuery selectors to cover all inputs and textareas:
$('input,textarea').bind('click', function(){
$(this).focus();
});
See example here: http://jsfiddle.net/KK36F/2/
How to solve this?
My old answer of:
http://jsfiddle.net/KK36F/5/
I've used jQuery noConflict to work around flowPlayer. As I can't
reproduce your problem (flowPlayer is blocked on my site rrrrr) it's
the best I can do.
Didn't work... I've managed to reproduce the problem and track it down to a line in the flowplayer code:
// skip IE policies
document.ondragstart = function () { return false; };
If you make this safer (as it is a JScript only IE thing), the draggable works again.
if(document.ondragstart) {
document.ondragstart = function () { return false; };
}