Refresh content of a div with jquery

Question

I know this answer has been repeated, but no one worked for me, I don't know why :(. I have one div tag, which contains a script tag (from a website) and loads a kind of frame. That frame displays a monitor thanks to several variables, like the id (which is the most important). So, I want every 5 seconds, the id changes to display another monitor.

The problem is that in my refresh code I use the method load(), but in Firefox I get this warning "A call to document.write() from an asynchronously-loaded external script was ignored." and in chromium I get this one "Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."

This is my code:

<script type="text/javascript">
    var id = ["id1", "id2", "id3"];        
        var number;
        var i = 0;
        function change(){

            if(i<id.length){
                number = id[i];
                i++;
            }else if(i>=id.length){
                clearInterval();
                number = id[i];
                console.log("start again");
            }                   
            return number;
        }

        function refresh(){
            $('#midStag').load("myUrl" +  ' #midStag');
        }

   setInterval(refresh, 5000);
</script>

<div id="midStag">
<script type="text/javascript">
    //I only put the id because is the more important variable 
    //and the only one that I am changing
    id = cambio();
    /*more variables like width or height*/

</script>
<script type="text/javascript" src="http://dashboard.monitis.com/sharedModule/shareModule.js"></script>

I really need it, please. Any help I would appreciate that. If you don't understand something just tell it me and I'll correct. Thank you.

Answer 1

This is because the shareModule.js script has a document.write statement at the end. And since you are reloading that script when you use .load() you get the error since the document has been closed and the script is being loaded asynchronously.

You could do a few things to fix this:

1. Rewrite the script to not use document.write, but that requires access to the server it is stored on
2. Save the script locally and modify it to not use document.write. The only con would be you would have to update the script manually whenever sharedModule.js is updated on the server.

3. Edit the frame's url replacing the needed information, i.e. replace your new id with the old one. Then set the src with the new url.

   var src = $("span iframe").prop("src");
   src = src.replace(/publicKey=\d+/,"publicKey="+newKey);
   $("span iframe").prop("src",src);
   

4. Replace document.write with a function that will insert html in a more friendly manner

   document.write = function(markup){
       document.currentScript.parentElement.insertAdjacentHTML('beforeend',markup);
   };
   

Demo replacing document.write

monitis_embed_module_width = 100;
monitis_embed_module_height = 100;
monitis_embed_module_id = 300;
document.write = function(markup){
    document.currentScript.parentElement.insertAdjacentHTML('beforeend',markup);
};

var div = document.getElementById("test");
setTimeout(function(){
  var s = document.createElement("script");
  s.src = "http://dashboard.monitis.com/sharedModule/shareModule.js";
  div.innerHTML = "";
  div.appendChild(s);
},1000);

<div id="test">
  Simulating load...
</div>

Demo replacing src

var div = document.getElementById("test");
var frame = null; 
function reloadFrame(){
  frame = frame || div.querySelector("iframe");
  var src = frame.src;
  var id = Date.now();
  frame.src = src.replace(/publicKey=\d+/,"publicKey="+id);
}

setTimeout(reloadFrame,2000);

<div id="test">
  <script>
    monitis_embed_module_width = 100;
    monitis_embed_module_height = 100;
    monitis_embed_module_id = 300;
  </script>
  <script src="http://dashboard.monitis.com/sharedModule/shareModule.js"></script>
</div>