Question

For some reason the follow code doesn’t work when the file has a php extension:

<ul class="issues">
<li><a href="jobs.php">Jobs</a></li>
<li><a href="town-centres.php">Town Centre</a></li>
</ul>
<div id="input"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
(function(){
var wrap = $('#input');
$('ul.issues a').on('click', function(e){
    var href = $(this).attr('href');
    wrap.load(href + ' article');   
    e.preventDefault();
});
})();
 </script>

Works fine on locally but nothing appears on remote server unless I change the file extension to htm. Console shows XHR loaded. See broken PHP version and working .htm version

Answer 1

The problem is what the PHP script is (or isn’t in this case) returning …

wrap.load(href + ' article');

This jQuery loads the href and just gets the <article> section and loads it into the wrap element. If you use something like Firebug (or any browser debugger where you can see the content loaded using AJAX) you will see that the PHP script returns the following :

<div id="content">
<h1>Do new supermarkets really create jobs?</h1>
etc...

Where as the .htm version returns :

<div id="content">
<article>
<h1>Do new supermarkets really create jobs?</h1>
etc ...

So you can see the PHP doesn’t reply with the <content> tag – hence no HTML is added to the wrap element

You have 2 options to fix the problem ..

1. Change the jQuery to wrap.load(href + ' #content');
2. Change the PHP script to include <article>