I am in a situation where I need jQuery to make sense of an ajax response, but due to latency reasons, I cannot load jQuery on page load.
My goal is to be able to dynamically load javascipt and css whenever this ajax call is made. After reading numerous articles on this topic, I haven't found a solution that works consistently across all browsers.
One approach I tried was inserting link/script tags into the javascript response and then evaluating the javascript output after a delay of 300ms. However, this method failed in Chrome, possibly due to a race condition.
Another attempt involved using the following script:
function addJquery() {
var script = document.createElement("script");
script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
script.setAttribute('type', 'text/javascript');
script.addEventListener('load', function() {
var script = document.createElement("script");
document.body.appendChild(script);
}, false);
document.body.appendChild(script);
}
While this solution worked in Firefox, it did not produce the desired result in Chrome. I'm unsure of what mistake I may be making here. Can someone please assist me in resolving this issue?