Prevent LinkButton post back OnClientClick not working. Why?

Question

I know there are plenty of answers surrounding this topic but I just cannot get this to work.

I need to prevent a link button posting back and the following code is not working. The code is definitely being hit in all the required places.

Link button definition:

  <asp:LinkButton ID="NavHelp" OnClientClick="showConfirm(event);" OnClick="NavHelp_Click" ToolTip="Help" runat="server"></asp:LinkButton>

Javascript function (definitely being hit)

function showConfirm(event) {
  event.stopPropagation();
  return false;
}

However after showConfirm returns false the link button still posts back to the server side NavHelp method.

As a side note, I also put a breakpoint in the __doPostback method generated by .NET and it does get hit after showConfirm returns false.

Can anyone shed any light on this?

Answer 1

Right, figured it out. I needed to include the return statement in the OnClientClick attribute:

OnClientClick="return showConfirm(event);"

NOT

OnClientClick="showConfirm(event);"

Answer 2

incidentally, you can use your original code, but rather than using event.stopPropagation() you can use event.preventDefault()

so your code would be

<asp:LinkButton ID="NavHelp" OnClientClick="showConfirm(event);" OnClick="NavHelp_Click" ToolTip="Help" runat="server"></asp:LinkButton>

function showConfirm(event) {
  event.preventDefault();
  return false;
}

read some more on event.preventDefault() vs event.stopPropagation() here : http://davidwalsh.name/javascript-events

basically the preventDefault prevents the elemnt from carrying out its dfault action, ie visting a link or submitting a form, while stoppropagation allows the dfault action to occur, BUT doesn't inform any parent elements that it has happened.

i created a little jsfiddle : http://jsfiddle.net/XgSXr/ that shows you the prevent default, this should allow you to put in your own javascript logic, display modals etc, before successfully pushing through the link click.

Answer 3

This works:

<asp:LinkButton ID="NavHelp" ClientIDMode="Static" OnClientClick="showConfirm(event);" OnClick="NavHelp_Click" ToolTip="Help" runat="server"></asp:LinkButton>
<script>
    $("#NavHelp").click(function(event) {
        if (showConfirm()) {
            event.stopPropagation();
            event.preventDefault();
            return false;
        }
        return true;
    });
</script>

Answer 4

Add Return statement in onClientClick Javascript Event

OnClientClick="return showConfirm(event);"

So when showConfirm return false then request will not be transer to server and page not postback.