Simple way to use AJAX to load external PHP into a Wordpress div

Question

I'm trying to load a complete PHP file which includes it's own stylesheets and scripts (html/php, html5 video player = jplayer) into a div that I've placed in a Wordpress template.

I've seen a few examples of how some have loaded elements into div tags from a Wordpress page, but for some reason they have not worked for me.

So far I've tried: Need some help with jQuery AJAX request loading a PHP document into a DIV Container and How To Load A PHP Script Using AJAX?

But neither have resulted in the external php file to actually display in the div when the Wordpress template is loaded in a browser.

The page I'm trying to load is located at the Wordpress root, in it's own directory where it houses it's included required css and js files (ex. http://mylocaltest.com/localWordpressRoot/vizPlayer/fileToBeLoaded.php)

Here is the script I'm loading within the div on the Wordpress template page:

 <?php
 /*
  * template name: Global Headlines
  */
 global $isBlog;
 $isBlog = true;
 get_template_part('page', 'config');
 get_header(); ?>


 <div id="vizPlayer" style="left:0;top:75px;width:50%; height:90%; margin:0; padding:0; background:#000; position:fixed; z-index:51">
    <script type="text/javascript">
 function loadContent(id) {

     $.ajax({
        type: "GET",
        url: "/vizPlayer/fileToBeLoaded.php",
        dataType: 'html',
        data: {param: id},

        success: function(html){
                  $("#vizPlayer").html(html);
        },

        error: function(){
            },

        complete: function(){
        }
     });

 }                      
        </script>

 </div>

Any tips would be hugely appreciated. Thanks in advance!

jeroen jeroen · Accepted Answer · 2013-03-11T16:53:06

If you use an absolute url in your javascript, that url is relative to the root of the web-server, so:

url: "/vizPlayer/fileToBeLoaded.php"

Would load:

http://mylocaltest.com/vizPlayer/fileToBeLoaded.php

instead of:

http://mylocaltest.com/localWordpressRoot/vizPlayer/fileToBeLoaded.php

You should add your local WordPress root to the path.

Simple way to use AJAX to load external PHP into a Wordpress div

2 Answers