Prevent LinkButton post back OnClientClick not working. Why?

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

OnClientClick="return showConfirm(event);"

NOT
OnClientClick="showConfirm(event);"

Method 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, i.e. 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.

Method 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>

Method 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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x