Below is an example of my old code which was working. This code created a confirmation screen and on conformation deleted a user. However I want to use a toast element to help create a better confirmation screen. This toast element requires the methods to be split up into onConfirm and onReject. And im wondering if there is a way to pass the variable from my deleteUser method into the onConfirm method similar to how I pass it in the code below. (.then(this.onTeacherDeleted(user))
deleteUser(user) {
if (confirm("Are you sure you want to delete: " + user.name + "?")) {
this.working = true;
axios.delete('/teachers/' + user.id)
.then(this.onTeacherDeleted(user))}
// this.$toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Are you sure you want to delete this placement?', group: 'bc'});
},
onTeacherDeleted (user) {
this.$toast.add({severity:'success', summary: user.name + 'Deleted Successfully', detail:'The teacher was successfully delted from the database', life: 3000});
window.location.reload()
}
How do I pass the user variable into the onConfirm method from the deleteUser method?
deleteUser(user) {
this.$toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Are you sure you want to delete this placement?', group: 'bc'});
},
onConfirm(user) {
this.$toast.removeGroup('bc');
this.working = true;
axios.delete('/teachers/' + user.id)
.then(this.onTeacherDeleted(user))
},
onReject() {
this.$toast.removeGroup('bc');
},
The onConfirm and onReject are both on click events that happen earlier in the code (see below) :
<button class="btn border border-success rounded-3" type="button" #click="onConfirm" this.onTeacherDeleted(user) aria-expanded="false">
<button class="btn border border-danger rounded-3" type="button" #click="onReject" aria-expanded="false">
If you show more of your code maybe i can give a better solution, but from what i can see, you can just make a variable to track which user is being deleted at the moment and set its value in the:
deleteUser(user) {
this.$toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Are you sure you want to delete this placement?', group: 'bc'});
this.userToBeDeleted = user;
},
And then just use that variable in the onConfirm:
onConfirm() {
this.$toast.removeGroup('bc');
this.working = true;
axios.delete('/teachers/' + this.userToBeDeleted.id)
.then(this.onTeacherDeleted(this.userToBeDeleted))
},
Related
I'm trying a simple form that has CRUD functionality.
When I click EDIT button It shows all the objects and it's fine.
editHandler func gets all things from this button:
<button
onClick={() => editHandler(discount)}
className='btn btn-info btn-sm'
data-bs-placement='top'
title='Edit Info'
>
<i className='fa fa-edit'></i>
</button>
When I console this function by passed the vlaues:
const editHandler = (e) => {
console.log(e);
}
This is the object consoled editHandler:
{
children: (3) ["Mahila", "Amira", "Badru-diin"]
date: "2020-11-22T10:49:32.296Z"
department: {_id: "5f8158396931c1c9cd164b54", name: "Inpatient"}
empId: "YH-A0184"
empName: "Abdulkadir Ahmed Mohamed"
fatherName: "Ahmed Mohamed Muuse"
hasChildren: true
husband: ""
isMale: true
isSingle: false
motherName: "Madina Ahmed Muse"
wives: [" Nuurto Abdi Ali"]
}
But when I use setValue is show only half of my objects if I click button I again it show again 70% and finilly if I click it show all:
THe finction is like this:
const editHandler = (e) => {
setValue('empId', e.empId)
setValue('empName', e.empName)
setValue('department', e.department._id)
setValue('fatherName', e.fatherName)
setValue('motherName', e.motherName)
setValue('isSingle', e.isSingle)
setValue('isMale', e.isMale)
setValue('wives', e.wives)
setValue('husband', e.husband)
setValue('hasChildren', e.hasChildren)
setValue('children', e.children)
setEdit(true)
console.log(watch())
}
The consoled result from watch():
{
department: "5f8158396931c1c9cd164b54"
empId: "YH-A0184"
empName: "Abdulkadir Ahmed Mohamed"
fatherName: "Ahmed Mohamed Muuse"
isMale: true
isSingle: false
motherName: "Madina Ahmed Muse"
}
and there is dependent values like isSingle, which show husband or wife if it's false.
What I'm doing wrong. I'm new to react-hook-form.
Help.
I found something which is causing the issue is that the dependent checkboxes like show husband if !isSingle and !isMale.
but my issue still stands I need that dependent with working code.
I know how to ask a user for his or her user name by a popup with Vue-SweetAlert2.
<template>
<v-btn class="create-button" color="yellow" #click="alertDisplay">Create</v-btn>
<br/>
<p>Test result of createCustomer: {{ createdCustomer }}</p>
</div>
</template>
<script>
export default {
data() {
return {
createdCustomer: null
}
},
methods: {
alertDisplay() {
var customer = await this.$swal({
title: 'What is your Name?',
input: 'text',
inputPlaceholder: 'Enter your name here',
showCloseButton: true,
});
console.log(customer);
this.createdCustomer = customer;
}
}
}
</script>
With code like the one above, you can store whatever the user typed into createdCustomer, and it should be displayed on the screen after the user gives the input.
But what if I wanted to ask the user for multiple pieces of information?
For example, how do I ask for info like
"customerNumber" (also want to make sure that alphabets and numbers are combined)
"locale" (also want to make sure that the input is a collection of choices that the user chooses from, like drop down menu, rather than a text field where you can type in whatever you like)
"firstName" (also want to make sure that the name doesn't exceed 255 characters)
etc.
in a single popup?
I tried to set multiple input fields like below, but I got a warning "Unknown parameter", and this doesn't seem to be a valid way.
var customer = await this.$swal({
title: 'Fill in your personal data',
input1: 'text',
input2: 'text',
input3: 'text',
inputPlaceholder: 'Enter your name here',
showCloseButton: true,
});
And how do I check if the user has given a valid input (like the name is within 255 characters, both of alphabets and numbers are used etc)?
If I were using C or Java, I could imagine using if-statements like
if(length <= 255){
// proceed
} else {
// warn the user that the input is too long
}
somewhere in the code, but in this case I don't know how I can do a similar if-statement like thing within the popup...
[ADDITIONAL QUESTION]
Is it also possible to pass an object that consists of multiple smaller elements, like "address"?
"address": {
"street": "string",
"city": "string",
"country": "USA",
"region": "string",
"zipCode": "string"
}
As per the documentation :
Multiple inputs aren't supported, you can achieve them by using html
and preConfirm parameters. Inside the preConfirm() function you can
return (or, if async, resolve with) the custom result:
const {value: formValues} = await Swal.fire({
title: 'Multiple inputs',
html: '<input id="swal-input1" class="swal2-input">' +
'<input id="swal-input2" class="swal2-input">',
focusConfirm: false,
preConfirm: () => {
return [
document.getElementById('swal-input1').value,
document.getElementById('swal-input2').value
]
}
})
if (formValues) {
Swal.fire(JSON.stringify(formValues))
}
https://sweetalert2.github.io/
For validation you have to use the inputValidor prop like this :
const {value: ipAddress} = await Swal.fire({
title: 'Enter your IP address',
input: 'text',
inputValue: inputValue,
showCancelButton: true,
inputValidator: (value) => {
if (!value) {
return 'You need to write something!'
}
}
})
if (ipAddress) {
Swal.fire(`Your IP address is ${ipAddress}`)
}
I'm struggling with a problem using Angular and PrimeNG.
There is an Input Field for weight allowing numbers up to 150. If the typed in value is greater than 150, a Confirm Button appears below the Input Field.
If this button is clicked, the Confirm Dialog pops up, asking "Are you sure?". It contains two buttons to choose from, "Yes" and "No".
1.) Choosing "No" should close the Confirm Dialog and delete the previously typed-in value in the input field (this works). The Confirm Button shall vanish (fails).
2.) Choosing "Yes" should close the Confirm Dialog and leave the typed-in value (this works). Confirm button shall vanish (also fails).
Is it somehow possible to let the button disappear after the Confirm Dialog is closed?
test.component.html:
<div class="p-col-12 p-md-6 p-lg-5">
Weight:
<div class="ui-inputgroup">
<input pInputText type="number" id="weight" name="weight" [(ngModel)]="newTest.testWeight"
placeholder="---">
<span class="ui-inputgroup-addon">kg</span>
</div>
<div *ngIf="validateIfWeightOutsideRange()">
<div>
<p-confirmDialog key="confirmWeightTest"></p-confirmDialog>
<button type="button" (click)="confirmWeightTest()" pButton icon="pi pi-check"
label="Please confirm!">
</button>
<p-messages [value]="messagesWeightTest"></p-messages>
</div>
</div>
</div>
test.component.ts
messagesWeightTest: Message[] = [];
confirmWeightTest() {
this.confirmationService.confirm({
message: 'Are you sure?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
key: 'confirmWeightTest',
accept: () => {
this.messagesWeightTest = [{
severity: 'info', summary: 'Confirmed', detail: 'The input is correct.'}];
},
reject: () => {
this.sessionService.newTest.testWeight = null;
}
});
}
Please note: The method "validateIfWeightOutsideRange()" works, therefore I think it's unnecessary to show it here.
Here is the link to PrimeNG's documentation: https://www.primefaces.org/primeng/#/confirmdialog
Maybe you have an idea?
You can simply take one bool variable and set it on confirmDialog button click
messagesWeightTest: Message[] = [];
public weightConfirmed: boolean = false;
confirmWeightTest() {
this.confirmationService.confirm({
message: 'Are you sure?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
key: 'confirmWeightTest',
accept: () => {
this.messagesWeightTest = [{
severity: 'info', summary: 'Confirmed', detail: 'The input is correct.'}];
this.weightConfirmed = true;
},
reject: () => {
this.sessionService.newTest.testWeight = null;
this.weightConfirmed = true;
}
});
}
<div *ngIf="validateIfWeightOutsideRange()">
<div>
<p-confirmDialog key="confirmWeightTest"></p-confirmDialog>
<button *ngIf="!weightConfirmed" type="button" (click)="confirmWeightTest()" pButton icon="pi pi-check"
label="Please confirm!">
</button>
<p-messages [value]="messagesWeightTest"></p-messages>
</div>
</div>
Good Evening,
I'm fairly new to JavaScript. I have a book and scour the internet when looking for answers. I see that the JavaScript landscape seems to have a plethora of paths and frameworks. To the question, I'm trying to use unobtrusive javascript with sweetalert. I had an issue with onclick finishing the function before an option was selected. I altered the function to return false by default and let the path nullify the onlick function and click the button. Is the following reasonable form ? Or would another method be recommended for the same effect? If so, please indicate why its better. Also, no framework/library answers for the moment please.
window.onload = function() {
function doSomething() {
var button = document.getElementById("edit");
swal({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, Update it!',
cancelButtonText: 'No, stop'
}).then((result) => {
if (result.value) {
button.onclick = null;
button.click();
// For more information about handling dismissals please visit
// https://sweetalert2.github.io/#handling-dismissals
} else if (result.dismiss === swal.DismissReason.cancel) {
swal(
'Cancelled',
'No Update Occured :)',
'error'
)
}
})
return false;
}
document.getElementById("edit").onclick = doSomething;
<form action="{{route('categories.update',$cat->id)}}" method="post">
{{method_field('patch')}}
<div class="form-group">
<label for="title">Name</label>
<input type="text" name="name" class="form-control" value="{{$cat->name}}">
<label for="description">Description</label>
<input type="text" name="description" class="form-control" value="{{$cat->description}}">
</div>
<button class="btn btn-primary" type="submit" id="edit">Edit Category</button>
{{#csrf_field()}}
</form>
I am trying to bind an attribute to and id I have on a button to change its styling, basically I have a courses database table(using Laravel as backend) where each course has a Boolean named completed, All I want to do is if the course is completed(true) to render a specific id, and if it is not(false) to render another one, that's it, here's my code,
This is the blade template, this is inside a table:
<td>
<form method="POST" action="{{ route('course.completed', $course->name) }}" id="form-submit">
{{ csrf_field() }}
#if ($course->completed)
<button #click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id="cssClass">#{{ text }}</button>
#endif
</form>
And here is the vue instance, All i want to do here is to add an if condition that will set the cssClass properly to the name of the id that I want:
<script>
new Vue({
el: '#app',
data: {
cssClass: '',
text: ''
},
methods: {
onSubmit: function(course) {
axios.post('/MyCourses/' + course.name)
// .then(function (response){
// });
}
},
//Basically here's what I would like to be able to do
if (course.completed == true) {
this.cssClass = 'coursetogglingtrue',
this.text = 'Done!'
} else {
this.cssClass = 'coursetogglingfalse',
this.text = 'Not Yet!'
}
});
</script>
Right now the above code in the view instance errors out with "Uncaught SyntaxError: Unexpected token ." directed at the if statement course.completed, and it doesn't go away unless I delete the whole if statement, I know I'm not fetching the course from anywhere, I just don't know how yet, if there is a better idea/approach please let me know, and thanks for your time.
UPDATE:
Here's a change, this is what I have done so far,
As for the view:
#if ($course->pivot->completed == true)
<button #click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id="[isActive ? greenClass.aClass : redClass.aClass]">#{{ greenClass.text }}</button>
{{-- #else
<button #click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id="[isActive ? greenClass.aClass : redClass.aClass]"></button> --}}
#endif
Now as for the vue instance:
<script>
new Vue({
el: '#app',
data: {
isActive: true,
greenClass: {aClass: 'coursetogglingtrue', text: 'Done!'},
redClass: {aClass: 'coursetogglingfalse', text: 'Not Yet!'}
},
methods: {
onSubmit: function(course) {
axios.post('/MyCourses/' + course.name)
// .then(function (response){
// });
this.isActive = !this.isActive;
}
}
});
</script>
Since that I know the blade #if condition is passing as true, I can hardcode the is active is true, and when I press on the button I get what I wanted the class actually toggles, if that is not true I default to the other class, now the problem is I need that action to be performed on exactly one button, the one I pressed on, right now what happens is every single button toggles its class, I know that once again it's due to my code not being explicit about this, the thing is I don't know how yet, so please help if you have any idea, have been stuck on this for weeks and weeks, it's really frustrating that I can't get this one simple thing to work.
It doesn’t make sense to put an expression as a property key.
Try this:
new Vue({
el: '#app',
data: {
cssClass: '',
text: ''
},
methods: {
onSubmit: function(course) {
axios.post('/MyCourses/' + course.name)
// .then(function (response){
// });
if (course.completed == true) {
this.cssClass = 'coursetogglingtrue',
this.text = 'Done!'
} else {
this.cssClass = 'coursetogglingfalse',
this.text = 'Not Yet!'
}
}
}
});