Just made a simple test that may be useful.
In my local development Multisite I put two files at the root:
test.html
Loads a WordPress menu in a static page
<html>
<head>
<TITLE>Testing Ajax/WordPress</TITLE>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(document).ready(function($) {
$("#nav-container").load("http://brasofilo.dev/test.php", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#nav-error").show();
$("#nav-error").html(msg + xhr.status + " " + xhr.statusText);
}
});
});
</script>
</head>
<body>
<div id="nav-container">Container DIV</div>
<div id="nav-error" style="display:none">ERROR</div>
</body>
</html>
test.php
Returns a WordPress menu
<?php
define( 'WP_USE_THEMES', false );
require( './wp-load.php' );
wp_nav_menu( array( 'menu' => 'Test Menu' ) );
The file test.html was loaded from a subdomain http://test.brasofilo.dev, but the Ajax call failed to load the PHP file at the main domain http://brasofilo.dev due to Same origin policy.
To overcome this, put the following Cross-Origin Resource Sharing rule in .htaccess:
Header set Access-Control-Allow-Origin http://test.brasofilo.dev
