I have a button in a popup and I want to be able to call a method in my vue component, when it is clicked. I am already using vue leaflet, but in this case I have to use leaflet's native popup functions.
I have tried using this L.DomEvent and using the popupopen event but since I have so many popups, the onclick gets called several times.
L.popup().setLatLng(bounds.getCenter()).setContent(this.getPopupDisplayContent()).openOn(map);
getPopupDisplayContent() {
return (
`<div><button type="button" id="add-button">Add</button></div>`
);
}
Related
I have a popup in a leaflet map that can be closed by clicking on the 'x' in its upper right corner. How do I make the click event not propagate to the map itself?
I've tried using preventPropagate() in many places and forms, but none of them seem to work.
My latest code looks like that:
<div class="actions" #click="stopPropagation($event)">
(...)
stopPropagation(e) {
e.stopPropagation()
}
The above div (.actions) is the popup's main div.
I have also tried calling the function at a click in the popup's component tag in the parent component, but the result was the same, meaning clicking the 'x' closes the popup as expected but also results in a click event in the map that lies behind.
I use Vue and vue2-leaflet.
I appreciate any insight from you guys. Thanks!
UPDATE: actually, doesn't matter where in the popup the click happens, it always gets propagated to the map behind.
So, for reference, here's my solution:
<div class="actions" #click="someMethod($event)">
(...)
someMethod(e) {
(... some code)
return false
}
The command 'return false' is what solved my problem.
I tried using '#click.stop', but it gives me the '$event.stopPropagation() is not a function' error. The same happens if I run 'e.stopPropagation()' from inside the function.
The accepted answer didn't work for me so I wrapped my l-map in a div and applied the click.stop to that.
<div #click.stop.prevent.self="">
<l-map...>
</div>
It seems to me that the actual click event is parsed by the leaflet library rather than the Vue-compatible vue-2-leaflet, so the event that is received by the function doesn't have stopPropagation or preventDefault methods on the object. Thus, when Vue calls them with .stop or .prevent, the JS engine throws an error.
This is what I figured out for my issue dealing with event handling and stopping the propagation.
e.g.
someReference.on("click", (evt: L.LeafletEvent) => {
// You don't try to reference the event (evt) that is passed in
L.DomEvent.stopPropagation; // Just call this and it kills the propagation
// or you can call
// L.DomEvent.preventDefault(evt);
...
})
Could try an event modifier
Perhaps the stop modifier:
<div class="actions" #click.stop="closePopup">
<mat-checkbox (change)="handleProductClick(children, $event)" [(ngModel)] = "children.selected"
[name]="children.grpId" [id]="children.id"></mat-checkbox>
handleProductClick(selectedProd : Product, event: any)
{
event.stopPropagation();
}
If I use click function instead of change it works fine. Although I can't use click. I have to stick with change. Is there a way to call stopPropagation from change function? If not what else can I do to stop the event propagation?
I got it working. Had to use both click and change on the checkbox. I had tried that earlier. The only difference was I was calling a function in the click method and it never got called. If you call $event.stopPropagation on click method in the template, it works well. strange. The below answer solved my problem. Angular 2 prevent click on parent when clicked on child
<mat-checkbox (change)="handleProductClick(children, $event)"[checked]="children.selected" (click)="$event.stopPropagation()"
[name]="children.grpId" [id]="children.id"></mat-checkbox>
I have a popup without title and I want to detect the window using any other criteria (for example a div that wraps the whole popup) and click a button inside it.
I've tried the following:
when:
withWindow({ $("div", class:"main.msgAlert" )}) {
$('#close').click()
}
then: true
But I always get a org.openqa.selenium.ElementNotVisibleException at te #close action.
Am I failing at detecting the window or is the error related to the button?
I have form and input inside.
<input type="submit" label="Upload" data-dojo-type="dijit.form.Button" data-dojo-attach-point="leftLogoSubmit" id="leftLogoSubmit"/>
Is it possible push this button programmatically?
I tried
this.leftLogoSubmit.onclick();
but it not works.
Uncaught TypeError: this.leftLogoSubmit.onclick is not a function
You need to use on.emit().
It can be done in 2 ways:
As #tik27 stated:
dijit.registry.byId("leftLogoSubmit").emit('click', { cancelable:true, bubbles: true})
Note the 2 properties on the object. Without this, the click will not work properly.
You can also do:
on.emit(dojo.byId("leftLogoSubmit"), 'click', { cancelable:true, bubbles: true})
Where on is required as dojo/on
Last but not least, you can call the onClick method of the button directly (like #frank proposed):
dijit.registry.byId("leftLogoSubmit").onClick();
Difference is:
- in 1st case the widget is use to access the emit method (only works with Evented widgets)
- in 2nd case dojo/on is used so we need to pass the button domNode instead of the widget
- in 3rd it is not a native click (so will not bubble). It just call the button click handler
You can write like this
this.leftLogoSubmit.on("click", function() {
// Your code
});
you can fire the click function as.
this.leftLogoSubmit.onClick();
note: the capital C in the onClick.
You can go with core JavaScript solution
document.getElementById("leftLogoSubmit").click();
Im trying to fire a click event on a tool bar button Dojo 1.8.1.
<div data-dojo-type="dojox.mobile.ToolBarButton" class="backButton" moveTo="cartView" transition="slide">
I have tried
function backClick(){
var backButton = dojo.query(".backButton", dojo.byId(currentView.id))[0];
writeLog("backClick::"+backButton);
if(backButton){
var backDijit = dijit.registry.byId(backButton.id);
writeLog("backDijit::" + backDijit.id);
writeLog("emit Click");
backDijit.emit("click", {bubbles:true});
writeLog("emit mousedown");
backDijit.emit("mousedown",{bubbles:true});
writeLog("emit mouseup");
backDijit.emit("mouseup",{bubbles:true});
writeLog("touchstart");
backDijit.emit("touchstart");
writeLog("touchEnd");
backDijit.emit("touchend");
}else{
//Exit App notification
navigator.app.exitApp();
}
}
mousedown/mouseup combo works on the browser.
But on the device it does not work(Android). What is the event that i have to send to 'click' the button on a device?
It seems that the sequence of events that will activate the toolbar button 'click' on a touch device is touchstart followed by touchend.
I suppose that your example do not work because the synthetic touch events that you are emitting do not contains any data, which fails the different methods that handle it.
Another way to trigger the click handler of the toolbar button would be to call its _onClick method.