使用jquery load（）将内容添加到选项卡式导航

Question

I have a web application that uses tabbed navigation from a UI kit: http://www.getuikit.com/docs/tab.html .

Each tab will load different content, which is broken down into several php scripts, one per tab.

One (not very efficient, but so for successful) option is to load up all of the tabs content when the page first loads, so to use the standard example:

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
 <li><a id="1" class="load-tab" href="">Tab 1</a></li>
 <li><a id="2" class="load-tab" href="">Tab 2</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
 <li><?php require('script1.php'); ?></li>
 <li><?php require('script2.php'); ?></li>
</ul> 

I want to avoid this though, because the scripts are quite hefty so want to load them on demand for better user experience.

So what I've done is instead add holding divs and target them with a jQuery load() :

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
 <li><div id="1"></div></li>
 <li><div id="2"></div></li>
</ul>

jq:

$(document).on("click", "a.load-tab", function(){

//get the value of the tab clicked in the nav
var tab = $(this).attr('id');

//determine the filename to load based on tab clicked

if (tab == '1'){ var filename = 'script1.php'; }
if (tab == '2'){ var filename = 'script2.php'; }

//load it
$( "#"+tab+ ).load( filename );
});

This works fine ... ish.

Question is this: With the initial (non jquery) method, each script could use the main page's core files that have already been included, eg header.php, functions.php etc etc. But when the content is loaded from jquery it seems each script needs to be included in the scipt1.php file and loaded again, which results in duplicate content being created in the DOM.

EDIT script1.php currently is structured something like:

 <?php
 require('header.php');
 require('connect.php');
 require('setUser.php');
 require('setParams.php');
 require('functions.php');
 ?>
 <div id="header">
 //header content
 </div>
 <table>
 //table content
 </table>

The page that the navigation sits within, let's just call it index.php for now, already must have those php files included, so you can see the duplication issue.

What can be done to avoid this? Thought of a few options like iframes but seems like it might be a hack.

Answer 1

Your issue is essentially inside 'script1.php' you have something that requires 'connect.php' / data that is populated. But you are doubling up on DOM elements when you pull that in.

Two solutions to that issue are: 1 - create slimmer versions of your lib php files that don't include any DOM elements, only the data required to populate script1.php's data, or

script1.php contains

<?php
 require('header.php');
 require('connect.php');
 require('setUser.php');
 require('setParams.php');
 require('functions.php');
 ?>
 <div id="header">
 //header content
 </div>
 //Everything inside #content is what you want to pull in
 <div id="content">
     <table>
     //table content
     </table>
 </div>

And then call

$("#1").load("script1.php #content");

This will only load the HTML that is inside the #content div.