Databases
StackOverflow2013
Postsdbo
POGetting data through a PHP file using AJAX+JQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting data through a PHP file using AJAX+JQuery
    text
    copied!<p>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.</p> <p>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!!</p> <p>hover.js:</p> <pre><code>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("&lt;div id='preview'&gt;&lt;img src=" + url +" id='img'/&gt;&lt;/div&gt;"); $.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)&gt;viewWidth) { xOffset=e.pageX-img.width-70; } if((e.pageY+img.height)&gt;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(); }); </code></pre> <p>getDimensions.php:</p> <pre><code>&lt;?php list($width, $height, $type, $attr) = getimagesize($img); echo json_encode(array("w"=&gt;$width,"h"=&gt;$height)); ?&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload