Is it possibly to re-load a JS script file dynamically?

Question

We're looking at using Blockly to enable power-users to design business rules in a non-coding, sandboxed way.

When they edit their diagram to regenerate new JS code, I would like to reload this into the browser. One aspect of this is, if the code is saved as an external JS script, how can I reload it in the browser without refreshing the whole page?

What have you tried so far? if anything. What other research have you done? — mast3rd3mon, Dec 20 '17 at 11:03
I have tried searching google and found nothing. I can find no reference to this so I don't know where to start... — Mr. Boy, Dec 20 '17 at 11:09
If someone can advise me what question I should be asking that'd be great... clearly this is a broad question but that's a time SO is not great, if you don't know enough to ask the right question :) — Mr. Boy, Dec 20 '17 at 11:12
If you have access to a serverside language, maybe you could POST the string to the server. The server can then create a new .js file containing the code wrapped into a function and whatever module system you use. Then copy it to the public folder of your webserver and respond with the hyperlink to the newly created file. Then you can just grab the script and inject it into the correct scope. — Shilly, Dec 20 '17 at 11:19

score 1 · Accepted Answer · 2017-12-20T11:42:43.287

Even though your explanation is extremely messy, I’ll try to stick to the title and provide an example of how you might re-load a specific JS file dynamically (apologies if it is not what you were looking for, but then you’d better re-write your question).

I guess you did not search Google a lot, because in this SO answer you find how to re-load a JS file:

function reloadJs(src) {
    src = $('script[src$="' + src + '"]').attr("src");
    $('script[src$="' + src + '"]').remove();
    $('<script/>').attr('src', src).appendTo('body');
}

As the user points out, you can remove the old tag, but for that the code runtime should already be done. You just need to call the function specifying the source’s address.

That will literally reload the file, but you want to pass some modifications, therefore you need to run on server-side a script that serves the files according to your needs. You can specify information as GET parameters in your JS reload, such as ‘?parameter1=data1&parameter2=data2’.

However, I do not recommend to do that, form me the JS code should instead make AJAX calls to modify its behaviour, and not reload the entire file. But that is up to you.

Edit

If I understand you correctly, what you want to do actually is to give the client the actual JS code, and not to run the file in the server, according to some diagrams they design which will eventually build into JS code. Then what you could to is to have a <div> tag with a <pre><code> tags inside whose content is changed with jQuery through an AJAX call.

Then you should not actually load the JS file as a script, since that will make the browser execute it. What you have to do is something like this:

index.html

<div>
    <pre>
        <code id=“myCode”>
            Your JS file will show soon.
        </code>
    </pre>
</div>

As from jQuery documentation:

script.js

var jqxhr = $.get( "myFile.js", function(data) {
  $(“#myCode”).html(data)
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });

You obviously have to reference the JS file in your HTML file or it won’t load. You can encapsulate that inside a function and call it according to your convenience.

is `src` the actual JS code string in your example, or the path? JS is not my main language but I _think_ you are finding the loaded — Mr. Boy, Dec 20 '17 at 11:26
I'll try and come up with more specific sub-questions, as I made clear I'm neither a Blockly nor JS expert and that makes even understanding the question to ask hard! — Mr. Boy, Dec 20 '17 at 11:27
source is, as I said, the source address, the path, the URL, however you want to call it. Yes, it changes the tag to re-load the file. Is that what you need? — , Dec 20 '17 at 11:27
Oh I see, so in your example I've already regenerated the JS file by some method and this just reloads the new version in the browser. I'm going to accept this and reword my question towards this specific aspect of what I'm investigating so it's a better fit — Mr. Boy, Dec 20 '17 at 11:30
Yes this is more what I had hoped - inject JS code _as_ code, not have to `eval` it. — Mr. Boy, Dec 20 '17 at 11:42
Well that would be more or less the way of doing it, then you can customise the behaviour and the look, but that would be the basics of it. — , Dec 20 '17 at 11:43

Is it possibly to re-load a JS script file dynamically?

1 Answers1

index.html

script.js