onclick confirm not working on tablet

Question

I've got a delete object link on a listing page with the following code:

<a href='/parameters/delete' 
    onclick='return confirm("Are you sure you want to delete this item?");' </a>

It all works fine on firefox and IE on my desktop. But it doesn't work on my tablet, which has apparently the same version of IE as the desktop: 11.0.9600.16518. H6wever, the server logs show that the desktop has

"Mozilla/5.0 (Windows NT 6.3; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0"

and the tablet

"Mozilla/5.0 (Windows NT 6.3; Trident/7.0; Touch; rv:11.0) like Gecko"

What happens when it works properly is that nothing happens if you select cancel in the confirm dialog. If you select OK in the confirm dialog it deletes the object, then returns to the listing page, flashing a message to say that the deletion was successful.

When it doesn't work properly, if you select cancel it looks as if nothing happens. But if you then refresh the listings page, the object has disappeared. Looking at the server logs, there was definitely a request to the delete url.

I've tried debugging it, by using the following code in the link:

<a href='/parameters/delete' onclick='return checkMe();' </a>

and adding in the following script:

<script language="javascript">
    function checkMe() {
        if (confirm("Are you sure")) {
            alert("Clicked Ok");
            return true;
        } else {
            alert("Clicked Cancel");
            return false;
        }
    }
</script>

It is clear that the onclick script is being run (well, we knew that because the confirm dialog was appearing), the cancel button is being clicked and presumably the confirm dialog is indeed returning false. But then it goes wrong!

Is there any workaround to this?

Edited

the device is an HP tablet running Windows 8
I am using jQuery, but didn't mention it before because it didn't seem relevant to the problem (although it appears it is relevant to the solution)
I simplified the problem down a bit too much, it seems, now I've seen what the solution may look like.

This all happens on a listing page, one row for each item to be deleted (or edited, or viewed, or ...) so there are many similar links on the page. So the link id can't be used as the selector.

Also, there's another option for each item that's also irreversible, and that I want the user to confirm, but with a different message. (NB the option is idempotent, though). At the moment this is handled by having a template macro that produces the html, and the message is specified as an argument to the template macro. So ideally there'd be a way to specify the message when generating the html for the link.

It is always useful to know what device you are testing. This could help maybe: http://social.msdn.microsoft.com/forums/en-US/16b2bd56-a9dd-4e51-a5e9-98441dcc1b43/wm-ie-does-not-recognize-the-javascript-confirm-function To test if it supported: http://stackoverflow.com/questions/9468531/how-to-determine-if-window-confirm-is-supported — JohanVdR, Mar 02 '14 at 17:49

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

You should be using .preventDefault() rather than returning true or false.

You really don't want delete events to be tied to a hyperlink anyway, since those issue GET requests. Deletes should happen either via POST or DELETE, as GET requests are supposed to be idempotent, meaning they don't have consequences (they don't change anything). To fix this, either use a button embedded within a form, or catch the request (as you're doing now), prevent the default operation, and then issue a POST request, as shown in these answers: JavaScript post request like a form submit.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 02 '14 at 17:50

Tieson T.

20,030
4
69
86

With jquery you can use https://api.jquery.com/jQuery.post/ On stackoverflow found this example: http://stackoverflow.com/questions/17847470/delete-clicked-item-in-jquery-and-php – JohanVdR Mar 02 '14 at 18:05
@Sigma Of course, but this question is not tagged as jQuery, hence the link to a set of vanilla JavaScript examples. – Tieson T. Mar 02 '14 at 18:08
Thanks, @TiesonT. -- I simplified the example a bit, and the link actually includes the object id in it. So the actual request would indeed be idempotent, which is a good point. – lpryor Mar 02 '14 at 21:12

score 0 · Answer 2 · answered Mar 02 '14 at 18:24

0

Here is an example of how to use preventDefault.

Plunker example

answered Mar 02 '14 at 18:24

Chi Row

1,086
7
17

onclick confirm not working on tablet

Edited

2 Answers2