I want to do some action on close button for ModalDialog box. I am using "idx.widget.modaldialog" in dojo. Is there any way to capture the close event?
The idx.widget.modaldialog extends the dijit.dialog so you can implement the onClose method.
For example:
onClose: lang.hitch(this, function(){
// some code
}),
Related
There are several occasions that users try to click a button multiple times in a row for whatever reason.
I want to disable or hide a button for a few seconds after it is clicked, so that it will not be clicked again temporarily.
By buttons here I mean every button in Odoo that is possible to implement this feature.
Is there a solution to achieve such mechanism?
If there is no system-wide implementation for this, a button-specific method will suffice.
$(document).ready(function () {
$("#yourbutton").on('click', function (event) {
event.preventDefault();
//your js code
//to disable the button:
$(this).prop('disabled', true);
});
});
I'm using Bootstrap-Vue and I would like my dropdown to never hide until a button calls a function. My issue is that, by default, clicking outside the dropdown or on the dropdown button hide the dropdown. My template is:
<b-dropdown
ref="dropdown"
#hide="onEditControlMenuHide"
#click.native.stop>
<b-dropdown-form>
<b-dropdown-item-button
#click="closeDropdown"
>I'm a button
</b-dropdown-item-button>
</b-dropdown-form>
</b-dropdown>
And then I have simple methods in my script:
closeDropdown() {
this.$refs.dropdown.hide()
},
onEditControlMenuHide(bvEvent) {
bvEvent.preventDefault()
},
I tried to catch the bvEvent in a function to process where the event comes from, but I find nothing in the event that differentiate hide on click outside, hide on click the dropdown button, or hide because on my custom button.
I read that it was maybe because of event bubbling, so I tried to use #click.native.stop but it doesn't work. Any help would be appreciated!
You could set a flag that is only set to true by the button's click-handler, then the hide-handler would only cancel the hide if the flag is set:
export default {
methods: {
closeDropdown() {
this._okToHide = true
this.$refs.dropdown.hide()
},
onEditControlMenuHide(bvEvent) {
if (this._okToHide) {
this._okToHide = false
} else {
bvEvent.preventDefault()
}
},
}
})
demo
<b-dropdown-item-button
#click.stop="closeDropdown"
>I'm a button
</b-dropdown-item-button>
try to use .stop modificator with click event on ur button and not on dropdown, it stops propagination event from button and should not trigger click event on dropdown.
I'm currently creating an electron application (Frontend is in Vue) which can trigger native Drag-and-Drop-Operations. These Operations behave strange if i trigger them with HTML5 Drag Events (like dragstart, dragstop, etc.). So I have to implement my own Drag-and-Drop Handler using mouseup, mousedown and mousemove. So in simple theory:
If MouseDown is triggered -> Set Flag
If MouseUp is triggered -> Remove Flag
If MouseMove AND Flag -> checkCurrentPosition vs. initialPosition -> Do something
new Vue({
el: "#app",
data: {
mousedown: false
},
methods: {
onMouseDown: function(e){
console.log('mousedown');
this.mousedown = true;
},
onMouseUp: function(e){
console.log('mouseup');
this.mousedown = false;
},
onMouseMove: function(e){
if(this.mousedown) {
console.log('mousedown && mousemove');
console.log('clientX:', e.clientX);
console.log('clientY:', e.clientY);
}
},
}
})
Fiddle
if you check this example, open up your browsers console and play a little bit around with the image (click, drag and drop,...) you will see that if you drag the placeholder image, the mousedown event is triggered and the flag is set. Then I would expect that the mousemove event would be triggered frequently, but this is not happening.
Normally if you bind mousemove to some Div its triggered frequently if you hover with your mouse over it and you can get the actual position for example. But this is not happening after mousedown.
NOTE: The mouseup event in the Fiddle is not bound to Window, so if you Drop the Element outside of its area the mouseup event will not be triggered for the element. So the flag is not removed and then you can see the behaviour I would expect. the mousemove event is frequently triggered. So I think that the problem is that while the mouse is pressed the mousemove event is not triggered correctly.
In VueJS, I'm using v-tooltip (https://github.com/Akryum/v-tooltip) for popovers.
In order to close a popup, they provide a directive called 'v-close-popover' which I can assign to a button/link inside the popover to close the popup. This works well.
However, I have a requirement where I need to close this popup from a Vue method. But I dn't know how to trigger closing of the popover from the method.
This is how you can achieve this.It will display tooltip on mouseOver event and remove on mouseLeave event.
In template->
<i
id="requiredIcon"
aria-hidden="true"
v-tooltip="{content: 'Required option is not available for this question.', show: isOpen, trigger: 'manual'}"
#mouseover="showTooltip"
#mouseleave="removeTooltip"
></i>
In Script->
data() {
return {
isOpen: false,
};
},
methods:{
showTooltip() {
this.isOpen = true;
},
removeTooltip() {
this.isOpen = false;
}
}
In case anybody else stumbles upon this issue, the v-popover component has a hide method. So if you were to place a ref on your popover component then you can access the hide method from it and call it :)
I am very new to Vue.js. In fact I just started today.
I have a problem.
Let's say I have button in a table somewhere in dom.
<table>
<tr><td><button v-on:click="showModal">Show</button>
</table>
Now I have a modal box outside of the scope of the button.
This button is inside a component of itself and the modal box has a component of itself too.
I am passing in an id with this button, and what I want to do is:
Fetch the id on button click
Show the record fetched in the modal and then finally perform some action on it
My problem is I am unable to get a method in the Modal component (that does a http request and fetches and renders the data) to trigger by the click event of this button.
The button and the modal has no relationship, they are not parent/child.
In modal component trigger method to fetch data by component ready state:
ready: function() {
this.getAllTheDataYouNeed();
},
You may use another life cycle hook:
https://vuejs.org/guide/instance.html#Lifecycle-Diagram
An option was to add the event broadcast in the common ancestor of both the components.
Like this:
var main = new Vue({
el: 'body',
components: {
zmodal : zmodal,
showhidebtn : showhidebtn,
},
methods: {
showModal: function (currentId) {
this.$broadcast('openModalBox', currentId);
}
}
});
Add an event listener in 'zmodal' and call this function showModal from on click event of 'showhidebtn' component.
It is working but now I have a set of codes outside the components that have to be triggered for this to work.
I wonder if there is a better way to do this.