Loading files into html file and then doing some operations on it won't work

Question

I am trying to load (append) a couple of documents into HTML, one tag specifically and then do some operations on the loaded files like count the number of some tags, append more tags, put some items into array and similar.

The files I am loading are all SVG files, that have a similar structure with xml and searching through tags with jQuery is simple. But it doesn't seem to work.

I get the svg's to display and when I try to search for a specific tag I get null as a result...

This is the example of the code I have:

HTML:

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="stilovi/style.css">
    <title>Testing</title>
</head>

<body>
    <div id="avengers">
    <svg id="Layer_3" x="0" y="0" viewBox="-400 -100 1000 1000" xml:space="preserve" enable-background="new -400 -100 1000 1000"></svg>
    </div>
</body>

And the script bellow I have for appending the files into html:

<script src="jquery-3.1.0.min.js"></script>
<script>
     $(document).ready(function(){
        var svgArray = ['capt_am_optimizirano1.svg','hulk_optimizirano1.svg', 'iron_man_optimizirano1.svg']
        $.each ( svgArray, function (index, data){
        $.get( data, function(data){ 
              $(data).find("style").appendTo("#Layer_3");
              $(data).find("g").appendTo("#Layer_3");
              });
         });

        var amerpoly = document.getElementById('amer');
        console.log(amerpoly);
    });  
</script>

Am I doing this incorrectly? Is there another way to load files into html and then use its contents for further processing?

you're doing ajax requests. the $.each/$.get will loop/finish BEFORE you get results back from the server, which means your inserted elements won't exist (yet). you need to wait until all the ajax requests have completed. — Marc B, Jul 29 '16 at 18:05
easy wait: count how many times you're going to do an ajax call, then have the success handler increment a counter when it's done. `if (counter >= total_calls) { you_are_done(); }` — Marc B, Jul 29 '16 at 18:11
Is it better to then put a sucess handler with a counter inside the each function, or just use the when, wrapping around the whole each function? — Ivan Horvatin, Jul 29 '16 at 18:20
.when() can be used for a SINGLE requests, but you're doing multiple, and each one will have its OWN when(). you'd still need a counter and have each success increment that counter, and every success handler compare the count. only the FINAL request would then call your callback. — Marc B, Jul 29 '16 at 18:22
I see, i see, ok i'll try to do it with the counters and get back to you. — Ivan Horvatin, Jul 29 '16 at 18:23
Also a general question. Is this the right way of adding files to a html? Or is there a more right way of appending similar structer to a html file? — Ivan Horvatin, Jul 29 '16 at 18:24
it's not exactly efficient, since it's one extra http call for every file. if you know in advance what files you want, it'd be easier to just generate the page in advance with that stuff included, e.g. in php a simple series of `include('file1.svg'); include('file2.svg'); etc...` — Marc B, Jul 29 '16 at 18:25
Sooo...simply include one after the other in the html im using? I was thinking of just counting the number of files and generating includes based on that number then. — Ivan Horvatin, Jul 29 '16 at 18:35
`$.when` includes support for multiple parallel ajax requests; no need to count responses manually, just pass all the requests in a single list and you'll get a single promise that triggers after all the requests are complete. https://api.jquery.com/jquery.when — Daniel Beck, Jul 29 '16 at 18:37
@DanielBeck Is there a way so i don't have to write all the get requests manualy? Can't i just generate them inside the when? I don't have any ideas at the moment.. In the future i might have more files, and then i will have to do more requests and i want to make them dinamicly — Ivan Horvatin, Jul 29 '16 at 19:15

score 0 · Accepted Answer · edited May 23 '17 at 12:17

With help from Daniel Beck and Marc B i came up with an answer.

I changed my code to:

$(document).ready(function(){
        var svgArray = ['capt_am_optimizirano1.svg','hulk_optimizirano1.svg', 'iron_man_optimizirano1.svg'];
        var lengthA = svgArray.length;          
        var ajaxGetSvg = [];

        for(var i=0; i<lengthA; i++){
            ajaxGetSvg.push(
                $.get( svgArray[i], function(data){ 
                    $(data).find("style").appendTo("#Layer_3");
                    $(data).find("g").appendTo("#Layer_3");
              })
            );
        }
        $.when.apply($, ajaxGetSvg).then(function() {
            var amerpoly = document.getElementById('amer').querySelectorAll('polygon');
            console.log(amerpoly);
            console.log(amerpoly.length);
        });
});

So i am using $.when as purposed to wait for all of the ajax requests to finish, after in then function i am doing some operations (this is just an example).

I also generate the requests in advance in a for loop, since i might in the future change the number of files i will be using. Saving all the requests in a list and passing that list into $.when function. Note that when passing in the list i am using .apply in addition to the list because $.when doesn't accept arrays. Below are the links i used to get my answer. Documentation about $.when, $.apply and an answer on stackoverflow.

$.when

$.apply

Answer that helped me generate and pass the list inside $.when..Here

Loading files into html file and then doing some operations on it won't work

1 Answers1