Prevent LinkButton to fire OnClick when OnClientClick returns False

Question

i have linkbutton in my aspx page as

 <asp:LinkButton ID="LinkButton1" OnClientClick="if ( !MutExChkList()) return false;" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>

where on clientclick event i need to confirm something from user by using javascript and if javascript returns true then i need to fire OnClick event of button and if javascript returns false then i need to do nothing say don't postback the page...

Below is my javascript

<script type="text/javascript">
        function MutExChkList() {
         swal({
                title: 'Are you sure?',
                text: 'You will not be able to recover this imaginary file!',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#DD6B55',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel plx!',
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {

                   return true;


                } else {

                    return false;
                }

            });

        };
    </script>

i got help from following links

Stopping onclick from firing when onclientclick is false?

Prevent LinkButton post back OnClientClick not working. Why?

and much more searching....

if i use OnClientClick="MutExChkList(event);" then it postback in both cases either true or false

if i use OnClientClick="if ( !MutExChkList()) return false;" then it does not postback when function returns true

Can any one help me to get out of this... thanks in advance... i am using asp.net

You can't wait for a response from `swal` and return a value from inside a callback. The return is to the caller of the callback (which is inside `swal()` and not the click event handler). — iCollect.it Ltd, Jan 08 '16 at 12:13
I second what TrueBlueAussie said. Please realize that in fact your function `MutExChkList` does not return anything on its own. The callback function does return, but this is a different return value, does not have to do anything with outer function return value. Second point is that even if `MutExChkList` have returned, you should have used it as `OnClientClick="return MutExChkList(event);"`, not just `OnClientClick="MutExChkList(event);"` — Andrei, Jan 08 '16 at 12:16

iCollect.it Ltd · Answer 1 · 2016-01-08T12:27:57.003

As mentioned in comment, you can't return from inside a callback and expect the outside function to even know about it. The function exits immediately after calling swal() and always returns undefined.

One option is to block the initial click and trigger the click action from code after setting a sentinel/flag.

Something like:

var allow = false;
function MutExChkList() {
  if (!allow) {
    swal({
      title: 'Are you sure?',
      text: 'You will not be able to recover this imaginary file!',
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, cancel plx!',
      closeOnConfirm: false,
      closeOnCancel: false
    }, function(isConfirm) {
      if (isConfirm) {
        allow = true;                  // Allow next click to succeed
        $('#LinkButton1')[0].click();  // Hit the browser event direct
      }
    });
  }
  return allow;
};

The button then becomes something like:

<asp:LinkButton ClientIDMode="static" ID="LinkButton1" OnClientClick="return MutExChkList();" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>

Once you have a ClientID available on your button, you might as well do all the code the jQuery way:

<asp:LinkButton ClientIDMode="static" ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>

and the jQuery:

var allow = false;
$('#LinkButton1').click() {
  if (!allow) {
    swal({
      title: 'Are you sure?',
      text: 'You will not be able to recover this imaginary file!',
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, cancel plx!',
      closeOnConfirm: false,
      closeOnCancel: false
    }, function(isConfirm) {
      if (isConfirm) {
        allow = true;                  // Allow next click to succeed
        $('#LinkButton1')[0].click();  // Hit the browser event direct
      }
    });
  }
  return allow;
});

thanks for your time sir...! your first approach is working quit well but when i refresh then page by Ctrl+f5 then it will fire OnClick event automatically ... so then now how to prevent this,?? — Waqas, Jan 08 '16 at 12:45
@Waqas: Page refresh throws away all JavaScript and variables and starts again. There is no way it will remember the `allow` flag being set. Ar eyou just assuming this will happen? — iCollect.it Ltd, Jan 08 '16 at 15:18

CarlosClavelJr · Answer 2 · 2020-06-30T15:19:55.593

I have a solution. yes, you can't return from inside a callback and expect the outside function to even know about it. The function exits immediately after calling swal() and always returns undefined or some return inside.

my example, I always return false, in my function I send the button object that I clicked to click on it again. Then I have a variable called Myflag, my variable tells me if I clicked on the sweetalert, if Myflage is false I show the sweetalert again, if Myflag is true then I return true, OnClick immediately executes the server method.

Something like:

var Myflag = false;

function EliminarRegistroJavaS(e) {
  if (Myflag == false) {
    Swal.fire({
      title: 'Eliminar registro',
      text: 'Desea quitar el Registro?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Si, Quitar!',
      closeOnConfirm: true
    }).then((result) => {
      if (result.value) {
        Swal.fire(
          'Eliminado!',
          'Registro de Eliminado',
          'success'
        );
        Myflag = true;
        e.click()
      };



    });
    return false;
  } else {
    Myflag = false;
    return true;
  }
}

<asp:LinkButton ID="lnkRemove" class="btn btn-danger btn-sm" runat="server" CommandArgument='<%# Eval("idregistro")%>' OnClientClick="return EliminarRegistroJavaS(this); return false;" Text="Borrar" OnClick="MethodoElminarServer"></asp:LinkButton>

Welcome to SO, while we appreciate you taking time to help out patrons, it's encouraged to add some details to your answer explaining as to why the OP was getting the issue in the first place and what it takes to correct that. — shuberman, Jun 29 '20 at 07:39

Prevent LinkButton to fire OnClick when OnClientClick returns False

2 Answers2