When clicking on a pushpin, need to programmatically click on something else.
Microsoft.Maps.Events.addHandler(layer, 'click', function(evt){
console.log("layerHandler");
simulateClick();
});
function simulateClick() {
console.log("in simulateClick");
const event = new MouseEvent('click', {
//view: window,
bubbles: true,
cancelable: false
});
const elem = [some div]
console.log("elem: " + elem);
elem.dispatchEvent(event);
}
simulateClick() works great on its own, outside the Microsoft.Maps.Events.addHandler code block.
The dispatchEvent does not work when simulateClick is called from inside the Microsoft.Maps.Events.addHandler code block. I see all the console messages, but dispatchEvent does not work.
Have spent 3 days trying to troubleshoot. Did I do something wrong, or is this Microsoft product just buggy. This would not be the first bug I have found that I have had to spend several days to troubleshoot, only to discover that it's a Microsoft issue.
Nvm it was because of event bubbling. My bad lol
Related
I have a slider menu on my page which appear after an interval of time through an animation. I would to know how can I handle click action without using browser.wait(condition, timeout) since depending on the network traffic to fetch data in a remote database.
The page rendering can take long time thus protractor is triggering timeouts error. I have been trying as bellow to use jQuery in order to wait for all transition and animation event to finish, but it is still not working.
BasePage.prototype.clickMenuButton = function(menuName) {
var link = element(by.linkText(menuName));
browser.ignoreSynchronization = true;
browser.executeScript("jQuery('html > *').one('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(){})").then(
function() {
link.click();
},
function (error) { console.log("Error : ", error); }
);
}
Does anyone know a way to wait for angularjs to finish rendering and animation without using browser.wait and timeouts?
It's a Protractor "incompatibility" with Angular JS. Most of the people calls this a bug, but nobody is sure about this.
However, if this issue occurs, the Angular and Protractor teams recommends in order to fix the $timeout awaits, to replace the $timeout function with a $interval function. They're almost the same, they both achieve the same thing.
$interval function fixes the protractor $timeout issue.
Official documentation states that You should use the $interval for anything that polls continuously (introduced in Angular 1.2rc3).
In this case, $timeout it's not a good option for Front End Developers(AngularJS developers) neither for JavaScript Automation Developers(Protractor developers).
Another option would be to either use a timeout in your test application, either turn the browser sync off.
Here's my example for ignoreSynchronization function.
browser.ignoreSynchronization = true;
browser.wait(toast.isPresent(), 3000).then(
function(arr) {
if (arr) {
toast.getText().then(function(txt) {
// console.log(txt);
expect(txt).toContain(caption);
});
} else {
toast.getText().then(function(txt) {
console.log('current toast: ' + txt);
console.log('modal not catched. see bug with $timeout \n ' +
caption + " \n" +
"==> Error! NOT PRESENT");
});
}
}
);
browser.ignoreSynchronization = false;
You could also have a look over their official github issue tracker. This page states that if you have a $timeout function, that the developer cannot change this(this seems a bit unlikely, and seems like one of the bad QA/dev relationship) you should use the ignoreSynchronization function.
The main conclusion is that, in order to fix protractor $timeout awaits for Angular the Front End developer should easily replace $timeout with $interval.
Let me know if it helps.
The plugin I'm trying to port(https://github.com/NYTimes/ice) to TinyMCE 4 needs to have access to a keypress event BEFORE it is handled by the MCE editor and works with onEvent(...) in 3.5.8 but needs to be migrated to something more like on('event') in tinymce 4, however there isn't an obvious alternative.
In tiny MCE 3.5.8 I have
ed.onEvent.add(function(ed, e) {
return changeEditor.handleEvent(e);
});
But I need something more like
ed.on('event', function(e) {
return changeEditor.handleEvent(e);
});
However the ed.on('event',...) doesn't seem to exist in tinymce 4.
It needs to be able to catch the delete key before any other event handler for the keydown, keyup, and keypress.
Ok, After 2 workdays trying to get this to work I figured out what the problem was with this particular issue.
For starters there is no equivalent to onEvent(...) in tinymce 4. However the plugin doesn't need access to every event anyway.
If you are going to port any tinymce plugin that uses the onEvent() method then you will need to identify the events the plugin is trying to handle and explicitly set the event handler for each of the events that need to be handled:
ed.on('mousedown', function(e) {
return changeEditor.handleEvent(e);
});
ed.on('keyup', function(e) {
return changeEditor.handleEvent(e);
});
ed.on('keydown', function(e) {
return changeEditor.handleEvent(e);
});
ed.on('keypress', function(e) {
return changeEditor.handleEvent(e);
});
In my case I needed to not only delegate the mousedown,mouseup, keyup,keydown, and keypress events to the plugin I also had to prevent them from being fired prematurely by the editor/textarea:
ed.on('keydown', function(e) {
// prevent the delete key and backspace keys from firing twice
if(e.keyCode == 46 || e.keyCode==8)
e.preventDefault();
});
So keep this in mind if you run into a similar issue.
Oh and I added a fork of this ICE plugin on my github: https://github.com/catsgotmytongue/ice/
I'm making a mobile-app using Phonegap and HTML. Now I'm using the google maps/places autocomplete feature. The problem is: if I run it in my browser on my computer everything works fine and I choose a suggestion to use out of the autocomplete list - if I deploy it on my mobile I still get suggestions but I'm not able to tap one. It seems the "suggestion-overlay" is just ignored and I can tap on the page. Is there a possibility to put focus on the list of suggestions or something that way ?
Hope someone can help me. Thanks in advance.
There is indeed a conflict with FastClick and PAC. I found that I needed to 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');
There is currently a pull request on github, but this hasn't been merged yet.
However, you can simply use this patched version of fastclick.
The patch adds the excludeNode option which let's you exclude DOM nodes handled by fastclick via regex. This is how I used it to make google autocomplete work with fastclick:
FastClick.attach(document.body, {
excludeNode: '^pac-'
});
This reply may be too late. But might be helpful for others.
I had the same issue and after debugging for hours, I found out this issue was because of adding "FastClick" library. After removing this, it worked as usual.
So for having fastClick and google suggestions, I have added this code in geo autocomplete
jQuery.fn.addGeoComplete = function(e){
var input = this;
$(input).attr("autocomplete" , "off");
var id = input.attr("id");
$(input).on("keypress", function(e){
var input = this;
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.2555, -121.9245),
new google.maps.LatLng(37.2555, -121.9245));
var options = {
bounds: defaultBounds,
mapkey: "xxx"
};
//Fix for fastclick issue
var g_autocomplete = $("body > .pac-container").filter(":visible");
g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function(event) {
$(".pac-item", this).addClass("needsclick");
});
//End of fix
autocomplete = new google.maps.places.Autocomplete(document.getElementById(id), options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
//Handle place selection
});
});
}
if you are using Framework 7, it has a custom implementation of FastClicks. Instead of the needsclick class, F7 has no-fastclick. The function below is how it is implemented in F7:
function targetNeedsFastClick(el) {
var $el = $(el);
if (el.nodeName.toLowerCase() === 'input' && el.type === 'file') return false;
if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) return false;
return true;
}
So as suggested in other comments, you will only have to add the .no-fastclick class to .pac-item and in all its children
I was having the same problem,
I realized what the problem was that probably the focusout event of pac-container happens before the tap event of the pac-item (only in phonegap built-in browser).
The only way I could solve this, is to add padding-bottom to the input when it is focused and change the top attribute of the pac-container, so that the pac-container resides within the borders of the input.
Therefore when user clicks on item in list the focusout event is not fired.
It's dirty, but it works
worked perfectly for me :
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Configuration: Cordova / iOS iphone 5
I want to block scrolling page "out of the iPhone screen" (when gray Safari's background behind the page border is visible). To do this, I'm cancelling touchmove event:
// Disables scrolling the page out of the screen.
function DisableTouchScrolling()
{
document.addEventListener("touchmove", function TouchHandler(e) { e.preventDefault(); }, true);
}
Unfortunately, this also disables mousemove event: when I tap on a button then move my finger out of it, then release the screen, the button's onclick event is triggered anyway.
I've tried mapping touch events on mouse events, as desribed here: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/, but to no avail (the same behavior).
Any ideas?
From what I understand of your question, you've attempted to combine the code you've presented above with the code snippet provided by Ross Boucher on Posterous. Attempting to combine these two snippets back-to-back won't work, because in disabling touchmove, you've also disabled the shim that allows mousemove to work via his sample.
This question and its answers sketch out a workable solution to your problem. You should try these two snippets to see if they resolve your issue:
This snippet, which disables the old scrolling behavior:
elementYouWantToScroll.ontouchmove = function(e) {
e.stopPropagation();
};
Or this one, from the same:
document.ontouchmove = function(e) {
var target = e.currentTarget;
while(target) {
if(checkIfElementShouldScroll(target))
return;
target = target.parentNode;
}
e.preventDefault();
};
Then, drop in the code on Posterous:
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
//initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
And that should do it for you. If it doesn't, something else isn't working with Mobile Safari.
Unfortunately I haven't had the time to check out to above yet but was working on an identical problem and found that the nesting of elements in the DOM and which relation you apply it to affects the handler a lot (guess the above solves that, too - 'var target = e.currentTarget').
I used a slightly different approach (I'd love feedback on) by basically using a class "locked" that I assign to every element which (including all its children) i don't want the site to scroll when someone touchmoves on it.
E.g. in HTML:
<header class="locked">...</header>
<div id="content">...</div>
<footer class="locked"></div>
Then I have an event-listener running on that class (excuse my lazy jquery-selector):
$('.ubq_locked').on('touchmove', function(e) {
e.preventDefault();
});
This works pretty well for me on iOs and Android and at least gives me the control to not attach the listener to an element which I know causes problems. You do need to watch your z-index values by the way.
Plus I only attach the listener if it is a touch-device, e.g. like this:
function has_touch() {
var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion);
return 'ontouchstart' in window && !isTouchPad;
}
This way non-touch devices will not be affected.
If you don't want to spam your HTML you could of course just write the selectors into an array and run through those ontouchmove, but I would expect that to be more costly in terms of performance (my knowledge there is limited though). Hope this can help.
Here is the exact copy of my code: jsFiddleCode
As you can see I have a two sortable connected lists and when some item is dropped to them they execute functions subFunction and unsubFunction respectively. Now, I also have the code for doubleclicking one of the items so that then they are put in the opposite list (the function switchLists() takes care of that.
Now, what I would like to accomplish here is the same behavior as when the items are dragged and dropped (the alert box appearing and saying exactly (for example): "Item 6 just subed".
My lack of understanding is how can it be that I have the ui available when the function subFunction is called, and not when I call the switchLists. ( I did try to add ui to the call of switchLists like this:
switchLists(e, ui){
//same code as before...
//this code doesn't execute
var itemText= ui.item.text();
alert(itemText + " just subed");
}
But I get an error in FireBug in Firefox saying that the ui is undefined.
You are free to edit the code on fiddle and post it here as a link.
As a more general questions: how does jquery pass variables to other functions? I mean, the code:
receive: subFunction
is called without any arguments, so how does the subFunction get event and ui? If you have some good tutorial on all this, it's appreciated.
Thank you for your help.
After a long day playing with this I finally came to the answer and did it like this: jsFiddle link
In short, I separated the previous function to two functions and I also read a little more about jQuery and found out that in the function I can do $(this) and so access the text of the element.
OK, just for reference the whole code is here:
$(function() {
$( "#sortable1" ).sortable({
connectWith: ".connectedSortable",
receive: subFunction
});
$( "#sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: unsubFunction
});
$(".ui-state-default").dblclick(function() {
$(this).removeClass().addClass("ui-state-highlight");
var litem = $(this).clone();
litem.appendTo($('#sortable2'));
$(this).remove();
$.jGrowl($(this).text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
});
$(".ui-state-highlight").dblclick(function() {
$(this).removeClass().addClass("ui-state-default");
var litem = $(this).clone();
litem.appendTo($('#sortable1'));
$(this).remove();
$.jGrowl($(this).text() + " successfully subed!", {header:"Subscription Status", life: 1000});
});
function subFunction(event, ui) {
ui.item.toggleClass("ui-state-default");
ui.item.toggleClass("ui-state-highlight");
$.jGrowl(ui.item.text() + " successfully subed!", {header:"Subscription Status", life: 1000});
}
function unsubFunction(event, ui) {
ui.item.toggleClass("ui-state-default");
ui.item.toggleClass("ui-state-highlight");
$.jGrowl(ui.item.text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
}
});