Question

As part of an ajax call I want to add this javascript function listed between a script tag to my document. The ajax call works fine except it cuts out this portion of my document.

<script language="javascript"> 

    window.onload = function(){


            var input = document.getElementById('tid-acc');


            document.getElementById('rule-type').onchange = function() { 
               var v

al = this.value; 
           if (val == 'tid and acc') {
               input.style.display = 'inline'; 
           }
           else {
              input.style.display = 'none';
           }
        };
    }
    </script>

What am I doing wrong? For reason I won’t go into, I need to execute this function dynamically on Ajax call. Thanks in advance.

Answer 1

Here is a good article about it: Global eval. What are the options?

Article also compares how famous js libraries do it:

Global eval in libraries

So what do some of the popular Javascript libraries do? Which global
eval solution do they chose?

As we’ve seen earlier, jQuery sacrifices return value for a more
extensive browser support, using script insertion technique in its
jQuery.globalEval method.

Prototype.js doesn’t even try to evaluate scripts globally — it uses a
good old, direct eval invocation. Instead, Prototype.js warns about
ramification of local execution in the documentation.

Dojo choses the infamous window.eval variation, but does something
really messed up — it uses indirect eval if eval exists on a global
object (which should be true in all ES3-compliant browsers), and falls
back on regular eval invocation. This kind of fall back obviously
results in code executed locally, which should also happen silently.
Dojo’s eval behavior will vary wildly depending on the environment,
and has a possibility of uncaught error. On a related, humorous note,
I was just as stunned by comments around dojo.eval as David Mark in
this message.

Mootools uses window.execScript when present, falling back on script
insertion (similar to jQuery). jQuery’s script insertion, however, is
more robust than Mootools, as they actually test if it results in
evaluation of code.

Fuse.js choses a very elaborate and careful strategy. It tests if
indirect eval works as expected (catching an error if any), uses it if
it does; if indirect eval is defunct, Fuse falls back on script
injection. Unlike jQuery or Mootools, it actually tries to return a
value of a code executed via script injection. It does so by wrapping
contents of code with eval. An interesting side effect of executing
code globally via eval is that function and variable declarations
create deletable bindings (which is most likely an insignificant
detail).

Here is how Mootools 1.3.2 does it:

String.implement('stripScripts', function(exec){
    var scripts = '';
    var text = this.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(all, code){
        scripts += code + '\n';
        return '';
    });
    if (exec === true) Browser.exec(scripts);
    else if (typeOf(exec) == 'function') exec(scripts, text);
    return text;
});

Browser.exec = function(text){
    if (!text) return text;
    if (window.execScript){
        window.execScript(text);
    } else {
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.text = text;
        document.head.appendChild(script);
        document.head.removeChild(script);
    }
    return text;
};

// on successful HTML request
success: function(text){
    response.html = text.stripScripts(function(script){
        response.javascript = script;
    });
}