Question

I am adding some custom tabs to a jquery ui tab control.

$("#tabs").tabs("add","#tabContent0","CLICK ME TO CHANGE PAGE",0);
$('a[href="#tabContent0"]').attr("href","javascript:window.location='http://www.google.co.uk';");

Yes this is a bit of a hack, but it is exactly what i need and provide a nice way to give links back to previous parent pages.

jquery throws the following exception: “jQuery UI Tabs: Mismatching fragment identifier.”

This is thrown on the line which appears to attempt to make the tab container visible in jquery ui (exact line wont help as is minified and custom build from official site).

Obviously im just redirecting but jquery has additional code to select the tab (which doesnt exist). In internet explorer, if the user has script errors enabled they will see the exception be thrown just before the window location changes, which I just cant have happen.

I cant put try catch around this code because it is the code inside jquery ui that throws the exception.

Is there anyway I can prevent this exception being thrown or achive the same thing but a different way without having to modified jquery ui ?

Edit: I am now wondering if there is a way to override the on click event hook placed on the element by jquery .. its definitely doing something there i cant see.

Edit: I have to log off now but I have made some progress, if someone can just help me get the right URL, using this code it prevents the exception, but redirects me to “http://myurl/undefined”

$('#tabs').bind('tabsselect', function(event, ui) {

if(ui.index<2) //ignore this will change to get current tab count -1 (so the end tab is left as it is
{
        window.location=$('#'+ui.tab).attr("href"); //attr href is undefined, how do i use ui.tab properly to get the right url
        return false;
}

});

Answer 1

It works OK for me in Chrome and IE8.

I also tried this code and it worked:

$("#tabs").tabs("add","#tabContent0","CLICK ME TO CHANGE PAGE",0);
$('a[href="#tabContent0"]').click(function() {
    document.location='http://www.google.co.uk/';
});

Instead of changing href attribute, I add a handler on the click event of the new tab. This will make the tab to be switched and then the location changed.