jQuery UI Tabs beforeLoad preventDefault is not working

Question

Somehow the e.preventDefault() on the beforeLoad() event in jQuery UI Tabs is not working. Here is a little example:

<div id="tabs">
    <ul>
        <li><a href="#exampleExistingTab">Existing Tab</a></li>
        <li><a href="/path/to/remote/tab">Remote Tab</a></li>
    </ul>
    <div id="#exampleExistingTab"><h3>Hello There!</h3></div>
</div>
<script type="text/javascript">
    $('#tabs').tabs({
        beforeLoad: function (e, ui) {
            e.preventDefault();
        }
    });
</script>

For sure this is not the real script, just an example to show the mistake. I think the remote tab should never be loaded, but the ajax request is fired every time you click the "Remote Tab" (and it's not active before).

Anyone know about this issue or how to fix this?

Tested with: Mozilla Firefox 24.0; jquery 1.10.2; jqueryUi 1.10.3

Answer 1

Im not sure e.preventDefault() works like that in this case.

Since the "ui" parameter has a jqXHR object, have you tried doing:

ui.jqXHR.abort();