create img element dynamically from folder

Question

I use the following code to retrieve all images name from a specific folder :

$(document).ready(function() {
  var loc = "../images/test/";
  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($("<p>test</p>"));
          });
      }
  });
});

Problem is that i go in success callback but i never enter in the loop to create my elements.

The content of "data" is a html page but when i want to parse the content of data variable, the page is not yet created.

Please have a look in this jsFiddle : http://jsfiddle.net/0rdv9jy5/2/ On HTML section, it's the content of the data variable.

@ArunPJohny content of data is displayed on the jsFiddle on the HTML section — wawanopoulos, Jun 23 '15 at 13:05
do update your fiddle by putting relevant information in their respective blocks i.e. put JS/CSS/HTML in their respective blocks. — Lokesh Yadav, Jun 23 '15 at 13:06
Wait, in the JSFidle, the HTML part is the content of the data ? Meaning the data contains Javascript and this Javascript will create the when running ? This cannot work because the Javascript will not be evaluated. — ben, Jun 23 '15 at 13:23
Then it will never work. The Javascript will not be executed so the content will stay empty. The problem is not your loop. The problem is your data. Can you change the data to be plain html (with no javascript) ? — ben, Jun 23 '15 at 13:25
@ben I follow this link ; http://stackoverflow.com/questions/18480550/how-to-load-all-the-images-from-one-of-my-folder-into-my-web-page-using-jquery I cannot do this ? — wawanopoulos, Jun 23 '15 at 13:26
This is the frontend part. What is wrong is your backend. Your backend send javascript instead of HTML. If you make it send HTML (like @loli did here http://jsfiddle.net/0rdv9jy5/3/) then your code works — ben, Jun 23 '15 at 13:29

score 1 · Answer 1 · answered Jun 23 '15 at 13:10

1

Try to use a documentFragment. Basically, you create a documentFragment, you put the data in. And then you search from there:

var $html = $(document.createDocumentFragment());
var $fragment = $(data);
$html.append($fragment);
$($fragment).find(/*...*/);

answered Jun 23 '15 at 13:10

ben

3,558
1
15
28

I tried your code but it's te same result. I doesn't see the content really created. I see that the content of document is the content of the data variable.. – wawanopoulos Jun 23 '15 at 13:19

create img element dynamically from folder

1 Answers1