I am using Primeng Dialogue with a Form inside it. Form has a cancel button where I am passing form (ngForm) variable to check if the form is in dirty mode or not. If it is in dirty mode I am showing a cofirmation dialogue. The same thing will happen if the user clicks on "X" button in Primeng Dialogue. I am getting NgForm when I click on "Cancel" button but when I am passing form variable in (onHide) function like (onHide)="Cancel(f)", NgForm data is getting as undefined on Cancel(form: NgForm) function. How I can pass the form variable in Primeng Dialogue's (onHide) function when the form is inside this dialogue?
HTML:
<p-dialog header="Retirement Plan Proposal" [(visible)]="isShowProspectModal"
modal="modal" width="1000" height="590" styleClass="modal-blue proposalModal
stickyFooterModal" appendTo="body" [closeOnEscape]="false" (onHide)="Cancel(f)">
<form style="padding-top:7px;" #f="ngForm" name="prospectDetailForm" *ngIf="isShowProspectModal"
(ngSubmit)="f.form.valid" novalidate autocomplete="off">
<p-footer>
<button [disabled]="(!f.dirty && !isFileUploaded) || isLoadingSave"
*ngIf="isSaveButtonVisible" class="btn btn-primary btn-small mr5"
type="submit"
(click)="saveProspect(true, f)" label="Save">
<i class="fa fa-floppy-o"></i> Save
<span class="icon-spiner" *ngIf="isLoadingSave"></span>
</button>
<button class="btn btn-primary btn-small" *ngIf="isSaveButtonVisible" type="button"
[disabled]="(!f.dirty && !isFileUploaded) || isLoadingSave"
(click)="Cancel(f)" label="Cancel">
<i class="fa fa-close"></i> Cancel
</button>
</div>
</p-footer>
</form>
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="400" appendTo="body">
</p-confirmDialog>
</p-dialog>
Cancel Button Function:
Cancel(form: NgForm) {
if (form.dirty) {
this.confirmationService.confirm({
message: 'Data has been changed in this form. Do you want to cancel?',
accept: () => {
this.isShowProspectModal = false;
}
});
}
}
Step 1:
remove *ngIf from "form" tag to get the form object in ts file using #ViewChild.
Step 2:
declare the form in ts file like:
#ViewChild('f', { static: true }) prospectEditForm: NgForm;
Step 3:
Close(form: NgForm) {
if (this.prospectEditForm && this.prospectEditForm.dirty) {
//do whatever you want
}
}
Related
I have a Respond Button inside a div with a Modal attached to it.
<div v-if="notification ? notification.type === 'App\\Notifications\\InterviewRequestEmployerReply' : ''">
<button class="btn btn-primary btn-sm text-right" #click="editNotificationRequest(notification)">Respond</button>
</div>
If a User clicks the 'Confirm Interview' button, The Respond Button should be replaced with this <strong class="text-success">Confirmed</strong>.
I have a method called createConfirmedInterviewRequest() that gets called when the User clicks on the 'Confirm Interview' button. So I'd like to create a method that will change the contents and then I would just call that method inside my createConfirmedInterviewRequest() method upon Success, but I don't know how to create this method or how this can be done.
Attached is a scrrenshot of my page with the Respond Button and Modal.
How can I do change the contents of the div using Vue?
UPDATED:
data() {
return {
notifications: {
noti: false
},
}
},
computed:{
computedConfirm(){
return this.notifications.noti ? true:false;
}
},
methods: {
confirmProcess(){
this.notifications.noti = true;
},
}
My method:
createConfirmedInterviewRequest: async function() {
this.confirmProcess(`data`);
}
Modal with button:
<b-button type="submit" variant="success" #click="confirmProcess(`data`)" class="mr-2 mt-2">
<i class="fas fa-handshake"></i>Confirm Interview
</b-button>
Respond button I want to disappear and substitute with <strong class="text-success">Confirmed</strong>.
<div v-if="notification ? notification.type === 'App\\Notifications\\InterviewRequestEmployerReply' : ''">
<button class="btn btn-primary btn-sm text-right" #click="editNotificationRequest(notification)" v-if="!computedConfirm">Respond</button>
Let me know if you need to know what data properties are inside of notifications.
Use v-if , v-else, condition will change in your editNotificationRequest method:
<div v-if="notification ? notification.type === 'App\\Notifications\\InterviewRequestEmployerReply' : ''">
<button v-if="clickConfirmed" class="btn btn-primary btn-sm text-right" #click="editNotificationRequest(notification)">Respond</button>
<strong v-else class="text-success">Confirmed</strong>
</div>
I have a form with a radio-button group:
<form name="search" class="form-inline" asp-controller="controller" asp-action="action" method="get">
<div class="btn-group" data-toggle="buttons">
<label onclick="document.search.submit()" class="btn btn-default #ActiveTime("AM")" onclick="document.search.submit()">
<input type="radio" name="time" value="am" autocomplete="off">AM
</label>
<label onclick="document.search.submit()" class="btn btn-default #ActiveTime("PM")" onclick="document.search.submit()">
<input type="radio" name="time" value="pm" autocomplete="off">PM
</label>
</div>
</form>
#ActiveTime:
public string ActiveTime(string time)
{
if (ViewData["time"].ToString() == time) { return "active"; }
return "";
}
Relevant section of controller\action:
string time = ( (String.IsNullOrEmpty(HttpContext.Request.Query["time"].ToString())) ? "am" : HttpContext.Request.Query["time"].ToString() ).ToUpper();
ViewData["time"] = time;
Clicking the AM or PM label will submit the form, but doesn't include the radio button's value. What am I missing?
It is not sending the value of the radio button because when user clicks on the label, the browsers javascript engine will execute the onclick event handler you wired up on that element. Your current handler will execute this code document.search.submit() which submits the form immediately, even before bootstrap library could adjust the radio button state.
You can solve the issue by hijacking the click handler and set the radio button value yourself and then submit the form (all in javascript).
Another option i would try is, to remove the form submit behavior from the radio button selection/click event. What if user want to change his selection ? I would create a separate "Submit" button for the form submission.
I also noticed you have onclick handler registered two times on your element. clean that up.
I want to Trigger boot-strap model on click of disabled text-box or text Area
I have tried it but it works fine with text box if the text box enabled
<input type="text" data-toggle="modal" data-target="#myModal" disabled="disabled"/>
Disabled elements don't fire click event on all the browsers, or all the inputs.
https://developer.mozilla.org/en-US/docs/Web/Events/click
Try this:
<span class="disabled">
<input type="text" data-toggle="modal" data-target="#myModal" disabled="disabled"/>
</span>
Javascript:
$('span.disabled').on('click', function(event) {
$('#myModal').modal('show');
});
OR if you want to collect the target from the input:
$('span.disabled').on('click', function(event) {
var modal_target = $(this).find('input').data('target');
$(modal_target).modal('show');
});
I have got some hidden buttons on the page. When I click on text input, one of these buttons shows on the page. Before:
<div field='login'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
<div field='name'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
After click on second input:
<div field='login'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
<div field='name'>
<input type="text">
<button class="submit">Save</button>
</div>
So I try to interact with second button by next selectors in my test:
static content = {
submitButton { $("button.submit") }
}
but I have next error:
isorg.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
If I write:
static content = {
submitButton { $("button.submit", 1) }
}
it works, but I need to work with one first visible button on the page. What is wrong?
Unfortunately there is no css selector to find visible elements but you can use displayed property of Navigator and its findAll() method to find the button that is visible:
static content = {
submitButton { $("button.submit").findAll { it.displayed } }
}
I have a Form and i want to disable the entire form on click of a Button ,please see this code
<div dojoType="dijit.form.Form" id="myForm" jsId="myForm" encType="multipart/form-data"
action="" method="">
<table>
<input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox"
<input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox"
</table>
<button dojoType="dijit.form.Button" type=button onClick="console.log(myForm.getValues())">
Get Values from form!
</button>
<button dojoType="dijit.form.Button" type="submit" name="submitButton"
value="Submit">
Submit
</button>
<button dojoType="dijit.form.Button" type="reset">
Reset
</button>
<button dojoType="dijit.form.Button" onClick="callMe()">
Disable IT
</button>
</div>
I have written a function callMe to disable this
function callMe()
{
dijit.byId('myForm').disabled=true;
}
Dijit forms do not have a property "disabled", but rather you have to overwrite the onSubmit event:
dijit.byId('myForm').onSubmit = function () {
// If we return false here, the form will not be submitted.
return myMagicEnabledFlag;
};
Note that you cannot use dojo.connect as you have to modify the return value of the event and not just connect to it.
For disabling the entire form elements, use the "getChildren()" function of the dijit form, which would return the array of all the field widgets of that corresponding form. Then, you need to disable the widgets of that array. See below sample:-
dijit.byId('myForm').onSubmit = function () {
var widgets = dijit.byId('myForm').getChildren();
for(var i=0;i<widgets.length;i++) {
widgets[i].set('disabled', true);
}
//if you need to prevent the form submission & just disable, return false,
//else ignore the following return stmt
return false;
};