Question

I would like to replace the source url of the script on the fly to speed up dev stages only, so no actual production usage. This kind of replacement works well with css or images. But have hard time to make it work with javascript src. The script seems not executed, although loaded via src.

Here is what I have done.

..................
  return this.each(function() {
    $(this).click(function() {
    var t = $(this);
    options.newVal = t.val();
    var absUrl = '/root_path_still_within_the_same_domain/';
    //options.oldVal is just to limit the replacement scope
    var oldJsUrl = absUrl + options.oldVal + '.js';
    var newJsUrl = absUrl + options.newVal + '.js';

    var reJsUrl = $('script[type*=javascript][src*=' + options.oldVal + ']' || 'script[type*=javascript][src*=' + options.newVal + ']');

        if (oldJsUrl.length && options.oldVal.length) {
          reJsUrl.attr('src', newJsUrl);
        }

        options.oldVal = options.newVal;

    });
  }); 

......................

In Firebug, the target old src url (/old_path_to_file.js) is replaced with the new one (/new_path_to_file.js). So the replacement works. But it reports, (see the real absolute url http://, in case relevant):

Failed to load source for: http://localhost/……..js

So the script src is replaced, but not executed. Anything I missed, if this stuff is allowed anyway?

I have also tried to use $.getScript(absUrl + options.newVal + ‘.js’);, but this is not replacing the old src, just adding more js to the dom, which is not what I want. Any hint on this part too?

Thanks for all possible help.

Answer 1

Do you want to “replace” the old script? That is to say, the javascript that was loaded with the script tag is no longer in memory and the new javascript is? You can’t do this in this way. You have to un-define and unattach event preformed by the original scripts.