Hi all,

QUICK SUMMARY:
Ajax code is pulling in HTML data, the results are slightly off in Firefox.

The HTML being pulled in by Ajax is a <h2> tag with an <a> tag nested within, plus a <p> tag following the <h2>. But Firefox only displays the <h2> tag and not the <p> tag, yet IE displays all the HTML code fine.

FULL EXPLANATION:
I'm fairly new to Ajax and was running some tests when I ran into a problem.

I have the following files:

* Hijax.php
* People.php
* Staff/andy.html
* Staff/jeremy.html
* Staff/richard.html
* Scripts/Ajax.js
* Scripts/Functions.js

The functionality works like so: the user clicks on 1 of 3 links. Clicking on a link will load in the relevant HTML content into the current page. The link code is:

Code:
<a href="?person=andy">
The Hijax.php code is as follows:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hijax. Basics</title>
<script type="text/javascript" src="Scripts/Functions.js"></script>
<script type="text/javascript" src="Scripts/Ajax.js"></script>
</head>
<body>
	
	<p>
		Hijax is basically Ajax but using 'progressive-enhancement' techniques which ensure that if JavaScript is not enabled then the application can still fall back on good ole' Server-Side code.
	</p>

	<ul id="id-People">
		<li><a href="?person=andy">Andy</a></li>
		<li><a href="?person=richard">Richard</a></li>
		<li><a href="?person=jeremy">Jeremy</a></li>
	</ul>
	
	<div id="id-Content" style="background-color: green; width: 1000px; height: 500px;">
		<?php include('People.php'); ?>
	</div>

</body>
</html>
I've got it working so that the php file (People.php) successfully includes the HTML content (in case JavaScript is not supported), and the Ajax code works fine when JavaScript is supported.

The code for the People.php file is:

Code:
<?php
	if(isset($_GET['person']))
	{
		switch($_GET['person'])
		{
			case 'andy':
				include('Staff/andy.html');
				break;
				
			case 'richard':
				include('Staff/richard.html');
				break;
				
			case 'jeremy':
				include('Staff/jeremy.html');
				break;
		}
	}
?>
The only problem is with Firefox, the results are slightly off.

The HTML content (for andy.html / jeremy.html / richard.html) is a <h2> tag with an <a> tag nested within, plus a <p> tag following the <h2>. But Firefox only displays the <h2> tag and not the <p> tag, yet IE displays all the HTML code fine.

An example of one of the HTML pages is as follows:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hijax. Andy</title>
</head>
<body>

	<h2>
		<a href="mailto:andy@storm-media.co.uk">
			Andy's Email Address
		</a>
	</h2>
	
	<p>
		Here is some paragraph text for Andy.
	</p>

</body>
</html>
The Functions.js code is as follows:

Code:
fnAddEvent(window, 'load', fnInitAjax);

	function fnInitAjax()
	{
		// If the browser doesn't support the W3C DOM & the XMLHttpObject then stop without going any further.
			var supportCheck = document.createElement && document.getElementsByTagName && fnCreateXMLHTTPObject();
			if (!supportCheck) return;
			
		// add event handlers to all links
			var list = fnGetElement('id-People');
			var links = list.getElementsByTagName('a');
			
			for(var i=0; i<links.length; i++)
			{
				links[i].onclick = function()
				{
					var query = this.getAttribute('href').split('=')[1];
					var url = 'Staff/' + query + '.html';
					
						fnSendRequest(url, fnHandle, 'GET');
						return false;
				}
			}
	}
The code for the Ajax.js file is as follows:

Code:
var XMLHttpFactories = [
	// the function "fnCreateXMLHTTPObject" uses a reference to this array object.
	
	function () {return new XMLHttpRequest()},
	function () {return new ActiveXObject("Msxml2.XMLHTTP")},
	function () {return new ActiveXObject("Msxml3.XMLHTTP")},
	function () {return new ActiveXObject("Microsoft.XMLHTTP")},
];

function fnCreateXMLHTTPObject()
{
	// this function loops through the array of XMLHttpRequest objects
	// it then stores the correct object in the variable 'xmlhttp'.
	
	// first set the variable to false to prevent an error being returned as true.
	var xmlhttp = false;
	
	// loop through the above array
	for (var i=0;i<XMLHttpFactories.length;i++)
	{
		try
		{
			// first set the found object to the variable...
			xmlhttp = XMLHttpFactories[i]();
		}
		catch (e)
		{
			// ...if there is an error with the object then just continue because the current object can't be used.
			continue;
		}
		
		// otherwise break after setting the object to the variable.
		break;
	}
	
	// return the object stored in the variable.
	return xmlhttp;
}

function fnSendRequest(url, callback, postData, data)
{
	// this function requests the file and sends it to the callback function.
	
	var supportCheck = document.createElement && document.getElementsByTagName && fnCreateXMLHTTPObject();
	if (!supportCheck) return;
	// If the browser doesn't support the W3C DOM & the XMLHttpObject then stop without going any further.
	
	// if the XMLHttpRequest object can't be created then stop without going any further.
	var http_request = fnCreateXMLHTTPObject();
	if (!http_request)
	{
		alert('Giving up :( Cannot create an XMLHTTP instance');
		return;
	}
	
	// check the method type. if 'postData' is get then set the 'method' variable to GET, otherwise set it to POST
	var method = (postData == 'GET') ? 'GET' : 'POST';
	
	// check the state changes as they happen.
	http_request.onreadystatechange = function ()
	{
		if (http_request.readyState != 4)
		{
			// if the state is not fully loaded then return the function - the onreadystatechange will call everytime a change occurs.
			return;
		}
		
		// check the status code of the HTTP server response. 200 is an "ok response" and the 304 is the same for related to Safari.
		if (http_request.status != 200 && http_request.status != 304)
		{
			// if there was an error at any point then display an error message and then return.
			alert('HTTP error ' + http_request.status);
			return;
		}
		
		// otherwise if it hasn't already returned the function via the 2 above if statements, then it must be loaded!
		callback(http_request);
	}
	
	if(method == 'POST')
	{
		http_request.open(method, url, true);
		http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		http_request.send(data);
	}
	else
	{
		http_request.open(method, url, true);
		http_request.send(null);
	}
}

function fnHandle(http_request)
{
	// this function handles the XMLHttpRequest object.
	
	var o = fnGetElement('id-Content');
	o.innerHTML = http_request.responseText;
}
I used a JavaScript alert message to display on screen what data was being returned. For example:

Code:
alert(http_request.responseText)
...and ALL the HTML code is displayed in the alert box, so obviously Firefox is definitely picking up all the HTML but I just cannot work out why only the <h2> tags is shown when applying the 'http_request.responseText' to the page?

If anyone can help on this I would be very grateful.

Many thanks.

Kind regards,
Mark