Search code examples
jqueryjquery-uiiframejquery-ui-tabs

Accessing jQuery UI Tabs inside an iFrame

I am using a jQuery UI Tabs widget that exists within an iframe on the page. From the parent document, I need to be able to access the tabs object and use its methods (the 'select' method in particular). I am using the following code currently:

var iframe = $('#mainFrame').contents().get(0);
$('#tabs', iframe).tabs('select', 1);

The code does not throw any errors/warnings in the console and the jquery object for $('#tabs', iframe) does seem to be selecting the correct elements from the DOM of the iframe, however nothing happens when this is executed.

Solution

  • You're turning the jQuery object reference into a DOM node by calling .get(0). Try instead:

    var iframe = $('#mainFrame').contents();
iframe.find('#tabs').tabs('select', 1);

    ref.: .find()