-1

a HTML div 

<div id="viz"></div>

javascript

<script type="text/javascript">
var gg=document.getElementById("viz");

function ex(nn) {
    var zzz;

    d3.xml("./xyzfiles/svgs/s"+nn+".svg", "image/svg+xml", function(xml) {
        zzz=xml.documentElement;
    });

    if(q==null) {
        alert("no child");
    } else {
        alert("has child");
    }

    gg.appendChild(zzz);
}

ex(1);    
ex(6);
</script>

i have svg files s1.svg,s2.svg .... which are loading when i use alert() function but when i remove like below

<script type="text/javascript">
var gg=document.getElementById("viz");

function ex(nn) {
    var zzz;

    d3.xml("./xyzfiles/svgs/s"+nn+".svg", "image/svg+xml", function(xml) {
        zzz=xml.documentElement;
    });

    gg.appendChild(zzz);
}

ex(1);    
ex(6);
</script>

ex(1),ex(6) are not getting executed.Why it is happening sir and Is there any silent way to refresh DOM so that ex() can be executed without alert().

kishu
  • 29
  • 7

1 Answers1

1

You're appending zzz before the d3.xml call has returned. You need to do that within the callback. The alert is causing the browser to stop and so the asynchronous call has completed by the time of the append. Using console.log instead of alert would have provided a clue.

By the way, what is q supposed to be for?

There are a good half-dozen questions on SO about this very topic. See How do I return the response from an asynchronous call?, Variables set during $.getJSON function only accessible within function, Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference, Get data from fs.readFile.

Community
  • 1
  • 1