1

I am using the simple javascript confirm code:

function test_confirm (str)
{
    str = (str == '0')? 'Are you sure?' : str

    return (confirm(str))? true : false
}

<a href="http://example.com" onclick="return test_confirm(0)">Test</a>

This usually works except when I use Jquery Mobile the OK and Cancel button both proceeds to the URL. The expected behavior is the Cancel button should not proceed to the URL.

i.e., I use Jquery Mobile by adding the following in the html head:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Is there anything I should be aware of to make the javascript confirm() function work in Jquery Mobile?


Update for Phill Pafford:

It does work on plain HTML but this is actually what I'm doing and it doesn't work after redirecting to the same page using PHP's header('location:'):

The page list contains:

<a href="list/delete/1" class="customClick" data-str="0">Delete 1</a>

<a href="list/delete/2" class="customClick" data-str="0">Delete 2</a>

The list/delete action contains something like this:

$rest->delete($id);
header('location: http://example.com/list');

As you can see after clicking the URL list/delete/1 the delete procedure will go on then redirect back to the list page. That's where it starts to not work.

As soon as the redirection happens the confirm dialog doesn't work anymore.

3 Answers 3

1

Does something like this work for you?

JS

$('.customClick').on('click', function() {
    var str = $(this).attr('data-str');
    str = (str == '0')? 'Are you sure?' : str;

    return (confirm(str))? true : false;
});

HTML

<a href="http://jsfiddle.net/8CDc5/" class="customClick" data-str="0">Test</a>​
4
  • I tried it. It works only on the first instance of the anchor tag. If you have many <a href="http://example.com" class="customClick" data-str="0">Test</a>, only the first click works. I tried disabling Jquery Mobile again, all works. So I guess there's something weird about Jquery Mobile.
    – IMB
    Nov 8, 2012 at 11:59
  • works for me: jsfiddle.net/8CDc5/2 or are you saying after you click ok/yes/confirm after the redirect it's not working? as that's a different issue Nov 8, 2012 at 13:47
  • It does work on basic examples. I updated my question to explain what's happening to me. I think it's something to do with rest and redirection.
    – IMB
    Nov 8, 2012 at 15:18
  • I will accept this since it works even though my situation required different solution
    – IMB
    Nov 14, 2012 at 10:28
0

I had the same problem, appears like "return false;" was not stopping propagation and the link was followed anyway. Solved it by explicitly stopping propagation before returning false.

function test_confirm (e, str)
{
    str = (str == '0')? 'Are you sure?' : str

    if (!confirm(str)) {            
        e.stopPropagation();
        return false;
    }
    return true;
}


<a href="http://example.com" onclick="var e=arguments[0] || window.event; return test_confirm(e,0)">Test</a>
0

add this attribute

data-ajax="false"

<a data-ajax="false" href="http://example.com" onclick="return test_confirm(0)">Test</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.