i want to show a dialog box before deleting a files, how i can do it with vue?
here what i try
my button to delete a file
Delete
and here my delete method
DeleteUser(id, index) {
axios.delete('/api/artist/'+id)
.then(resp => {
this.artists.data.splice(index, 1);
})
.catch(error => {
console.log(error);
})
},
the dialog is showing but whatever i choose it keep delete the file.
Try this
Delete
DeleteUser(id, index) {
if(confirm("Do you really want to delete?")){
axios.delete('/api/artist/'+id)
.then(resp => {
this.artists.data.splice(index, 1);
})
.catch(error => {
console.log(error);
})
}
},
Simply use if(confirm('are you sure?')) inside DeleteUser.
DeleteUser(id, index) {
if(confirm('are you sure?'))
axios.delete('/api/artist/'+id)
.then(resp => {
this.artists.data.splice(index, 1);
})
.catch(error => {
console.log(error);
})
},
and remove the onClick
Demo https://jsfiddle.net/jacobgoh101/ho86n3mu/4/
You can install an alert library (Simple Alert) from here for more beautiful view
And then, you can use options to show alert box with question or anything else. This library has a few option. You can see them if you check above link.
this.$confirm("Are you sure ?", "Class is deleting...", "question").then(()=>{
axios.delete("/classes/" + studentClass.id).then(response =>{
this.$alert(response.data.message, 'Succes', 'success');
}).catch(error => {
this.$alert(error.response.data.message, 'Hata', 'error');
});
});
Description of alert box with parameters :
this.$confirm('Message is here', "Title is here", "type is here like success, question, warning");
For the case of using the Quasar Framework, you can use this plugin. I use globally !
export default {
methods: {
confirm() {
this.$q.dialog({
title: 'Confirm',
message: 'Would you like to turn on the wifi?',
cancel: true,
persistent: true
}).onOk(() => {
// console.log('>>>> OK')
}).onOk(() => {
// console.log('>>>> second OK catcher')
}).onCancel(() => {
// console.log('>>>> Cancel')
}).onDismiss(() => {
// console.log('I am triggered on both OK and Cancel')
})
}
}
}
<q-btn label="Prompt" color="primary" #click="prompt" />
Quasar Dialog
Related
Is there anyway for Laravel Livewire to make my CKEditor the same behavior as a wire:model.lazy? currently I have a script tag that listens for any changes. Which causes for every type a request towards the component..
<script>
ClassicEditor
.create(document.querySelector('#body'))
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('body', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
The behavior I want is either a button or everytime I lose focus on the CKEditor the $body will be updated.
Just listen to the submit button and update the value on click:
let editor;
ClassicEditor.create(document.getElementById('post'), {
// configs
})
.then(newEditor => {
editor = newEditor;
})
.catch(error => {});
document.querySelector('button[type="submit"]').addEventListener('click', function () {
#this.set('post', editor.getData());
});
For me and anybody else who have the same issue
The main issue here is on.change this piece of code on( 'change:data'... will make the editor send post request on every single key press.
Solving the issue.
<script>
let body_changed = false;
ClassicEditor
.create(document.getElementById('body'), {})
.then(editor => {
window.body = editor;
detectTextChanges(editor);
detectFocusOut(editor);
})
function detectFocusOut(editor) {
editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
if (!isFocused && body_changed) {
body_changed = false;
#this.set('body', editor.getData());
}
})
}
function detectTextChanges(editor) {
editor.model.document.on('change:data', () => {
body_changed = true;
});
}
</script>
Hope this will help me and others in future :)
I have an angular7 app in which i am using ngx-dialogs. I am using this modal for confirmation modal for delete purpose. I open modal to prompt user that "you want to sure to delete", if user click on "Yes" so item is deleted and modal should be close. I have this implementation in my component.ts
import { Ngxalert } from 'ngx-dialogs';
// after class intialization
confirmAlert: any = new Ngxalert;
delete = (rowData: Users) => {
if (rowData) {
this.confirmAlert.create({
title: 'Delete Warning',
message: 'Are you sure, you want to delete item?',
confirm: () => {
this._dataService.delete(this._constant.user + '/' + rowData._id)
.subscribe(res => {
console.log('delete response : ',res);
console.log('html element',(<HTMLElement>document.querySelector('.ngx-dialog')));
(<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
this._utilityService.hideSpinner();
if (res) {
res.success ? this._utilityService.showToster(res.message, 'Notification', 'success') : this._utilityService.showToster(res.message, 'Notification', 'danger');
// this.getUsers();
}else{
(<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
}
this.getUsers();
this._utilityService.hideSpinner();
}, error => {
this._utilityService.hideSpinner();
(<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
console.log('User Delete Error : ', error);
// this._popupService.OpenError('Having some issue..!');
this._utilityService.showToster('Having Some Issue..!', 'Warning', 'warning');
this.getUsers();
})
},
})
}
}
In this delete function when i received response from sever so i close that modal using this
(<HTMLElement>document.querySelector('#ngxdialog-1')).style.display = "none";
And it modal is closing only if i open inspect element or if i resize my chrome to smaller screen. But it's not closing modal on desktop screen. I don't know why is it happening. If it is closing modal on smaller screen so it should also close modal on desktop screen. It closes the modal if i delete item when inspect element. Please refer this video here
The issue is the code inside .subscribe() does not trigger an update in the html. A fix is using the ngZone provider.
You can try running your code inside Angular NgZone :
import { Ngxalert } from 'ngx-dialogs';
import { NgZone } from '#angular/core';
constructor(private ngZone: NgZone) { }
// after class intialization
confirmAlert: any = new Ngxalert;
delete = (rowData: Users) => {
if (rowData) {
this.confirmAlert.create({
title: 'Delete Warning',
message: 'Are you sure, you want to delete item?',
confirm: () => {
this._dataService.delete(this._constant.user + '/' + rowData._id)
.subscribe(res => {
this.ngZone.run(() => {
console.log('delete response : ',res);
console.log('html element',(<HTMLElement>document.querySelector('.ngx-dialog')));
(<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
this._utilityService.hideSpinner();
if (res) {
res.success ? this._utilityService.showToster(res.message, 'Notification', 'success') : this._utilityService.showToster(res.message, 'Notification', 'danger');
// this.getUsers();
}else{
(<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
}
this.getUsers();
this._utilityService.hideSpinner();
});
}, error => {
this._utilityService.hideSpinner();
(<HTMLElement>document.querySelector('.ngx-dialog')).style.display = "none";
console.log('User Delete Error : ', error);
// this._popupService.OpenError('Having some issue..!');
this._utilityService.showToster('Having Some Issue..!', 'Warning', 'warning');
this.getUsers();
})
},
})
}
}
You can find the issue here: https://github.com/angular/angular/issues/31749
It sounds like the modal is only closing on resize because resize is when the browser has to re-render, which applies the styles such as display:none. I'm not super familiar with Angular 7 but I think the answer is to trigger a render. Can you get rid of the tag to manipulate the DOM directly? That tag may refer to a virtual DOM.
So I have this Sweetalert2 function and it works great. Except it runs as soon as the page loads which is not what I want.
What I want is when I click on an element. I want it to be executed!
Also, I noticed that if the alert runs for the first time. It doesn't run when I click it because it ran on the first time
HTML
<i class="fas fa-search navigation__search-cart--icon"></i>
JS (SweetAlert file. From here I'm exporting the function that always gets called.)
export default sweetAlert = Swal.fire({
title: "Search...",
input: "text",
inputAttributes: {
autocapitalize: "off"
},
showCancelButton: true,
confirmButtonText: "Search",
showLoaderOnConfirm: true,
preConfirm: async val => {
try {
const response = await fetch(`//api.github.com/users/${val}`);
if (!response.ok) {
throw new Error(response.statusText);
}
return response.json();
} catch (err) {
Swal.showValidationMessage(`Request failed: ${err}`);
}
},
allowOutsideClick: () => !Swal.isLoading()
}).then(result => {
if (result.value) {
Swal.fire({
title: `${result.value.login}'s avatar`,
imageUrl: result.value.avatar_url
});
}
});
JS (Where the actual click happens)
import sweetAlert from "./sweetAlert";
const search = document.querySelector(
".fas.fa-search.navigation__search-cart--icon"
);
search.addEventListener("click", sweetAlert);
What should I do to stop the function from running on page load? And how can I make it run whenever I click on the element?
I want to remove a data from firebase but all documents I have found all said use .remove() function as I show as codesnippet here. But this is not work at Ionic 3. Is that function is changed or what is the point that I didn't see.
selectBook(indexOfBook : Book){
this.actionSheetCtrl.create({
title: indexOfBook.nameOfBook,
buttons:[{
text:'Edit',
handler: () =>{
// TODO:Send the user to EditPage
}
},
{
text:'Delete',
role: 'destructive',
handler: () => {
this.getBookRef$.remove(indexOfBook.key);//**************************************
}
},
{
text:'Cancel',
role:'cancel',
handler: () =>{
console.log("The user has selected the cancel button");
}
}
]
}).present();
}
I followed the initial plugin tutorial and got the Image Insert to work, but I would like to display a custom modal with two input fields instead of the prompt to set some more attributes.
How would I best implement this?
I know how to implement a normal modal in plain JS/CSS but I am a bit confused as to where to put the HTML for the modal to be displayed on the button click.
class Test extends Plugin {
init() {
editor = this.editor
editor.ui.componentFactory.add('SampleView', (locale) => {
const view = new ButtonView(locale)
view.set({
label: 'test',
icon: imageIcon,
tooltip: true
})
view.on('execute', () => {
//here I would like to open the modal instead of the prompt
})
})
}
}
For example, you can try to use SweetAlert2 which is zero-dependency pure javascript replacement for default popups.
import swal from 'sweetalert2';
...
view.on( 'execute', () => {
swal( {
input: 'text',
inputPlaceholder: 'Your image URL'
} )
.then ( result => {
editor.model.change( writer => {
const imageElement = writer.createElement( 'image', {
src: result.value
} );
editor.model.insertContent( imageElement, editor.model.document.selection );
} );
} )
} );