How to get event name in GMap V3.
Tried as,
function initialize(){
-------------------
google.maps.event.addListener(map, 'click',function(){handleViewUpdate();});
google.maps.event.addListener(map, "dragend", function () {handleViewUpdate();});
-------------------
}
function handleViewUpdate(){
alert(map.getEvent()+' Event');
}
but fails. :(
Any help please :)
why don't you use some flag variable send it as a parameter to the function
for eg:
handleViewUpdate(1) for first thing
handleViewUpdate(2) for other.
then you can get the event name.
There is no map method named getEvent, but some of the event listener callbacks do pass arguments (but not all). For example, you could change your click event listener definition to:
google.maps.event.addListener(map, 'click', function( event ) {
//do something with the event parameter here
handleViewUpdate();
});
In contrast, the dragend event does not pass anything to the event listener. The google.maps.Mapapi-doc has full details if you scroll down to the Events table.
All that said, the google.maps.MouseEventapi-doc doesn't include a "name" or "type" property that could be used to address your specific question. I've inspected the incoming event in Chrome's console and there is nothing that you can use to perform a switch action. When you define the event listener, the callback function is about the only thing that you can use to give you the context of the event that was fired. So the suggestion in #NejiHyuga's answer is pretty much your best option.
Related
Im trying to use registerHelper to respond to a click event on my page.
i seem to be having difficulty getting the page to perform a function based on a click event.
The function below runs when the page renders.
Template.registerHelper('deletetask', function () {
Tasksdb.remove(this._id);
how do i get it to run on a click event? I have tried something like:
Template.registerHelper('deletetask', 'click.delete' : function () {
Tasksdb.remove(this._id);
it just errors out.I think my syntax is off or i have to do it some other way.
Thanks
Template helpers return values for display. Template events are designed for, you guessed it, handling events.
Template.myTemplate.events({
'click .delete': function(ev){
Tasksdb.remove(this._id);
}
});
Note that this will be the data context corresponding to the instance of myTemplate that was clicked on.
I have an id of the button element like this: '#edit-field-project-dnr-und-0-remove-button'
I want to add an event in this button id for instance:
$('#edit-field-project-dnr-und-0-remove-button').click(function (){
calculateDonorSum();
});
This button is ajax button whenever this is clicked old id that is '#edit-field-project-dnr-und-0-remove-button' is replaced into '#edit-field-project-dnr-und-1-remove-button' and so on but no event is fired in the previous button id. Is there any way to fix this ?
When you do this:
$('#edit-field-project-dnr-und-0-remove-button').click(function (){
calculateDonorSum();
});
This searches the current DOM for any element that has an id="edit-field-project-dnr-und-0-remove-button" and attaches an event handler directly to that DOM element.
If you remove that DOM element and create some new DOM element or add a new DOM element, that new DOM element will NOT have this event handler attached to it unless you run some new code to attach an event handler to the new element.
For dynamic elements, it is also possible to use delegated event handling, but you haven't really described enough of what you're doing for us to know how to recommend that. I can't tell if you're adding a new button or changing the ID on the current button.
If you are adding a new button and want all new buttons of this type to have this event handler, then you can use delegated event handling. Delegated event handling works like this:
$("some static common parent selector").on("click", "some common child selector", fn);
So, if your buttons were all in a id="container" div and all had a common class name on them class="calcButton", then you could use:
$("#container").on("click", ".calcButton", function() {
calculateDonorSum();
});
And, all buttons in the container with that class would have this event handler, even if they are dynamically created after the event handler is defined.
Some other references on delegated event handling:
jQuery .live() vs .on() method for adding a click event after loading dynamic html
Does jQuery.on() work for elements that are added after the event handler is created?
Should all jquery events be bound to $(document)?
JQuery Event Handlers - What's the "Best" method
consider using jQueries attribute starts with, contains, or ends with selectors
//button id starts with 'edit-field-project-dnr-und-' and ends with '-remove-button'
$("[id^=edit-field-project-dnr-und-][id$=-remove-button]").click(function () {
calculateDonorSum();
});
if these buttons are created dynamically, use
$('#some-parent-container').on("click","[id^=edit-field-project-dnr-und-][id$=-remove-button]", function(){
calculateDonorSum();
})
instead of .click()
//button id starts with
$("[id^=button-]").click(function () {
calculateDonorSum();
});
//button id ends with
$("[id$=-remove]").click(function () {
calculateDonorSum();
});
//button id contains
$("[id*=-remove]").click(function () {
calculateDonorSum();
});
this works, here, made a fiddle
http://jsfiddle.net/MzPEg/1/
in general use this approach ONLY if you don't have control over the naming/creation of the original buttons. these selectors are not as fast as $('#id') and it's a bit sloppy. but it will work in a pinch.
It appears that the id of the field on which the onclick event is supposed to occur is changing, yet you only handle the first id. If you do not want to make all of these ids the same, you could put the click event handler on a parent wrapper div.
You can do as this:
$('#edit-field-project-dnr-und-0-remove-button').click(function (e){
e.preventDefault();
calculateDonorSum();
$(this).attr('id','edit-field-project-dnr-und-1-remove-button');
});
Using an advanced selector that matches the beginning part of the id AND the ending part:
$('[id^="edit-field-project-dnr-und"][id$="remove-button"]').on('click', function(){...});
I'm building a calendar-based web app with fullcalendar, which is for college students to use. There are some categories I've defined. e.g, sport, art, mind, etc... every event in the fullcalendar would be assigned to a category.
What i want to do is: there're some checkboxes corresponding categories on the top of the calendar, and the user can check or uncheck some checkboxed to hide/show the related events
how would I achieve this?
One way is to put appropriate classes on each event by setting the 'className' property on the event objects you're sending to the calendar and use jquery to hide those events (e.g. $(.myClassName).hide()) when they check the checkboxes. The trouble is the events would vanish leaving a gap where they were which might not be what you want.
A better way would be to add a filter function to the events option when you first call fullCalendar like this:
fullCalendar({
...
events: {
url: ....,
success: function(events) {
$.map(events, function (e) {
if (userHasFilteredOut(e))
return null;
else
return e;
});
},
...
});
This will filter out the events before they are displayed. The function userHasFilteredOut returns true if the event object passed in is of a class the user's checkbox values indicate is filtered out. When the user checks or unchecks a checkbox, you will need to refetch all the events from the server. You need to do this:
$('#mycal').fullCalendar('refetchEvents');
I'm implementing a map application. It uses Google Maps API for Flash. There is a one callback function that is triggered when the map is clicked. Additionally, there are plenty of polylines that are generated dynamically. The polylines have also click event listener assigned to them. The problem is when I click a polyline, the map click event is triggered at first and then the polyline's click event is fired.
I can't resolve that issue. It's really anoying. Here is code that assigns callback to the map's click event:
map = new Map();
map.key = GOOGLE_MAP_KEY;
map.addEventListener(MapMouseEvent.CLICK, onMapClicked, true);
and here is code that assigns callback function to a polyline's click event:
var polyline:Polyline = new Polyline(path);
polyline.addEventListener(MapMouseEvent.CLICK, cutToEnd);
I need to supress the "onMapClicked" function's invocation when I click on a polyline. Only "cutToEnd" method should be invoked.
Thanks
map.addEventListener(MapMouseEvent.CLICK, onMapClicked, true);
You use bubblingPhase here (third "true" parameter). It means, that when you click polyline, event "reaches" first your map, because it's capturing from stage to your button. Set parameter "false", or leave only 2 parameters (useCapture is "false" by default). Then in the end of your polyline click handler add event.stopPropagation() method call. It will make event stop bubbling to stage, and it won't "reach" your map.
UDATE: If MapMouseEvent does not bubble you can compare event.target and event.currentTarget properties. In your polyline click listener they will be equal. So you may add
if(event.target != event.currentTarget)
return;
at the beginning of your map click listener.
Is there a way to write a custom event that gets triggered when the user clicks outside of that custom component instance? Basically anywhere else in the main flex app.
Thanks.
You can use the FlexMouseEvent.MOUSE_DOWN_OUTSIDE event. For example:
myPopup.addEventListener(
FlexMouseEvent.MOUSE_DOWN_OUTSIDE,
function(mouseEvt:FlexMouseEvent):void
{
PopUpManager.removePopUp(myPopup);
}
);
stage.addEventListener( MouseEvent.CLICK, stgMouseListener, false, 0, true );
...
private function stgMouseListener( evt:MouseEvent ):void
{
trace("click on stage");
}
private function yourComponentListener( evt:MouseEvent ):void
{
trace("do your thing");
evt.stopPropagation();
}
Got this from Senocular. I think it applies to this subject, at least it did the trick for me. What jedierikb suggested seems to be the same, but a little incomplete.
Preventing Event Propagation
If you want to prevent an event from propagating further, you can stop it from doing so within an event listener using stopPropagation() (flash.events.Event.stopPropagation()) or stopImmediatePropagation() (flash.events.Event.stopImmediatePropagation()). These methods are called from the Event objects passed into event listeners and essentially stop the event from happening - at least past that point.
stopPropagation prevents any objects beyond the current from recieving the event, and this can be within any phase of the event. stopImmediatePropagation does the same but also takes the extra step of preventing additional events within the current target receiving the event from happening too. So where as stopPropagation would prevent sprite A's parent from receiving the event, stopImmediatePropagation would prevent sprite A's parent as well as any other listeners listening to sprite A from receiving the event.
Example: toggle between using stopPropagation and stopImmediatePropagation
ActionScript Code:
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x4080A0);
circle.graphics.drawCircle(50, 50, 25);
addChild(circle);
circle.addEventListener(MouseEvent.CLICK, clickCircle1);
circle.addEventListener(MouseEvent.CLICK, clickCircle2);
stage.addEventListener(MouseEvent.CLICK, clickStage);
function clickCircle1(evt:MouseEvent):void {
evt.stopPropagation();
// evt.stopImmediatePropagation();
trace("clickCircle1");
}
function clickCircle2(evt:MouseEvent):void {
trace("clickCircle2");
}
function clickStage(evt:MouseEvent):void {
trace("clickStage");
}
Click the circle and see how the event is stopped with each method. stopPropagation prevented the stage from receiving the event while stopImmediatePropagation also prevented clickCircle2 from recognizing the event
normal output
clickCircle1
clickCircle2
clickStage
stopPropagation output
clickCircle1
clickCircle2
stopImmediatePropagation output
clickCircle1
Flex/Actionscript 3 - close popupanchor on mouse clicked anywhere outside popup anchor
for 4.6 SDK try this..
frmPUA.popUp.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, menuPopOutside, false, 0, true);
Full code is avaiable at
http://saravanakumargn.wordpress.com/2013/12/14/flexactionscript-3-close-popupanchor-on-mouse-clicked-anywhere-outside-popup-anchor-2/