My external function from javascript doesnt load before html

Question

Im developing a mobile application using INTEL XDK with bootstrap mainframe. I have the Html code and a few external js files with functions to run on it. For some reason the function dosmth() from the JS file doesnt load before the HTML so it gives me no result. (The function should return an array of strings). Can someone tell me what is wrong with my code. What am I missing.

HTML heading on including the file.

      <script src="js/file.js"></script>

This is the code on calling the function on my HTML file.

    <h4>
        <script type="text/javascript">
              document.write(dosmth());
         </script>
    </h4>

The code of the method in the js file.

        function getCities()
          {
            var url = file.api + "name";
             console.log(url);
             $.getJSON(url).done(function(response){
                              if (!response.length) {
                              console.warn("Empty");
              }
                          file.name = response;
                        $('body').trigger('name-data');
                           console.log(response);
                           return (response);
                    }.fail(function(data, status, error){
                       console.error("Something went wrong");
                                  });
                     }

Is `getCities` the "dosmth" function? If so, this is a duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — JJJ, Oct 25 '16 at 09:57
Yes it is the same, Im sorry i forgot to edit the name. However the link you sent is very helpful, but the way i wrote the code is the same as they tell you to do it in the link. and it unfortunately gives me nothing on solving the problem i have. The code of the function works perfectly fine if i run it on console, but when I try to have the result written somewhere in the html i have the problem i mentioned before — user6821889, Oct 25 '16 at 10:48
No, you don't have it written the same way as in the duplicate. You need to read it and *understand* it; it's simply impossible to return a value from an AJAX call. — JJJ, Oct 25 '16 at 10:51

score 0 · Accepted Answer · answered Oct 25 '16 at 11:24

Maybe this helps.

First, make sure the HTML markup is selectable. For instance, indicate an id for this h4.

<h4 id="cities"></h4>

You also need to wait for the document to finish loading before calling the JS function:

<script type="text/javascript">
     window.onload = function() {
         getCities();
     );
</script>

Instead of returning anything, we update the h4.

function getCities()
{
    var url = file.api + "name";
    $.getJSON(url).done(function(response){
        if (!response.length) {
            console.warn("Empty");
        }
        // don't know what these two lines are meant to do
        file.name = response;
        $('body').trigger('name-data');
        // update the h4 element
        $('#cities').html(response);
        // the next line was missing a ")" before ".fail"
    }).fail(function(data, status, error){
        console.error("Something went wrong");
    });
}

My external function from javascript doesnt load before html

1 Answers1