Dialog never enter the confirm method
benjamin-hubert opened this issue · 20 comments
Hi,
We're having issues with your plugin. We're using it with the <script> include and, following the documentation, we declare
window.Vue.use(VuejsDialog.default);
Here is our code
this.$dialog.confirm('Confirm delete', {
loader: true,
okText: 'Yes',
cancelText: 'No'
})
.then(function (dialog) {
console.log('confirm');
dialog.close();
});
The code never enters the then function and it throws a message in the console :
Possible Unhandled Promise Rejection: undefined
We tried without the loader, same error.
Thanks :)
Hello @GOUAILLE , The easiest way to detect what went wrong is by actually adding a catch handler which prints the error to the console.
this.$dialog.confirm('Confirm delete', {
loader: true,
okText: 'Yes',
cancelText: 'No'
})
.then(function (dialog) {
console.log('confirm');
dialog.close();
}).catch(err => {
console.debug(err.toString()); // Detailed error message
});
Hi @Godofbrowser and thanks for your quick answer.
Actually, it's not much of a help since the message is
message: "e is undefined"
@GOUAILLE Please can you confirm that the dialog is installed? does it render at all?
Yes it renders properly. The cancel button is fully working. The "confirmation" button throw an exception and goes into the catch method.
I just did a quick test and can't seem to reproduce the issue.
<!DOCTYPE html>
<html>
<head>
<title>Vuejs dialog Demo</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vuejs-dialog@0.4.7/dist/vuejs-dialog.min.js"></script>
</head>
<body>
<div id="app">
<button @click="click">click</button>
</div>
<script type="text/javascript">
window.Vue.use(VuejsDialog.default);
new Vue({
el: "#app",
methods: {
click(){
this.$dialog.confirm('Confirm delete', {
loader: true,
okText: 'Yes',
cancelText: 'No'
})
.then(function (dialog) {
console.log('confirm');
dialog.close();
}).catch(err => {
console.debug(err.toString()); // Detailed error message
});
}
}
})
</script>
</body>
</html>
From the error logged to the console
message: "e is undefined"
there ought to be a variable "e" somewhere inside the "then" handler.
Unless maybe the code is being obfuscated.
Seems to work with this jsfiddle... https://jsfiddle.net/osLfqyn7/9/
Going to search the main problem and coming back to you.
OK so the previous error was comming from the err.toString() method because there is no error sent to the catch method...
console.log(err) returns undefined.
Hello guys, same happened to me. Could enter in the "confirm/then" brackets after clicked in the positive answer. However this is happening only if write the dialog.confirm method using ES6. ex:
this.$dialog.confirm(
"To generate this pdf is necessary to register in the system. Would you like to do it?", {
loader: true
}
).then((dialog)=>{
window.location = "/login";}
).catch((dialog)=>{
//donothing
});if i dont use the arrow functions, code works perfect here.
No problem @Godofbrowser. I managed to use it withou using arrow functions. Now i'm using as stated below. Its working for me so i guess my problem is solved. :)
this.$dialog.confirm("messageHere", {
okText: "Yes",
cancelText: "No"
}).then(function(dialog){
window.location = "/login";
}).catch(function(dialog){
});@dnovaes I'm glad it's working but obviously, there's still a problem if you're able to use arrow functions somewhere in your code but not with the plugin.
Are you using a build tool like webpack to build the script?
If I do a delete from the firebase database, the delete goes through but the dialog box won't close and the buttons don't work, I'll have to do a page refresh to get rid of it.
If I do a local splice (the commented line) it worked fine.
Any ideas?
import VuejsDialog from "vuejs-dialog"
Vue.use(VuejsDialog)
methods: {
removeMenuItem(key) {
this.$dialog.confirm('Are you sure you want to delete?')
.then(function(dialog) {
dbMenuRef.child(key).remove()
// this.getMenuItems.splice(this.getMenuItems.indexOf(item), 1);
console.log(' Clicked on continue')
})
.catch(function (error) {
console.log(`Clicked on cancel ${error}`)
});
},
Hello @danchann You need to close the dialog manually if you have the dialog's loader enabled. You can close the dialog by calling dialog.close() in the then callback.
According to firebase docs, the remove method returns a promise and can also accept an onComplete callback.
This means you can do something like ::
removeMenuItem(key) {
this.$dialog.confirm('Are you sure you want to delete?')
.then(function(dialog) {
dbMenuRef.child(key).remove() // returns a firebase.promise
.then(() => {
dialog.close();
})
// this.getMenuItems.splice(this.getMenuItems.indexOf(item), 1);
console.log(' Clicked on continue')
})
.catch(function (error) {
console.log(`Clicked on cancel ${error}`)
});
}Hi @Godofbrowser
I've tried a few different variation but it still doesn't work.
According to the firebase docs remove() is not a promise, only set() and update is.
https://firebase.google.com/docs/database/web/read-and-write
I saw this on the Api reference https://firebase.google.com/docs/reference/js/firebase.database.Reference
Did you also try
removeMenuItem(key) {
this.$dialog.confirm('Are you sure you want to delete?')
.then(function(dialog) {
dbMenuRef.child(key)
.remove(() => { // accepts an onComplete callback
dialog.close();
})
// this.getMenuItems.splice(this.getMenuItems.indexOf(item), 1);
console.log(' Clicked on continue')
})
.catch(function (error) {
console.log(`Clicked on cancel ${error}`)
});
}Also, you may want to check the console to be sure something else isn't causing the script to stop.
Got the following errors:
- Remove failed: dialog.close is not a function
- Remove failed: Cannot read property '$dialog' of undefined
methods: {
removeMenuItem(key) {
this.$dialog.confirm('Are you sure you want to delete?')
.then(function(dialog) {
dbMenuRef.child(key).remove()
.then(function(error) {
this.$dialog.close()
console.log("Remove succeeded")
})
.catch(function(error){
console.log("Remove failed: " + error.message)
})
// this.getMenuItems.splice(this.getMenuItems.indexOf(item), 1);
console.log(' Clicked on continue')
// this.$dialog.close()
})
.catch(function (error) {
console.log(`Clicked on cancel ${error}`)
});
},
have already tried your above syntax as well.l
@danchann Please use arrow functions so the callback will be bounded to the parent context.
.then((error) => {
this.$dialog.close()
console.log("Remove succeeded")
})
.catch((error) => {
console.log("Remove failed: " + error.message)
})or cache the context into the variabe
let _this = this
// ... do stuffs
dbMenuRef.child(key).remove()
.then(function(error) {
_this.$dialog.close()
console.log("Remove succeeded")
})
.catch(function(error){
console.log("Remove failed: " + error.message)
})@Godofbrowser Got it, had to go the v-confirm way to get it working.
<button
class="btn btn-danger btn-sm"
v-confirm="{
loader: true,
ok: dialog => removeMenuItem(dialog, item['.key']),
cancel: doNothing,
message: 'Are you sure you want to delete?'
}"
>X</button>
removeMenuItem(dialog, key) {
dbMenuRef.child(key).remove()
.then((error) => {
dialog.close()
console.log("Remove succeeded")
})
.catch((error) => {
console.log("Remove failed: " + error.message)
})
},
Closing due to inactivity