I have this Ajax post request. Works great in Crome. Just opened it in IE and it fails completely. It is a div with images loaded into a carousel. The carousel used is http://caroufredsel.dev7studios.com/ (Which I would highly recommend for its easy implementation if anyone is after an image carousel)
When you click a folder
<a href="javascript:void(0);" onclick="getImages(1)">Folder 1</a>
basically queries a php file and refreshes the div with a new set of images
$.ajaxSetup ({
cache: false,
async: false
});
function getImages(id)
{
$.ajax({
type: "POST",
url: 'getImage.php',
dataType: "json",
data: "id=" + id,
success: function(data) {
$('#scrolimg').html(data);
$("#car1").carouFredSel({
auto : false,
items : 4,
scroll : 4,
circular : false,
infinite : false,
prev : "#foo1_prev",
next : "#foo1_next",
swipe : {
onTouch : true,
onMouse : false
}
});
}
});
When I have been reading similar problems on Stack most people say turn cache to false and async but that has not helped. Another solution was to make POST requests instead of GET but thats does not work for me either.
The code above works perfectly. The problem is in the getImage.php file. I have a loop thats running to find the image width and height with php function call getimagesize()
That function is not running in IE but working perfectly in all other browsers. Is my Ajax blocking this function from running?
<?php do {
$image = $_SERVER['DOCUMENT_ROOT']."/images/uploads/".$row_rs_image['thumbfile'];
list($width, $height)= getimagesize($image);
?>
<img src="/images/uploads/<?php echo $row_rs_image['thumbfile']; ?>" width="<?php echo $width;?>" height="<?php echo $height;?>" />
<?php } while ($row_rs_image = mysql_fetch_assoc($rs_image)); ?>
When I output the source I see the following
<img name="creed" src="/images/uploads/320623-1358872780_thumb.png" width="" height="" />
Found the issue. on get image sizes use this line instead
list($width, $height, $type, $sizes)= getimagesize($image);
then in the getImage.php
Thanks to everyone for the help