CODEWITHSUNDEEP
jqueryhtmlajax
greyoxide
greyoxide

Reputation: 1287

jquery/AJAX get function not working

Ive been staring at this for an hour now and I cant figure out what Im doing wrong. Im hoping for a second set of eyes.

The purpose of the function is to get all of the JPG images from a folder on the server and create an array of divs with the acquired images as the div's background image. mostly this is because IM too lazy to write out all of the html, but also because it allows for quick changes without editing code.

The latest jQuery library is loaded, and supporting other jQuery functions on the page. I think the problem is in the line starting with $("body"). This function runs without error, but no divs are created.

$(document).ready(function() {
var loc = "images/slides";
var fileextension = ".jpg";
$.ajax({
    url: loc,
    success: function (data) {
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http:///", "");
            $("body").append($("<div class='slide' style='background-image:url(&apos" + loc + filename +"&apos)></div>"));
        });
    }
});
});

Upvotes: 0

Views: 126

Answers (1)

Popnoodles
Popnoodles

Reputation: 28409

"...image:url(&apos" + loc + filename +"&apos)..."

&apos? Do you mean &apos;? I'm not sure that would render correctly. A ' is fine though, so this:

$("body").append($("<div class='slide' style='background-image:url('" + loc + filename +"')></div>"));

Personally, I would use this syntax.

$('<div>', {'class': 'slide'}).css({
    backgroundImage: "url('" + loc + filename +"')"
}).appendTo('body');

NB, the key 'class' is encapsulated because not doing so causes IE to break

Upvotes: 1

Related Questions