How to determine number of elements after dom manipulation ?

[Richard Bakker-2]

I am generating elements (img's) based on data from an xml file.
Once that is done, I want to determine the number of icons that were
generated.

  i do a: alert($('img').size())
result: 0, which isn't the case

how can i determine them after they have generated ?
**********************************************
function dataloader(location,service,div){
        $.ajax({
                type: "GET",
                url: "includes/data.xml",
                dataType: "xml",
                success: function(xml) {

                        $(xml).find('group').each(function(){
                                if($(this).attr("name") == service){
                                $(this).find("Service").each(function(){
                                var type = $(this).find("Type").text()
                                var host = $(this).find("Host").text()
                                var name = $(this).find("Name").text()
                                var site = $(this).find("Site").text()

                                if(type == "Host" && site == location){
                                        $('<img src="images/
server.jpg" title="'+ host +'" />').appendTo
('#'+div);
                                }
                        })
                        }
                        });
                }
        });

}

[Richard Bakker-2]

Does anyone perhaps know ?


On 7 nov 2009, at 09:18, Richard Bakker wrote:

> I am generating elements (img's) based on data from an xml file.
> Once that is done, I want to determine the number of icons that were
> generated.
>
> i do a: alert($('img').size())
> result: 0, which isn't the case
>
> how can i determine them after they have generated ?
> **********************************************
> function dataloader(location,service,div){
>       $.ajax({
>               type: "GET",
>               url: "includes/data.xml",
>               dataType: "xml",
>               success: function(xml) {
>
>                       $(xml).find('group').each(function(){
>                               if($(this).attr("name") == service){
>                               $(this).find("Service").each(function(){
>                               var type = $(this).find("Type").text()
>                               var host = $(this).find("Host").text()
>                               var name = $(this).find("Name").text()
>                               var site = $(this).find("Site").text()
>
>                               if(type == "Host" && site == location){
>                                       $('<img src="images/
> server.jpg" title="'+ host +'" />').appendTo
> ('#'+div);
>                               }
>                       })
>                       }
>                       });
>               }
>       });
>
> }

[Qamal Kosim-Satyaputra]

where did you exactly call 'alert($('img').size())'? inside the callback function? remember ajax is asynchronous, if you're calling it after calling dataloader() the ajax mat not return yet and your images aren't yet in the DOM.

On Mon, Nov 9, 2009 at 4:45 AM, Richard Bakker <richardbakker@...> wrote:

Does anyone perhaps know ?


On 7 nov 2009, at 09:18, Richard Bakker wrote:

I am generating elements (img's) based on data from an xml file.
Once that is done, I want to determine the number of icons that were
generated.

i do a: alert($('img').size())
result: 0, which isn't the case

how can i determine them after they have generated ?
**********************************************
function dataloader(location,service,div){
     $.ajax({
             type: "GET",
             url: "includes/data.xml",
             dataType: "xml",
             success: function(xml) {

                     $(xml).find('group').each(function(){
                             if($(this).attr("name") == service){
                             $(this).find("Service").each(function(){
                             var type = $(this).find("Type").text()
                             var host = $(this).find("Host").text()
                             var name = $(this).find("Name").text()
                             var site = $(this).find("Site").text()

                             if(type == "Host" && site == location){
                                     $('<img src="images/server.jpg" title="'+ host +'" />').appendTo
('#'+div);
                             }
                     })
                     }
                     });
             }
     });

}

[Karl Swedberg-2]

You'll have to do it within the success callback:

function dataloader(location,service,div){
   $.ajax({
     type: "GET",
     url: "includes/data.xml",
     dataType: "xml",
     success: function(xml) {

       $(xml).find('group').each(function(){
         if($(this).attr("name") == service) {
           $(this).find("Service").each(function(){
             var type = $(this).find("Type").text()
             var host = $(this).find("Host").text()
             var name = $(this).find("Name").text()
             var site = $(this).find("Site").text()

             if(type == "Host" && site == location){
               $('<img src="images/server.jpg" title="'+ host +'" /
 >').appendTo('#'+div);
             }
           });
         }
       });
       alert($('#' + div).find('img').length); // <-- should give you  
correct number here
     }
   });
}

--Karl

On Nov 8, 2009, at 12:45 PM, Richard Bakker wrote:

> Does anyone perhaps know ?
>
>
> On 7 nov 2009, at 09:18, Richard Bakker wrote:
>
>> I am generating elements (img's) based on data from an xml file.
>> Once that is done, I want to determine the number of icons that were
>> generated.
>>
>> i do a: alert($('img').size())
>> result: 0, which isn't the case
>>
>> how can i determine them after they have generated ?
>> **********************************************
>> function dataloader(location,service,div){
>>      $.ajax({
>>              type: "GET",
>>              url: "includes/data.xml",
>>              dataType: "xml",
>>              success: function(xml) {
>>
>>                      $(xml).find('group').each(function(){
>>                              if($(this).attr("name") == service){
>>                              $(this).find("Service").each(function(){
>>                              var type = $(this).find("Type").text()
>>                              var host = $(this).find("Host").text()
>>                              var name = $(this).find("Name").text()
>>                              var site = $(this).find("Site").text()
>>
>>                              if(type == "Host" && site == location){
>>                                      $('<img src="images/
>> server.jpg" title="'+ host +'" />').appendTo
>> ('#'+div);
>>                              }
>>                      })
>>                      }
>>                      });
>>              }
>>      });
>>
>> }
>