Question

I am using jQuery UI Tabs, and the tabs need to be lazily loaded. But I would like to do a slight change in the url before loading.

Checking the documentation, it looks like beforeLoad is exactly what I was looking for, but I cannot make it trigger, as you can see in this example:

HTML

<div id="tabs">
    <ul>
        <li><a href="/echo/html">Foo</a></li>
        <li><a href="/echo/html">Bar</a></li>
    </ul>
</div>​

JS

$("#tabs").tabs({
    beforeLoad:function(e,ui){
      alert(1); // never happens       
    },
    show: function( e,ui ){
        $( ui.panel ).html('<p>Loading...</p>');
    }
});​

Live demo: http://jsfiddle.net/vtortola/5NAKN/

Why is it not triggering?

I am using jquery-1.7.2.js and jquery-ui-1.8.11.js.

Cheers.

Answer 1

The ‘beforeLoad’ event belongs to jquery ui 1.9

Updated demo: http://jsfiddle.net/vtortola/5NAKN/28/

relevant, formatted code inline. umadbro?