We Keep Coding

Get the topmost dialog element?

I'm using the latest HTML5 dialog element. And I use showModal to display multiple dialogs. So how do I get the topmost dialog element when multiple dialog elements are visible?

The dialog element does not seem to have this functionality built in. I think the only solution is to manually track your open dialogs.
Whenever a dialog is opened, append it to an array. The last item in the array will always be your active (topmost) dialog.
function show(dialog) {
dialog.showModal();
openDialogs.push(dialog);
logTopDialog();
}
function close(dialog) {
const i = openDialogs.indexOf(dialog);
if (i !== -1) {
openDialogs.splice(i, 1);
}
logTopDialog();
}
function logTopDialog() {
console.log(`Top dialog = ${openDialogs.at(-1)?.id}`);
}
const openDialogs = [];
btn1.addEventListener('click', e => show(dialog1));
btn2.addEventListener('click', e => show(dialog2));
dialog1.addEventListener('close', _ => close(dialog1));
dialog2.addEventListener('close', e => close(dialog2));
<dialog id="dialog2">
<form method="dialog">
<p>Second dialog!</p>
<button>Close</button>
</form>
</dialog>
<dialog id="dialog1">
<form method="dialog">
<p>This is the first dialog here.</p>
<button id="btn2" type="button">Open Dialog 2</button>
<button>Close</button>
</form>
</dialog>
<button id="btn1">Open Dialog 1</button>

Unable to use prevent default option on button click using Vue.js

Here what I am trying is I have dynamic data and displaying it in section and section is clickable and under that, I have 2 buttons called edit, del after clicking those buttons also it should trigger some action.
The problem I am facing is even though I am clicking edit action but the section button click also getting triggered and I tried putting #click.prevent still facing the issue.
what I need is whenever I click on edit or del the section action should not trigger below is my code sandbox URL
https://codesandbox.io/s/vuejs-with-import-json-example-forked-tjn45?fontsize=14&hidenavigation=1&theme=dark
code
<template>
<div>
<section
style="border-style: dotted"
v-for="(name, index) in names"
:key="index"
#click.prevent="methodOne"
>
<div>
<button #click.prevent="edit">Edit</button>
<button #click="del">Del</button>
</div>
<div>
{{ name }}
</div>
</section>
</div>
</template>
<script>
import states from "../assets/data.json";
export default {
name: "HelloWorld",
computed: {
names() {
return states.accounts.map((item) => {
return item.name;
});
},
},
methods: {
methodOne() {
alert("Method One");
},
edit() {
alert("Edit");
},
del() {
alert("DELETE");
},
},
};
</script>

This is event propagation issue, .prevent don't stop the propagation, Use .stop instead of .prevent. Update example here
<div>
<button #click.stop="edit">Edit</button>
<button #click.stop="del">Del</button>
</div>

How to find which button was clicked among 2 buttons in Vue.js?

I have 2 buttons:
<Button
:disabled="disabled"
:loading="isLoading1"
#click="handleClick1"
>Btn 1</Button>
<Button
:disabled="disabled"
:loading="isLoading2"
#click="handleClick2"
>Btn 2</Button>
computed: {
isLoading1(){
...
}
isLoading2(){
...
}
methods:{
handleClick1(){
...
}
handleClick2(){
...
}
}
The point is that both buttons have almost the same conditions for showing it loading. I need somehow to find which button was clicked for being able to show the loading case only for that button. How can I find which button was clicked? In other words, it should be loading only for the clicked button, not both buttons. How can be this achieved either by somehow tracking the clicked button or by another way?

Add one handler for the two event clicks with a parameter:
<Button
:disabled="disabled"
:loading="isLoading1"
#click="handleClick(1)"
>Btn 1</Button>
<Button
:disabled="disabled"
:loading="isLoading2"
#click="handleClick(2)"
>Btn 2</Button>
in methods use that index to know the clicked button :
handleClick(index){
...
}

What you can do is give each button an id:
<Button
id="button-1"
:disabled="disabled"
:loading="isLoading1"
#click="handleClick"
>
Btn 1
</Button>
<Button
id="button-2"
:disabled="disabled"
:loading="isLoading2"
#click="handleClick"
>
Btn 2
</Button>
And then pass your click event into the click handler function and retrieve the id of the button that was clicked:
methods: {
handleClick(e) {
console.log(e.target.id)
// If you want to to do something depending on the id:
if (e.target.id === 'button-1') {
this.doSomeMethod()
} else if (e.target.id === 'button-2') {
this.doSomeOtherMethod()
}
}
}

I want to hide div after clicking on close button Angular 6

I want to hide div after clicking on close button in Angular 6 and other want to change the other div class.
For example other div class is col-sm-7, once close button clicked it will change to col-sm-12.
In my component.html
<div id="custom-div">
<button class="close" type="button" click="featureHide()">X</button>
</div>
<div id="another-div" class="col-sm-7"></div>
In my component.ts
featureHide() {
document.getElementById('custom-div').style.display='none';
var element = document.getElementById("another-div");
element.classList.add("col-sm-12");
}
But its not working, please suggest.

I suggest to use Angular [ngClass] directive instead:
Here a stackblitz working example (remember to expand the browser tab to exceed the sm breakpoint)
//Apply [hidden] to hide the button
<div id="custom-div" [hidden]="!isShow" >
// Use '(click)' instead of 'click'
<button class="close" type="button" (click)="featureHide()">X</button>
</div>
//Apply [ngClass] directive
<div id="another-div" [ngClass]="{'col-sm-7': isShow , 'col-sm-12': !isShow }"></div>
In your ts file:
isShow = true;
featureHide() {
this.isShow= false;
};
It can also be done the way you tried, but change click to (click) first, then in your ts:
featureHide() {
document.getElementById('custom-div').style.display = 'none';
const element = document.getElementById("another-div");
element.classList.remove("col-sm-7");
element.classList.add("col-sm-12");
}

Your approach is wrong in angular. Try avoiding document.xxx use angular.xxx.
Please find the below code
In component.html
<div id="custom-div">
<button class="close" type="button" (click)="featureHide()">X</button>
</div>
<div *ngIf="hideFalg" id="another-div" class="col-sm-7"></div>
In my component.ts
hideFalg:Boolean = true
featureHide()
{
this.hideFalg = false; // this code will hide the div element since we have added the *ngIf
}
To display div
showDiv(){
this.hideFalg = true;
}

Don't trigger onClick for nested child elements

I have a simple modal component:
function Modal(props) {
return (
<div className={cx(styles.overlay, { show: props.show })} onClick={props.onClose}>
<div className={styles.modal}>
<span className={styles.closeBtn} onClick={props.onClose} />
{props.children}
</div>
</div>
)
}
the onClose prop triggers closing the modal, hence I attach it to styles.overlay (dark overlay that you typically see on modals that when clicked dissmises it) and to styles.closeBtn (a close button for modal).
The whole flow works besides the fact that anything inside styles.overlay when clicked on also dismisses the modal, which is not functionality I was after, hence I need to only dismiss it if that specific element is clicked not its children.

function Modal(props) {
return (
<div className={cx(styles.overlay, { show: props.show })} onClick= {props.onClose}>
<div className={styles.modal} onClick={e => e.preventDefault()}>
<span className={styles.closeBtn} onClick={props.onClose} />
{props.children}
</div>
</div>
)
}
I think, the best way is to have your overlay and your modal in two separate div, but this should work.

Add onClick(e)={e.stopPropagation();} to the modal dialog's click handler; this should prevent it from propagating to the overlay.
Hope it works! Good luck!