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

Answer 1

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;
});

Answer 2

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>