I am using a jquery ajax tabbed pane that loads external content. When clicking the tabs, it populates with an external php page.

As you will see, I'm using php includes to load some content (within) the tabbed container... that runs fine. but when I try to use an include inside the externally loaded php it wont execute.

The 50 dollar question: How can I run an include inside an included page?


The function:

<script type="text/javascript">
            var pageUrl = new Array();    
                    
            pageUrl[1] = "wp-content/themes/mytheme/tab1.php";
            pageUrl[2] = "wp-content/themes/mytheme/tab2.php";
            pageUrl[3] = "wp-content/themes/mytheme/tab3.php";
            pageUrl[4] = "wp-content/themes/mytheme/tab4.php";    
            pageUrl[5] = "wp-content/themes/mytheme/tab5.php";    
        
            function loadTab(id)
            {
                if (pageUrl[id].length > 0)
                {
                    $("#preloader-ajax").show();
                    $.ajax(
                    {
                        url: pageUrl[id], 
                        cache: false,
                        success: function(message) 
                        {                            
                            $("#tabcontent").empty().append(message);
                            $("#preloader-ajax").hide();             
                        }
                    });                    
                }
            }
        
            $(document).ready(function()
            {
                $("#preloader-ajax").hide();
                
                
                
                $("#tab1").click(function()
                {
                    loadTab(1);
                });
                
                $("#tab2").click(function()
                {
                    loadTab(2);
                });
                
                $("#tab3").click(function()
                {
                    loadTab(3);
                });
                
                $("#tab4").click(function()
                {
                    loadTab(4);
                });
                $("#tab5").click(function()
                {
                    loadTab(5);
                });
            });
        </script>

The html:

                    <div class="navcontainer">   <!-- ajax tabs nav -->
                    <!-- <div class="news_highlight"> </div>--> 
                             
                              <ul>
                                        <li><a id="tab1" href="#jax">Event Video</a></li>
                                        <li><a id="tab2" href="#jax">Video Tips</a></li>
                                        <li><a id="tab3" href="#jax">News</a></li>
                                        <li><a id="tab4" href="#jax">Radio</a></li>
                                        <li><a id="tab5" href="#jax">Contact</a></li>
                              </ul>
                              
                    </div>  <!-- /ajax tabs nav -->
                    
                    <div class="tab-cntr">  <!-- tab container -->
                            
                              <div id="preloader-ajax"> <img src="wp-content/themes/mytheme/images/loading.gif" /> Loading Data... 
                              
                              </div>
                            
                              <div id="tabcontent">  <!-- content tabs -->
                              
                                      
                                        <?php if ( is_home() ) { include ('Slider/index2.php'); } ?>
                              </div><!-- /content tabs -->
                              
          </div>  
               
                       <!-- /tab container -->

So you're loading content via AJAX and you want that content to have another source file included into it? I'm not sure I understand the problem you're having.

I got it to work... Thanks for your reply.