AJAX is changing the content of file_get_contents

Question

I am using AJAX to load content into a placeholder, the PHP code uses file_get_contents to get the page I want, then gives it back to the AJAX response which puts it into my placeholder. The problem I am having is that the content that is being grabbed is actually being altered, like html tags are being put where they didn't exist.. Here is the code:

function getPreview() { 
    var indexe = ajax.length;
    ajax[indexe] = new sack();
    var form = document.getElementById('form');
    ajax[indexe].setVar("prevsub", form.ebay_preview_submit.value);
    ajax[indexe].method = 'POST';
    ajax[indexe].requestFile = "../admin/model/catalog/getEbay.php";
    ajax[indexe].onCompletion = function(){ createPreview(indexe) };
    ajax[indexe].runAJAX();
}

function createPreview(indexe) {    
    var obj = document.getElementById('preview_ph');
    obj.innerHTML = ajax[indexe].response;
}

so everything gets put inside of this placeholder:
<div id="preview_ph" ></div>

Here is the PHP that does the grabbing:

if(isset($_POST['prevsub'])){
$template_viewer = http://localhost:8888/admin/view/template/ebay/template_viewer.php';
$file_got = file_get_contents($template_viewer); 
echo $file_got;
}

And here is a snippet of what It is supposed to be vs what it is adding in there...

Supposed to be:

Sign up for Newsletter</a> </div></td>

But instead it is altered:

Sign up for Newsletter</a></td></tr>

Another, supposed to be:

bidding! </span>
</div>
</td></tr>

But gets altered to:

bidding! </span>
</div>
</td></tbody>

It alters the content 7 total times from the page its grabbing... Any explanation for this?

The page, opens up in a browser perfectly, it is seriously getting altered by AJAX or file_get_contents in some way, and I am completely baffled...

Thanks for your help!

Answer 1

To me, this looks like the browser is sanitizing the HTML at the time of the .innerHTML operation. That is an act of self-defense, because the HTML you output is clearly not valid, is it?

The end result would look like

<div id="preview_ph" > 
 Sign up for Newsletter
  </a>          <--- broken 
   </div>       <--- broken
    </td>       <--- broken
 </div>

that code would break the DOM, so the browser has to try and fix it as best as it can.

Why are you outputting those closing tags through AJAX?