Ketone Cops

July 30, 2008

Postback occurring after Cancel clicked

Filed under: ASP.NET 2.0,Javascript,programming — delroger @ 10:06 pm

It’s quite common to use a Javascript function when you want a website user to confirm that they want to delete a file (for instance) or a database record. In ASP.NET, you would add code to OnClientClick for a button (for example), along the lines of:

return confirm(‘Are you sure?’);

This can also be done in the code-behind under Page_Load or Page_PreRender as buttonname.Attributes.Add(“onclick”,”return confirm(‘Are you sure?’)”)

Similarly, you can also call a javascript function that does much the same thing, such as:

function confirm_delete()
    {
        if (confirm(“Are you sure?”)==true)
            return true;
        else
            return false;
    }

…and use:

 return confirm_delete(); 

for the onclick/onclientclick.

This would appear in the actual webpage as an OnClick event for the button. When the button is clicked, the user would see a javascript confirm window, with ‘Are you sure?’ and an OK and a Cancel button. Clicking OK would continue to process any code for the button; clicking Cancel would stop further processing.

It’s also common to find a lot of people have problems with this not working, and in the majority of cases it is because a javascript function is called that returns true or false, but the ‘return’ is missing. Using the example above, if you simply said

confirm(‘Are you sure?’); or confirm_delete();

without the ‘return’, the page would still postback, whatever had been clicked.

Today, I found that even with the ‘return’, postback was still occurring on a webpage I had created; in this case, a file delete still took place even when I clicked the ‘Cancel’ button and a value of false was being returned. 

So, just in case anyone else finds the same thing, this may well be a bug in Internet Explorer 7 (though I have not yet had chance to check this). The solution is to add some extra code to the return confirm, like this:

if (confirm(‘Are you sure?’) == false) {event.returnValue=false; return false; }else{ return true;};

It seems as though we have to specifically set the event.returnValue to be false to prevent further processing and postback.  This took me a few hours to work out, so hopefully this solution may save someone from wasting a similar amount of time, because it doesn’t seem to be very well documented so far.  And if it does help you, please leave a message and say ‘hi’!

Advertisements

18 Comments »

  1. Your blog is interesting!

    Keep up the good work!

    Comment by Alex — August 16, 2008 @ 10:58 am

  2. This was a great post, it fixed my page. There’s only one problem with your code. You need to remove the “return” keyword before the “confirm” keyword”. Having “return” before “confirm” is causing a javascript error on the page.

    Overall, excellent post. Our team will need to fix a lot of code to get this working again in IE7.

    Thanks.
    DJ

    Comment by DJ — September 12, 2008 @ 2:19 pm

  3. Thanks, DJ. You’re right, I’d left a ‘return’ in there by mistake – removed now. Glad the post helped.

    Comment by delroger — September 18, 2008 @ 8:42 pm

  4. Nice post, just a note: i had to comment the line event.returnValue=false;
    cause it raised a js error.
    Apart of this it work perfectly! 😉

    Comment by GG — October 9, 2008 @ 9:40 am

  5. Hi!
    My name is Jessika!

    Comment by BicOrigavegag — October 13, 2008 @ 6:21 pm

  6. BRILLIANT!! This had me stopped in my tracks too. I’m not sure I would have figured this out on my own. Many thanks!!

    Comment by JC — October 14, 2008 @ 7:08 am

  7. I was having this issue even with IE 6.0 in my ASP.NET 2.0 Web App. Very frustrating and not sure why it is happening. Your patch worked, Thanks!

    Comment by JP — November 14, 2008 @ 4:41 pm

  8. thanks a lot. It worked perfectly for me

    Comment by Vamshi Reddy — November 19, 2008 @ 11:47 am

  9. Thank you so much! This one had stumped me for days.

    Comment by Sharon Baker — March 23, 2009 @ 10:56 pm

  10. Hi! I was surfing and found your blog post… nice! I love your blog. 🙂 Cheers! Sandra. R.

    Comment by sandrar — September 10, 2009 @ 3:01 pm

  11. Hi? Man, a bit more than that!!! I’ve been pulling my hair out for hours!!!

    Though I ought to check that it works in Firefox as well… it does!!!

    Comment by Vincent — December 2, 2009 @ 8:11 pm

  12. I know this post is from 2008 but I still find it helpfull in 2010. Thanks for the help!

    Comment by KReed — July 2, 2010 @ 3:22 pm

  13. Hola! Perdón que escriba en español, pero ingles no es mi fuerte. Igualmente, espero que les sirva.

    Estuve probando lo que indicas y es cierto. en IE7 no funciona lo que dice Microsoft. Ahora bien, lo que indicas, no funciona para FieFox ya que arroja error que event no está definido. Pero para FireFox si funciona el return false.
    Entonces, hay que hacer una diferenciación entre los browsers. Lo que hago es identificar primero el browser y luego aplicar una u otra solución. Si bien solo funciona para estos dos, es facil ampliarlo a otros. Aca el código:

    Para identificar el brouser:

    var browserID = new String(), browserName = new String();
    browserName = navigator.appName
    if (browserName.indexOf(‘Explorer’) != -1)
    {
    browserID = ‘IE’;
    }
    else
    {
    browserID = ‘MZ’;
    }

    Y luego, a la hora de decidir el método para cancelar el postbak, pongo esto:

    if (browserID == ‘IE’)
    event.returnValue = false
    else
    return false;

    Espero que les sirva a otros.

    Muchas gracias por la ayuda!!!!

    Comment by Mariano — August 4, 2010 @ 6:52 pm

  14. Thank you! Thank you! Thank you! This was driving me crazy! I too had to do a check like Mariano, so everything would work regardless of browser. Here is what I ended up with:

    function confirmDelete(msg) {
    var browserID = new String(), browserName = new String();
    browserName = navigator.appName
    if (browserName.indexOf(“Explorer”) != -1)
    browserID = “IE”;
    else
    browserID = “MZ”;

    if (confirm(msg) == false)
    {
    if (browserID == “IE”)
    event.returnValue = false;
    else
    return false;
    }
    else
    return true;
    }

    Comment by Josh — August 17, 2010 @ 10:40 pm

  15. Dear Sir,
    This is excellent. This post helped me a lot to solve my problem(I spent 3 days before reading your post) even though I used this “confirmed” to do client side work whether user pressed OK or CANCEL. Thank you so much for your work. I greatly Appreciate it.

    Comment by NP — November 28, 2010 @ 10:05 pm

  16. Damn!!!!!!!!!!!!!!!!!! thanks alot!!!!! than worked 😀

    Comment by wiredC0de — June 24, 2011 @ 1:32 pm

  17. Awesome! Thanks dude. That problem has been bugging the crap out of me all day. Simply returning false worked yesterday but not today??? I’m using IE 8.

    Comment by Earl Wilkerson — May 3, 2012 @ 8:06 pm

  18. This TOTALLY saved me – THANK YOU! I’ve been banging my head on this all morning, really appreciate you posting this : )

    Comment by KW — October 11, 2012 @ 7:56 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: