Custom Alert with Postback validation

🌎 Discussion in English
1

Hello,
I’m trying to use Sweet Alert 2 and custom postback handlers. My javascript code:

dotvvm.postbackHandlers["postBackAlert"] = function PostBackAlert(options) {
    const title = options.title;
    const text = options.text;
    const confirmText = options.confirmText;
    const cancelText = options.cancelText;
    const cssClass = options.cssClass;

    return async function(next, args) {
        return new Promise(function(resolve,reject) {
            Swal.fire({
                title: title,
                text: text,
                preConfirm: async function() {
                    Swal.showLoading();

                    try {
                        let commit = await next();
                        let result = await commit();
                        return result;
                    }
                    catch{
                        reject({ type: "handler", handler: this, message: "Postback aborted by error." });
                    }
                }
            })
            .then((result) => {
                if(result.isDismissed) {
                    reject({ type: "handler", handler: this, message: "Postback aborted by user." });
                }
            })
        })
    }
}

preConfirm: Function to execute before confirming, may be async (Promise-returning) or sync.

I’m trying to run the postback after the user click on the confirm button and I want to throw an error if a model error is added server side and Context.FailOnInvalidModelState().

The code is working but I’m not sure if it’s the correct way to do it. Any one has any idea and what I should fix or if it is fine to keep it like that?

Thanks

2

I think that postback handler has a subtle issue – it does not call resolve of the new promise, meaning that the postback never completes, as far as DotVVM is concerned. The changes to view model are written when you call commit, but other postback handlers / afterPostback event subscribers will not see the postback completing. Postback concurrency queue could stall forever, as an example.

To fix this, I’d call resolve(commit), instead of await commit(). If you’d need to access the commit result, you could wrap the function: resolve(() => commit().then(result => { ....; return result }))

1 Like
3

Yeah I found later that a sucessfull postback would never completes, it was only working in case of reject. Using resolve(commit) instead make it works correctly.
Thank you!

1 Like