Unable to update SCRIPT inside DIV once page has loaded

Question

The following code works:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scratch">
    <script>
        console.log("Foo");
    </script>
</div>


<script>

    $(document).ready(function () {
        setTimeout(updateScratch,2000);
    });

    function updateScratch() {
        var newHTML = '<script>console.log("Bar")</scr'+'ipt>';
        $(".scratch").html(newHTML);
    }

</script>

If I run that, the console displays Foo, and two seconds later, the word Bar appears.

However, if I have the following code, it doesn't work:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scratch">

<script src="https://static.kuula.io/embed.js"
        data-kuula="https://kuula.co/share/7PHTd?fs=0&vr=0&gyro=0&autorotate=0.47&thumbs=1&hideinst=1&chromeless=1&logo=-1"
        data-width="100%"
        data-height="500px"
        ></script>

</div>


<script>

    $(document).ready(function () {
        setTimeout(updatePanorama,10000);
    });

    function updatePanorama() {
        var newField = '7PH7S';
        var newHTML = '<script src="https://static.kuula.io/embed.js" ';
        newHTML += 'data-kuula="https://kuula.co/share/' + newField;
        newHTML += '?fs=0&vr=0&gyro=0&autorotate=0.47&thumbs=1&hideinst=1&chromeless=1&logo=-1" ';
        newHTML += 'data-width="100%" data-height="500px">';
        newHTML += "</scr"+"ipt>";

        $(".scratch").html(newHTML);
        setTimeout(updatePanorama,10000);
        console.log("Here we go again...");
        console.log(newHTML);
    }

</script>

The initial panorama gets displayed. I know the function updatePanorama gets called properly, because "Here we go again..." appears every 10 seconds in the console.

Finally, using Chrome Dev Tools I can see that the scratch div contains the updated HTML.

But the script is failing to be executed the second time. I don't see the new panorama. The old one disappears, but the new one doesn't appear.

Possible duplicate of [How to force a script reload and re-execute?](https://stackoverflow.com/questions/9642205/how-to-force-a-script-reload-and-re-execute) — Shivanshu Kant Prasad, Aug 12 '18 at 06:55
did my answer below solved your issue? Any feedback would be appreciated — Andriy, Aug 25 '18 at 19:15
Hi, no it didn't. I thought I replied earlier. I gave up trying in the end and solved the issue another way. Thanks for trying though. — Relaxing In Cyprus, Sep 10 '18 at 18:19

Andriy · Answer 1 · 2018-08-12T07:36:06.533

At the script there is a condition which ensures that the code is loaded and executed only once:

if (!window._kuulaEmbedScriptLoaded) {
  window._kuulaEmbedScriptLoaded = !0;
  ...
}

This probably blocks your secondary execution. Also you need to dispatch DOMContentLoaded event manually (for example, as explained here):

var DOMContentLoaded_event = document.createEvent("Event");
DOMContentLoaded_event.initEvent("DOMContentLoaded", true, true);
window.document.dispatchEvent(DOMContentLoaded_event);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scratch">

<script src="https://static.kuula.io/embed.js"
        data-kuula="https://kuula.co/share/7PHTd?fs=0&vr=0&gyro=0&autorotate=0.47&thumbs=1&hideinst=1&chromeless=1&logo=-1"
        data-width="100%"
        data-height="500px"
        ></script>

</div>


<script>

    $(document).ready(function () {
        setTimeout(updatePanorama,10000);
    });

    function updatePanorama() {
        var newField = '7PH7S';
        var newHTML = '<script src="https://static.kuula.io/embed.js" ';
        newHTML += 'data-kuula="https://kuula.co/share/' + newField;
        newHTML += '?fs=0&vr=0&gyro=0&autorotate=0.47&thumbs=1&hideinst=1&chromeless=1&logo=-1" ';
        newHTML += 'data-width="100%" data-height="500px">';
        newHTML += "</scr"+"ipt>";

        $(".scratch").html(newHTML);
        
        window._kuulaEmbedScriptLoaded = false;
        var DOMContentLoaded_event = document.createEvent("Event");
        DOMContentLoaded_event.initEvent("DOMContentLoaded", true, true);
        window.document.dispatchEvent(DOMContentLoaded_event);

        setTimeout(updatePanorama,10000);
        console.log("Here we go again...");
        console.log(newHTML);
    }

</script>

Unable to update SCRIPT inside DIV once page has loaded

1 Answers1