如何使引导程序选项卡仅在单击时加载内容，而不在页面上加载

Question

My use case is I have a page I've written with 6 tabs. Those tabs load the results of a php file index function I've created. All was fine and dandy when I had the files on a USB drive connected directly to the server. Loaded the page in seconds. However, I've moved the files to a NAS storage drive, and it takes 30-60+ seconds to load the page now. That's because with bootstrap tabs, it loads all the tabs on page load. So it's having to load all the files for all the tabs before the page finishes loading.

What I'm wanting to do is have it only load the "current" tab. I know I could just use $POST and reload the page each time, but honestly I think what I really need to do here is use AJAX. But the examples I've found are confusing and I'm having trouble adapting them to be useful to me.

Here's what I'm wanting to have happen:

1. Initially load the page with the tabs "empty". Visually this already happens as my "landing" page is a welcome message with the tabs running across the top that link to the corresponding index.
2. When a tab is clicked, show that page and load the files for that tab only. The files are loaded by calling a PHP function that targets the desired directory and builds a file index. So I'm wanting to run the PHP function "on demand" without reloading the page itself.

Here's an example of the bootstrap tab link:

<li class="nav-item">
   <a class="nav-link" data-toggle="tab" href="#movies" role="tab">Movies</a>
</li>

I think what I need to do is add an onclick to this link that calls an AJAX function, then that would in turn call the PHP function for the tab that's going to be displayed when the tab is clicked.

Here's the code I'm currently running in one tab:

<?php  
     $allowed = array("mp4", "mkv", "avi", "mov", "mpg", "wmv", "flv", "vob");
     $excluded = array("jpg", "nfo", "htaccess", "db");
     echo php_file_tree("/smb/movies/", "/movies", "https:xxx[link]",$allowed, $excluded);
     unset($allowed, $excluded);
?>

Thinking about wrapping it up in a function like so:

<?php  
  function indexmovies() { 
    $allowed = array("mp4", "mkv", "avi", "mov", "mpg", "wmv", "flv", "vob");
    $excluded = array("jpg", "nfo", "htaccess", "db");
    echo php_file_tree("/smb/movies/", "/movies", "https:xxx[link]",$allowed, $excluded);
    unset($allowed, $excluded);
  }
?>

So, to sum it up. I want the page to load nothing but HTML on load. Then when a tab is clicked, I want it to switch to that tab and load the above function "on demand".

Will want I want to do work? If so, what's the BEST way to go about it?

Answer 1

I Used Jquery UI for the tab.

HTML / Bootstrap TAB

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>
        </li>
        <li><a href="#tabs-2">Tab 2</a>
        </li>
        <li><a href="#tabs-3">Tab 3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>

CSS

body {
    background-color: #eef;
}
#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

JQUERY

$("#tabs").tabs({
    activate: function (event, ui) {
       var active = $('#tabs').tabs('option', 'active');
       if(active == '0'){
        alert('the tab is 0')
        //put your ajax for this tab 0
       }
       else if(active == '1')
       {
        alert('the tab is 1')
        //put your ajax for this tab 1
       }
       else if(active == '2')
       {
        alert('the tab is 2')
        //put your ajax for this tab 2
       }
    }
});

This is the Jsfiddle , Best Regards.