image not showing after adding it dynamically

Question

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]);
});

• Calvin Nunes: Can you provide a minimal verifiable example with a working snippet?
• Studocwho: You would ideally need to refresh the carousel after adding the images dynamically.
• Med yacine: @Studocwho how can i refresh the carousel scripts and css and the div
• Med yacine: @CalvinNunes thats alot of work x)
• Med yacine: cant i make the carousel to load only after i added the images dynamically ?

Answer 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: Could you you setup a fiddle here: jsfiddle.net It'll help everyone read and test your code.
• Med yacine: i think i have to load this script <script type="text/javascript" src="js/jquery.waterwheelCarousel.js" ></script> after i add the images
• Med yacine: any solution ? i couldnt find a way to make this work
• Joseph Cho: 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 jsfiddle.net/j4pruxs5/1