Strange problem which I can't figure out. I found a banner ad rotation script that loads different banners (or other data) every so often WITHOUT REFRESHING THE PAGE and WITHOUT SCREEN FLICKER.
http://www.phpied.com/ajax-banner-rotation/
There are 3 pages that work in tandem to complete the task.
- Demo Page: demo.html
- Ext: JS Page: ajax-banner.js
- PHP Page: ajax-banner.php
The demo page looks like this....
demo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>demo.html</title>
<script type="text/javascript" src="ajax-banner.js"></script>
</head><body>
<div id="ajax-banner">
</div>
</body>
</html>
Note, the javascript page "ajax-banner.js" is loaded in demo.html. Also note the DIV id "ajax-banner" which is where the dynamic content is loaded into.
The ajax-banner.php page contains the actual data to be rotated into the DIV tags of demo.html.
ajax-banner.php
<?php
////// ajax-banner.php ///////
// an array of banners
$html = file_get_contents("somepage.php");
// send XML headers
header('Content-type: text/xml');
echo '<?xml version="1.0" ?>';
// print the XML response
?>
<banner>
<content><?php echo htmlentities($html); ?></content>
<reload>2000</reload>
</banner>
In my app, the page "somepage.php" is a chat page which is written to by a form and saved in a directory. The page "somepage.php" grows in size each time a person makes a post via the form.
The result is, the script works fine. When I view the page "demo.html" in a Firefox or IE browser, the page does not reload, but the DIV tags are updated by the js script every 2 seconds and if updates have been made to page "somepage.php", then the new page overwrites the old page in between the <DIV> tags in "demo.html". The result, the chat page is updated without flicker and without reloading the page, etc. Fine.
THE PROBLEM
The problem is, I have noticed that when 14 lines of chat are displayed in "somepage.php", the page "demo.html" will stop showing any new lines, even though the actual page "somepage.php" IS being updated fine.
My question is, are there any limitations in the javascript file that is causing a hard limit on the amount of data that will display? Why is the display of somepage.php within the div tags of demo.html being cut off at 14 lines of chat?
FYI: I have verified that file_get_contents() fcn in PHP is not limiting the output. It seems to be within the .js file itself, or some other limitation with XML.
FYI: Even though page "somepage.php" contains data that will display more than 14 lines of chat, "demo.html" will show a max of only 14 lines of chat and the rest is ignored.
FYI: Viewing source code of demo.html shows that the display of html which is included from somepage.php is abrubtly cut off where the 14 line will appear, but the remaining html of "demo.html" is diplayed fine. This, to me, seems to point the issue somehere within the ajax-banner.js file. But where?
FYI, the java code is below.
ajax-banner.js
function makeHttpRequest(url, callback_function, return_xml)
{
var http_request = false;if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
@http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}if (!http_request) {
alert('Unfortunatelly you browser doesn\'t support this feature.');
return false;
}
http_request.onreadystatechange = function() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
if (return_xml) {
eval(callback_function + '(http_request.responseXML)');
} else {
eval(callback_function + '(http_request.responseText)');
}
} else {
alert('There was a problem with the request.(Code: ' + http_request.status + ')');
}
}
}
http_request.open('GET', url, true);
http_request.send(null);
}function loadBanner(xml)
{
var html_content = xml.getElementsByTagName('content').item(0).firstChild.nodeValue;
var reload_after = xml.getElementsByTagName('reload').item(0).firstChild.nodeValue;
document.getElementById('ajax-banner').innerHTML = html_content;try { clearTimeout(to); } catch (e) {} to = setTimeout("nextAd()", parseInt(reload_after));
}
function nextAd()
{
var now = new Date();
var url = 'ajax-banner.php';
makeHttpRequest(url, 'loadBanner', true);
}window.onload = nextAd;