Stopping Postback with jquery-confirm confirm box, can't seem to get return value (webform project)

Question

So I am trying to change the confirm boxes in my application to something a bit more stylish.

The jquery-confirm.js add on was very appealing but I am really struggling to get it to work the way I want.

I have a simple link button on the page.

On their site this is the recommended implementation, but it doesn't return a value or stop postback.

$.confirm({
title: 'Encountered an error!',
content: 'Something went downhill, this may be serious',
type: 'red',
typeAnimated: true,
buttons: {
    tryAgain: {
        text: 'Try again',
        btnClass: 'btn-red',
        action: function(){
        }
    },
    close: function () {
    }
  }
});

I understand that I can move my onclick function into this, however it then will not be reusable. I just want to stop postback when the user hits cancel. That way I can call it from anywhere and it will just work.

I tried a few things to no avail here are a few examples. None of these stop the postback, but thought I should include what I have tried.

function ShowConfirm() {            
        var Confirmed = $.confirm({
            title: 'Please Confirm!',
            content: 'Are you sue that you want to delete this record?',
            type: 'red',
            typeAnimated: true,
            buttons: {
                tryAgain: {
                    text: 'Delete',
                    btnClass: 'btn-red',
                    action: function () {
                        this.preventDefault();
                    }
                },
                close: function () {

                }
            }
        });
        return Confirmed;
    }

Another one

function confirmation() {
        var defer = $.Deferred();
        $.confirm({
            title: 'Please Confirm!',
            content: 'Are you sue that you want to delete this record?',
            type: 'red',
            typeAnimated: true,
            buttons: {
                tryAgain: {
                    text: 'Delete',
                    btnClass: 'btn-red',
                    action: function () {
                        //Do something
                        defer.resolve(true);
                    }
                },
                close: function () {
                    //Do Something
                    defer.resolve(false);
                }
            }
        });
        return defer.promise();
    };

    function ShowConfirm() {
        confirmation().then(function (answer) {
            console.log(answer);
            ansbool = (String(answer) == "true");
            if (ansbool) {
                alert("this is obviously " + ansbool);//TRUE
            } else {
                alert("and then there is " + ansbool);//FALSE
            }
        });
    }

I also tried the last one with sending a return value, but that doesn't work either. My onclick server side code always executes.

Any Help would be greatly appreciated.

user_10527 · Answer

Ok, so the way this works?

In near "every" case, using some jQuery.UI dialog, sweetalert and in 99% of cases?

These jQuery and JavaScript add-ins ALL, and in ALL cases have one huge "similar" aspect:

that is the code does not wait, nor block the calling code.

The technical term for this type of code is what we call asynchronous.

In a nut shell, WHEN you call such code, the prompt dialog or whatever WILL display, but the code does NOT halt. The routine you call will 100% RUN though its code, display the dialog or whatever and THEN 100% finish, exit and return the value.

The reason for such code is to NOT freeze up the browser, not damage the re-plot, and display of information.

As a result, about the only two commands in JavaScript that actually halt code is

"alert()", and confirm().

The above two commands will halt code. Thus, your question:

You have a plane jane button, and say some code to delete or perform a damaging option, then we all wired up code like this:

And, as we know, if user hits cancel, then the button code does not run.

However, what about those js add-ins, and fancy dialogs? Well, they do NOT wait.

I don't have your particular js add-in, but since we all use jQuery, then I give an example how to do this with jQuery.UI.

So, we take the above button, and now do this:

Now, in above, we call a routine, and it will "display" our dialog prompt. But remember that rule above: The code FLOWS though, does not halt the calling js code.

So, what we need to do is STILL RETURN false the first time. (and now our cool prompt dialog is displayed.

the way to make this work? Well, in above we pass "this". In this context, "this" is the current button. So, our code now looks like this:

        
            my cool dialog text
            This delete can't be undone

So, you have to address the click even with [0].

Of course, I never use a link button - I useally just drop in a standard button, and there not a whole lot of reason to use a Linkbutton. But, the issue was and is use of jQuery.Click - it needs that [0] for the click event to work.

The code behind for my linkbutton click event is this:

Protected Sub cmdDel_Click(sender As Object, e As EventArgs)

    Dim cmdDel As LinkButton = sender

    Dim intPKID As Integer = cmdDel.CommandArgument

    Debug.Print("code here to delete row with PK id = " & intPKID)

    ' get current repeater row
    Dim OnerepRow As RepeaterItem = cmdDel.NamingContainer

    Debug.Print("Repeter index row click = " & OnerepRow.ItemIndex)

    ' get hotel name texgt box
    Dim txtHotel As TextBox = OnerepRow.FindControl("TextBox1")
    Debug.Print(txtHotel.Text)


End Sub

And when I run it

Stopping Postback with jquery-confirm confirm box, can't seem to get return value (webform project)

1 Answers

Edit: Example with jquery-confirm.

Edit3: - the issue is use of LinkButton