Question

The code is not displaying my PHP elements and I would like to know why.

Here is the HTML I am using:

<div class="tablocation">

    <ul class="css-tabs">
      <li><a class="current" href="/wp-content/themes/blue-and-grey/uni-general.php">General</a></li>
      <li><a href="/wp-content/themes/blue-and-grey/uni-courses.htm">Courses</a></li>
      <li><a href="/wp-content/themes/blue-and-grey/uni-inthearea.htm">In the area</a></li>
      <li><a href="/wp-content/themes/blue-and-grey/uni-sportsandfacilities.htm">Sports & facilities</a></li>
    </ul>

    <div class="clear"></div>

    <div class="css-panes">
      <div style="display:block"></div>
    </div>  

Take the first instance, for the uni-general.php – that won’t load but the other files for the .htm will load. As soon as it is a PHP Document it won’t.

Also – Below is the script that I am using to load the documents.

<script>
    $(function() {
        $("ul.css-tabs").tabs("div.css-panes > div", {
        effect: 'ajax',
        onBeforeClick: function(event, i) {
        // get the pane to be opened
        var pane = this.getPanes().eq(i);

            // only load once. remove the if ( ... ){ } clause if
            // you want the page to be loaded every time
        if (pane.is(":empty")) {
            // load it with a page specified in the tab's href
            // attribute
            pane.load(this.getTabs().eq(i).attr("href"));
        }
        }
    });
    });
</script>

I can supply the PHP documents if needed but to be fair I don’t think that is where the problem is.

Answer 1

Doesn’t look too custom from the standard plugin functionality.

Just load your tabs $("ul.css-tabs").tabs();

Using jQuery UI, and whatever you have the href will load via ajax in the tab.

*Fetch external content via Ajax for the tabs by setting an href value in the tab links.*

http://jqueryui.com/demos/tabs/#ajax