I'm using a script to load another page with a post value in it to update a SQL query. It works in safari but doesn't work in IE8. I don't know how to fix it. As you can see the page is all blank but does contain the element. So I'm assuming that there is something wrong with the .load function.
link: http://tamara.gwst.nl/infiniteScroll/index.php
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Gallery | Infinite Scroll</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.js"></script>
</head>
<body>
<?php include('includes/connect.php'); ?>
<div id="content"></div>
</body>
</html>
main.js
$("document").ready(function(){
$("#content").load("scroll.php", {limit: 5});
var counter = 5;
$(window).scroll(function(){
if($(window).scrollTop() + 1 > $(document).height() - $(window).height() ){
counter = counter + 5;
$("#content").load("scroll.php", {limit: counter});
}
});
});
scroll.php
<? $limit = $_POST['limit']; ?>
<?
include('includes/connect.php');
$sql = "SELECT name FROM scroll_images LIMIT $limit";
echo "</div>";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){
echo "<div class='post'><img src='img/".$row['name']. ".jpg' /></div>";
}
?>