Serving multiple ad widgets on a single publisher page

Question

My main problem is due to scripts running before DOM is loaded and i can't use document.ready event. For more details read further

I am making a ad serving app. I have made a small code snippet which will be given to the publisher to add on their website to load our ads. A specimen of the same is as follows:

<div class="my-widget" data-widgetId="1" data-page-url="http://foo.bar/" ></div>
<script src="http://myadserver.exp/js/widget.js"></script>

The HTML div is where ads are to be displayed by the script just below it. This script also contains methods to verify add and fill ads in that div.

var adDiv = document.getElementsByClassName('my-widget')[0];
insertScriptWithSouce('http://myadserver.exp/serve.php?id=' + adDiv.dataset.widgetId);

function fillAds(htmlFromserver) {
    adDiv.innerHTML = htmlFromServer;
}

This is only a example to understand the scenario

Now my problem is if a publisher adds more than one widget on the same page

That code would look like

<div class="my-widget" data-widgetId="1" data-page-url="http://foo.bar/" ></div>
<script src="http://myadserver.exp/js/widget.js"></script>

<div class="my-widget" data-widgetId="2" data-page-url="http://foo.bar/" ></div>
<script src="http://myadserver.exp/js/widget.js"></script>

without any of his own html

Now the ad from the second widget get placed in the div of first widget and the second widget remains empty
I have also tried loops for many classes but when each script runs it does not know that there is another widget below it as it is not yet loaded in the DOM

Note: I can not use ids and jQuery as its forbidden by seniors I also cant use document.ready event as if document fails to load then my ads will not be served

Answer 1

Got nothing as a solution but still got the best way around so I thought it might help someone else

This javascript can be used for solution

var adDiv = document.querySelectorAll('my-widget:not([id])');
adDiv = adDiv[0];
adDiv.id = 'my-id' + (Math.random() * 100).toFixed(0);
insertScriptWithSouce('http://myadserver.exp/serve.php?id=' + adDiv.dataset.widgetId + '&origId=' + adDiv.id);

function fillAds(htmlFromserver, idSentFromHere) {
    adDiv = document.getElementById(idSentFromHere);
    adDiv.innerHTML = htmlFromServer;
}

Answer 2

Instead of having multiple script blocks, just have one script reference that loops through the ad container divs on the page.

function fillAd(htmlFromServer, widgetId) {
    var adDivQuery = document.querySelectorAll('[data-widgetId="' + widgetId + '"]');
    if (adDivQuery.length > 0) {
        adDivQuery[0].innerHTML = htmlFromServer;
    }
}

var adDivs = document.getElementsByClassName('my-widget');

for (var i=0, il=adDivs.length; i<il; i++) {
    insertScriptWithSource('http://myadserver.exp/serve.php?id=' + adDivs[i].dataset.widgetId);
}

In this scenario the script inserted by the insertScriptWithSource() function will pass a second argument into your fillAd() function with the widget ID that was initially passed to it.