append image with variable assigned ID(called using ajax)

append image with variable assigned ID(called using ajax)




Solution
------------------------------------------------
dsvick

Re: append image with variable assigned ID(called using ajax)

37 minutes ago
I assume "album1" is a div or something that holds all the images? 
This code here  $(this).children().attr("id") is getting all of the children of the element that was clicked, then you are asking for the id, it will always return the id of the first child.

If that doesn't help you may want to post the actual markup that you're dealing with.

Dave

----------------------------------------------



I'm really new to ajax so I'm still fumbling around alot. What I want is to scan a directory, call the images, create the element, and assign an ID to the image based off of the image name. It's not working properly however.

What I'm doing is grabbing the name of the file and storing it in a variable. Then using that variable as I assign the ID for each image. When I alert check the variable, it correctly shows the file name. But once the entire directory is loaded, it overwrites every ID to that of the last stored image name in the variable. So in the end, every image will have the same ID as the last image called.

I thought the function would write and append the image with the content, then once it cycles again, it updates the variable but have no further contact with the previous element. ?

Here is the code atm. Is it my jquery that's wrong or is it how I'm using the variables in combination with the eachfunction? Any insight would be appreciated.

*edit*
I just realized it my be my test.... I was focused so much on this as the reference that I forgot the older test I did. They are each retaining the css for their respective ID's. Yet when I click them it's only showing the last image's ID in the alertId


  1. $(document).ready(function() {
  2.         $('.album1').click(function() {
  3.                 var clicktest2 = $(this).children().attr("id");
  4.                 alert(clicktest2);
  5.         });
  6. });


  1. $(".album2").fadeOut(1000, function() { $(this).empty(); });       
  2.             var dir = "http://localhost/Projects/Work/AjAx/foundations/";
  3.             var extension = ".jpg";
  4.             $.ajax({
  5.                        url: dir,
  6.                        success: function (data) {
  7.                               $(data).find("a:contains(" + extension + ")").each(function () {
  8.                                          var filename = this.href.replace(window.location.host, "").replace("http://", "");

  10.                                         $(".album1").delay(100).fadeIn(1000, function() {
  11.                                                   var fileNameId = filename.replace("/Projects/Work/AjAx/foundations/Server/", "");
  12.                                                   var fileNameId2 = fileNameId.replace(".jpg", "");
  13.                                                   $('.album1').append($('<img src="http://localhost/' + filename + '"' +  ' id="' + fileNameId2 + '"' + '></img>'));
  14.                                                   $(".test").fadeIn(1000);
  15.                       });
  16.                  });               
  17.      x = 0;
  18.      y = 1;
  19.    }
  20. });