0

I don't know why this doesn't work, although it should:

$('#group-tabs').tabs({
    iframe: true,
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $("#test").load(this.href);
            return false;
        });
    }
});

Slightly older versions (jquery 1.8.x and jquery-ui 1.9.x)

http://jsfiddle.net/QGZZT/1/

Amar
  • 11,930
  • 5
  • 50
  • 73
eozzy
  • 66,048
  • 104
  • 272
  • 428

1 Answers1

0

You needed to change your javascript, you were accessing the wrong elements:

$('#group-tabs').tabs({
    iframe: true,
    beforeLoad: function(event, ui) {
        $('a').click(function() {
            alert(this.href);
            $(".tab-content").load(this.href);
            return false;
        });
    }
});

Ref. http://jsfiddle.net/QGZZT/2/

However, I don't believe you are able to do what you want, because "Due to browser restrictions, most Ajax requests are subject to the "same origin policy"."

Ref. Cannot load an external page with jQuery.load into a div in my page

You can; however, try using $.get or simply changing the source of an iFrame (very easy).

Community
  • 1
  • 1
user1477388
  • 20,790
  • 32
  • 144
  • 264
  • I'm just using iframe for the example, the pages I'm loading are on the same domain. I corrected the elements but still it doesn't work – eozzy Mar 02 '13 at 04:39
  • Did you change `load` to `beforeLoad` like mine? – user1477388 Mar 02 '13 at 13:24
  • You would have to post your changes on jsfiddle in order for me to check it out. Custom scripts for tabs should be pretty easy and not a bad option, just change the iFrame `src` when they click `id='http://mywebsite.com'`, etc. – user1477388 Mar 02 '13 at 19:47