<div><apex:include></div> not working to load tab content as a VF page

Question

I am wondering if there is some way to load in external visualforce pages with an ajax request on my current visualforce page. I have two settings pages that users will access, and want to consolidate them onto one page, separated by tabs.

I tried this:

<apex:tabPanel id="additionalSettingsTabs">
    <apex:tab label="Additional User Settings" name="additionalUserSettings" id="additionalUserSettings" >
        <apex:include pageName="ExtraUserSettings" />
    </apex:tab>
    <apex:tab label="Additional Org Settings" name="additionalOrgSettings" id="additionalOrgSettings" >
        <apex:include pageName="SchedulerSettingsPage" />
    </apex:tab>
</apex:tabPanel>

And got some weird element.dispatchEvent is not a function, then hovering over the additionalorgSettings tab caused some element.hasClassName is not a function error, so clicking it does nothing because of these errors (however, the extra user settings page tab is selected first and my content is loaded just fine there, I just can't navigate tabs this way for some reason...).

Then I tried the kendo tabstrip, which can load pages via an ajax request, but not sure how to do that with visualforce pages... So, I tried doing an inside the kendo tabstrip content like this:

<div id="settingsTabStrip">
    <ul>
        <li>Additional User Settings</li>
        <li>Additional Org Settings</li>
    </ul>
    <div><apex:include pageName="ExtraUserSettings" /></div>
    <div><apex:include pageName="SchedulerSettingsPage" /></div>
</div>

This loaded user settings in the first tab, however, the SchedulerSettingsPage was not wrapped in the tabstrip for some reason, and just rendered at the bottom of the page all the time...

So I guess I have two possible questions here: can you load a VF page via ajax, and if so, will it load the controllers with them?

And if not, what might be wrong with using the more than once inside a div to load content that is not wrapping the second include in the parent div?

ooorrr what is wrong with the tabPanel implementation from my first code snippet that makes the tabs not work and gives the element.dispatchEvent and element.hasClassName are not defined when hovering and clicking on the tabs?

Answer 1

Found out that what I needed was an apex:iframe instead of apex:include. So using kendo tabstrip and changing the code in my question to:

<div id="settingsTabStrip">
<ul>
    <li>Additional User Settings</li>
    <li>Additional Org Settings</li>
</ul>
<div><apex:iframe src="{!baseUrl}/apex/ExtraUserSettings" /></div>
<div><apex:iframe src="{!baseUrl}/apex/SchedulerSettingsPage" /></div>
</div>

worked just as I wanted, but this also made the tabPanel solution work. I stopped having those element.someFunction is not a function errors:

<apex:tabPanel id="additionalSettingsTabs">
<apex:tab label="Additional User Settings" name="additionalUserSettings" id="additionalUserSettings" >
    <apex:iframe src="{!baseUrl}/apex/ExtraUserSettings" />
</apex:tab>
<apex:tab label="Additional Org Settings" name="additionalOrgSettings" id="additionalOrgSettings" >
    <apex:iframe src="{!baseUrl}/apex/SchedulerSettingsPage" />
</apex:tab>

And baseUrl comes from my controller, of course, by calling System.Url.getSalesforceBaseUrl().toExternalForm();