I have a dialog box which I am using from ModalTrigger from react spectrum(old version). The dialog box has two buttons, Okay and Cancel.Nothing to do on cancel, but the action should be triggered on clicking of Okay, the dialog box should close and action should initiate. I am able to initiate action but dialog box is not closing.
Code:
<ModalTrigger>
<Button label="Do something" variant="action"></Button>
<Dialog
confirmLabel="Confirm"
cancelLabel="Cancel"
mode="confirmation"
onConfirm={props.confirmAction}
keyboardConfirm="true"
backdropClickable={true}>
{title}
</Dialog>
</ModalTrigger>
How can I close the dialog button when user clicks onConfirm and then start props.confirmAction?As of now, the dialog box don't close until props.confirmAction completes.
We can achieve it in 2 ways.
Write a method and trigger dialog.dismiss followed by props. confirmAction
const onClickConfirm ()=>{
dialog.dismiss()
props. confirmAction()
}
Use onDismiss instead of onConfirm
Related
I am using MUI's Menu / MenuItem to build a menu of missions / tasks like this screenshot:
The MenuItem is clickable:
// ... other code
<MenuItem
value={mission.issueIdentifierId}
sx={{px: 0.5}}
onClick={() => handleMenuItemClick(mission.issueIdentifierId)}
>
<UploadMissionCard mission={mission} />
</MenuItem>
// ... other code
and when it is clicked, a modal window will pop up to show the detail info.
Now, within the MenuItem, there is the UploadMissionCard component, and in some cases, the UploadMissionCard would contain a MUI Button called Abort. On clicking the button, a different warning modal window will pop up.
However, when I click the button, the clicking action propagates to the menuItem as well and the menuItem is also clicked. So both modal window are opened.
In MUI, how can I put a Button inside a MenuItem and stop the clicking action on the button from passing on to the parent MenuItem?
Call stopPropagation method on button click event
<button onClick={(event) => {
event.stopPropagation();
}}></button>
we are using react and ant design as the frontend tech. One thing I noticed in the ant design modal. When we put onCancel attr in the modal like the code below. This will allow us can close the modal by clicking the 'X' in the right corner but it will also allow closing modal by clicking anywhere outside the model. Is there a way to prevent this outside click action while keeping the 'X' action ? Thanks in advance
<Modal
visible={visible}
title="My modal"
onOk={handleOk}
onCancel={closeMyModal}
className='myModal'
>
add
maskClosable = {false}
to prevent closing the modal dialog when the mask (area outside the modal) is clicked
<Modal
visible={visible}
title="My modal"
onOk={handleOk}
onCancel={closeMyModal}
className='myModal'
maskClosable={false}
>
You need to set property maskClosable by false to prevent it
According to Antd's documentation, you have two solutions:
If you use the <Modal> in your component, you'd to set maskClosable={false}. This prevents you from viewing the modal when you press outside the modal area.
You can check Modal.confirm() as follows:
https://ant.design/components/modal/#components-modal-demo-confirm
I've looked at Reuse Quasar Dialog plugin with custom component on another component that does not have any answers and I have close to the same question but I have structured code a bit different. On my parent form I have
<q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
<profile-dialog></profile-dialog>
</q-dialog>
and my profile-dialog is a form that is a simple template
<template>
<q-stepper
It seems that if I wrap the component on the parent page the dialog will open BUT I cannot pass in
prevent-close
or add a
#hide
I need to know when the dialog form is closed to save changes or prevent closing unless a button is clicked. Even adding the prevent-close in the parent does not work
<q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
<profile-dialog></profile-dialog>
</q-dialog>
If I create the form inside a q-dialog, so it becomes a dialog inside a dialog and set the v-modal to true when it closes the parent form still has the slight gray overlay until the page is clicked and the form will not open a second time
You can use the emit event in profile dialog for pass event so that you know that form is submitted or not and use persistent so that User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it.
<q-btn v-if="step == 4" #click="FinishClick" color="primary" label="Finish"/>
methods: {
FinishClick() {
alert("Finish Click From Profile Dialog");
this.$emit("profile_dialog_emmit",{'MSG':'TestData'})
}
}
<profile-dialog #profile_dialog_emmit="my_fun($event)"></profile-dialog>
In Parent Component.
methods:{
my_fun(data){
console.log("Assad");
alert("From Index Check Console for Data");
console.log(data)
this.showProfileForm=false;
}
}
Demo - https://codesandbox.io/s/clever-kilby-qf1gz
Go to the final step and click on finish will trigger the event and you can see an alert from the parent component and check the console for data displayed from the parent component.
I use jQuery UI to make the dialog box. How can I get the return value when the dialog box is open? If I use window.open then I know that I can get the return value by window.opener.
Supposedly a modal dialog box will open when I clicked a button. Then return a value because I want to put condition so the page can be reload if the dialog box does not open.I have tried this method but it does not work:
$('#button').click(function (){
if ($('#dialog').dialog('open')){
// do something
};
});
Also I only want the return value if the dialog box is open not when click any button in the dialog.Thanks in advance !
Let's say I have a collection containing 3 elements.
Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.
Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?
Here is a link to a gist containing the problematic code
https://gist.github.com/anonymous/85481507a1171467cae5
I have tried using a suggestion below that implements the following:
$('#hingle_dingle_0').on('click', function(e){
$('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
console.log(button);
});
However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.
Thanks for any help!
The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">
You can capture the calling button by tapping into the event thrown when the modal is opened:
$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
console.log(e.relatedTarget.id);
});
Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.