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

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.

Read More

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!

Related posts

Leave a Reply

2 comments

  1. 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.

  2. I’ve since decided to use the Object tag (below example), but I’m still interested in using the AJAX methods above!

     <div id="movieContainer" style="left:0;top:75px;width:50%; height:90%; margin:0; padding:0; background:#000; position:fixed; z-index:51">
     <object width="100%" height="100%" id="videoTut" name="videoTut" type="text/html" data="http://localtestserver.com/localTesting/vizicast/index.php">
     </object>
     </div>