0

I have this script <script type="text/javascript" src="customJS/jsonRetrieve.js" async></script>

The script makes me retrieve the data from a JSON file and store it in an array.

first question is: how can i load my index page only after the script is fully loaded? i get the error of 'undefined'.

After loading the script i have to add the code from the array something like this 

"<img src='images2/1.jpg' id='0' style='width:70%' class='rounded' data-toggle='modal' onclick='setMod(this.id);setData(this.id)' data-target='#myModal' />"

to my carousel and that by adding it to the div. I used the jQuery function 'append' to add the images to my #carousel div but the images are not showing in the carousel preview. how can i fix that ? should i refresh the carousel ?

<script type="text/javascript" src="js/jquery.waterwheelCarousel.js" defer></script>
<script type="text/javascript" src="customJS/carouselJS.js" defer></script>

$(window).load(function () {
      $('#carousel').append(items[0]);
});
Andrew Lohr
  • 4,830
  • 1
  • 21
  • 36
Med yacine
  • 53
  • 6

1 Answers1

1

You can prevent a script from loading until you add the images with something like this:

<script onload="customJsFunction();" src ="customJS/jsonRetrieve.js"></script>

A similar question is here: Call javascript function after script is loaded.

Joseph Cho
  • 3,139
  • 4
  • 17
  • 27
  • Could you you setup a fiddle here: https://jsfiddle.net/ It'll help everyone read and test your code. – Joseph Cho May 09 '18 at 22:02
  • i think i have to load this script after i add the images – Med yacine May 09 '18 at 22:45
  • any solution ? i couldnt find a way to make this work – Med yacine May 10 '18 at 12:29
  • Thanks for making a fiddle. The issue is with `$('#carousel').append(items[0]);`. items isn't an array defined in that function! You need to return the value of `jsonRetrieve.js` not just include the file. Please check out line 43 https://jsfiddle.net/j4pruxs5/1/ – Joseph Cho May 10 '18 at 14:01