I am trying to learn how to build an image gallery on a website. I am creating the page using .html / .css / .js files. I also have an image folder on the web server that has an arbitrary number of images in it. My goal is to inject img tags containing each of those images URL's from that folder into the photos div in my html.
I wrote the following php script which I also have on the server:
<?php
$imagesDir = '../images/art/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
echo json_encode($images);
?>
I realize I could generate the entire html through a php script and bypass the AJAX, however I don't want to do that as learning is my primary objective here and I want to learn how to interact with php through AJAX.
The output of the php script when I visit the URL (http://www.fakedomain.com/php/images.php) in the web browser is of the following form:
[
"../images/art/art01.jpg",
"../images/art/art02.jpg",
"../images/art/art03.jpg",
"../images/art/art04.jpg"
]
I am then trying to make an AJAX call in my javascript to retrieve the JSON from the php file.
$.getJSON('http://www.fakedomain.com/php/images.php', function(images) {
$.each(images, function(i, image) {
$("#photos").append("<a class='fancybox' rel='group' src='" + image + "'/><img src='" + image + "'/></a>");
});
});
Although this seems like it should be very straightforward from other posts I've seen, I get errors and it appears that no code executes within the callback function. I've even just tried calling the javascript below directly in the Chrome Javascript console while on the page and I get a longwinded error.
Entered into Chrome Javascript console:
$.getJSON('http://www.domain.com/php/images.php', function(images) { console.log("test") });
Longwinded error:
Object {readyState: 1, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function (e){var t=e||T;return l&&l.abort(t),k(0,t),this}
always: function (){return i.done(arguments).fail(arguments),this}
complete: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
done: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
error: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
fail: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
getAllResponseHeaders: function (){return 2===x?a:null}
getResponseHeader: function (e){var t;if(2===x){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t}
overrideMimeType: function (e){return x||(p.mimeType=e),this}
pipe: function (){var e=arguments;return b.Deferred(function(n){b.each(t,function(t,o){var a=o[0],s=b.isFunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&b.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"With"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()}
progress: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
promise: function (e){return null!=e?b.extend(e,r):r}
readyState: 0
responseText: ""
setRequestHeader: function (e,t){var n=e.toLowerCase();return x||(e=v[n]=v[n]||e,y[e]=t),this}
state: function (){return n}
status: 0
statusCode: function (e){var t;if(e)if(2>x)for(t in e)m[t]=[m[t],e[t]];else N.always(e[N.status]);return this}
statusText: "error"
success: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
then: function (){var e=arguments;return b.Deferred(function(n){b.each(t,function(t,o){var a=o[0],s=b.isFunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&b.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"With"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()}
__proto__: Object
I would greatly appreciate any help. I've read through many similar StackOverflow posts and tried their solutions with no success. I feel like I must be missing something basic here.
Thank you very much for taking the time to assist.
EDIT:
Arun's comment letting me know that I needed to be calling the php script from the same domain was the clue that led me towards fixing this issue by deploying my code to the web server where the php script already was. Even then I had an error when my AJAX called the php script using an absolute path. Once I switched to using a relative path, it worked fine. Any ideas why?
