Getting data through a PHP file using AJAX+JQuery - php

Question

I'm working on a gallery that pulls up a full image inside a tooltip when hovering over thumbnails. The problem is, these full images commonly go outside the viewfinder. To remedy this, I'm moving the tooltip if the image will go outside the window boundaries, which requires immediately knowing the images dimensions (to avoid the tooltip jumping around).
However, the images take a bit to load (.gifs) so I can't wait on DOM in order to get the dimensions. So, I'm calling a PHP script to return the the image dimensions before they load.
The problem I'm having is that there's no response from my $.get call. I know the PHP script is working fine, but I'm not getting any data back from it through jquery. Any help would be greatly appreciated. Thanks!!
hover.js:
this.imagePreview = function(){
$("a.preview").hover(function(e){
var viewHeight = $(window).height() + $(window).scrollTop();
var viewWidth = $(window).width();
var xOffset=e.pageX+40;
var yOffset=e.pageY+40;
var url = 'http://mysite.com/i/' + this.href.slice(20);
var w = 0;
var h = 0;
$("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");
$.get("getDimensions.php/?img=" + url, function(data){
w = data.w;
h = data.h;
$("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
});
$("#preview")
.css("top",yOffset + "px")
.css("left",xOffset + "px")
.fadeIn("fast");
$('#img').load(function() {
if((e.pageX+img.width)>viewWidth) { xOffset=e.pageX-img.width-70; }
if((e.pageY+img.height)>viewHeight) { yOffset=e.pageY-img.height-70; }
$("#preview")
.css("top",yOffset + "px")
.css("left",xOffset + "px")
.fadeIn("fast");
});
},
function(){
$("#preview").remove();
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
getDimensions.php:
<?php
list($width, $height, $type, $attr) = getimagesize($img);
echo json_encode(array("w"=>$width,"h"=>$height));
?>

Answer 1

$("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");
when u append the img which have src prop,that will not fire load event any more.That's the problem is.

Answer 2

Have you tried..
var rand = Math.floor(Math.random()*11);
$.get("getDimensions.php/?img=" + url + "&r=" + rand, function(data){
w = data.w;
h = data.h;
$("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
},"json");
( Also, I would strongly recommend .ajax over .get)
Can you view what you are getting back from getDimensions.php (in firebug)?

Answer 3

My guess is that jQuery has no way of knowing that the data returned from getDimensions.php is JSON (as opposed to plain old text), and it isn’t trying to parse it.
What's the value of data (if you print it out to the console)?
If this is the problem, you can solve it by adding this line to the PHP script, before echo:
header('Content-Type: application/json');