We Keep Coding

My Dynamic Ajax site is overloaded with multiple getScript calls

I have a dynamic website where all links grab new sections via an ajax request from other pages and replace the current section.
My problem comes in two forms. When I load a new div from an Ajax get request. Some sections need js files too. For example, one uses a particles.js as a canvas background. After I complete the ajax request I then getScript"js file" and it works. However if you move onto other sections that getScript is still running and now unbinded because that section is gone. If I go back to that section again I need to getScript again and now I'm running it twice. This can be very CPU and GPU intensive and slows down my site.
Things like css files are easy because I can create an if statement to load if its not already loaded, script tags are different because the Dom only loads once. Appending/removing the script to the head is useless because the site is entirely Ajaxed.
here is example of a script
//pricing.html
$(".link-pricing").click(function (e) {
e.preventDefault();
$("#togglenav").collapse("hide");
$("#main").load("../../damonmedek/home/pricing.html #main-pricing");
$(document).ajaxComplete(function (event, xhr, settings) {
if (settings.url === "../../damonmedek/home/pricing.html") {
//Add CSS
if (!$("link[href='../assets/css/home%20css/pricing%20css/particles-js.css']").length)
$('<link href="../assets/css/home%20css/pricing%20css/particles-js.css" rel="stylesheet">').appendTo("head");
//Remove CSS
$('link[rel=stylesheet][href*="../assets/css/home%20css/best-carousel-slide.css"]').remove();
//Add JS
$.getScript("../assets/js/home/pricing%20js/modal%20popup.js", function () {});
**$.getScript("../assets/js/home/pricing%20js/particles.js", function () {});**
$.getScript("../assets/js/home/pricing%20js/pricing-animated%20heading.js", function () {});
$.getScript("../assets/js/members%20js/ajax%20members-only.js", function () {});
$.getScript("../assets/js/home/pricing%20js/app.js", function () {});
$.getScript("../assets/js/members%20js/ajax%20members-only.js", function () {});
}
});
});
How can I rebind page to js file, or stop getScript, or some smarter way to fix this problem?
Its not just cpu problems, duplicate getScripts can cause problems like posting twice on submit and weird stuff like that.

So this answer isn't as simple as I thought. Its involves event propagation which I encourage you too look up.
In order to grab the script just once its can't be through jquery but something like this.
function loadJSFile() {
if ($('script[src="' + jsFile + '"]').length > 0) {
//script exists
} else {
function loadScript(url, callback) {
// adding the script tag to the head as suggested before
var body = document.getElementsByTagName("body")[0];
var script = document.createElement("script");
script.classList.add("example");
script.type = "text/javascript";
script.src = url;
// then bind the event to the callback function
// there are several events for cross browser compatibility
script.onreadystatechange = callback;
script.onload = callback;
// fire the loading
body.appendChild(script);
}
var myPrettyCode = function () {
// here, do what ever you want
};
loadScript(jsFile, myPrettyCode);
}}```
Then you need to use a bubbling method to click on things. like a div that is flown in and out and flown in and out. the js file is only loaded once but you are clicking through the main div that is loaded on first page load. And into the div you flying in, that contains the ids and classes you have inside that div. kinda confusing I know.
```$("#home-div").on('click', '#ajaxedInDiv', function (e) {
$("#ajaxedInDiv").attr("something");
}

How to merge two JavaScripts as one

I have these two JavaScripts. One is for the preloader and the other ones are for mail chimp subscribe form.
In my MailChimp account, I've set the form to appear after 20seconds but my problem is, it loads faster than my webpage and sometimes it would appear before my preloader is gone. It's really not what I want.
Please is it possible to have the mailchimp show only when the entire page is done loading?
I'm still new to JavaScript and jquery and I have no idea on how to do this. Please help. Below are the scripts. Thanks for helping.
<script type="text/javascript">
var clPreloader = function() {
$("html").addClass('cl-preload');
$WIN.on('load', function() {
//force page scroll position to top at page refresh
// $('html, body').animate({ scrollTop: 0 }, 'normal');
// will first fade out the loading animation
$("#loader").fadeOut("slow", function() {
// will fade out the whole DIV that covers the website.
$("#preloader").delay(300).fadeOut("slow");
});
// for hero content animations
$("html").removeClass('cl-preload');
$("html").addClass('cl-loaded');
});
};
</script>
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us19.list-manage.com","uuid":"a16126f77b33bc58d8eef3c50","lid":"a69743e135","uniqueMethods":true}) })</script>

I think this webpage will help you with your problem
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
The onload function in javascript allows you to execute code when the page has been loaded.
Otherwise you could add a function call to the next script you want to execute, after the first one has finished executing.

try somthing like this after animation end
var linkafterpreload = "link 1";
window.addEventListener("load", _ => {
var newscript = document.createElement("script");
newscript.src = linkafterpreload ;
document.body.appendChild("newscript")
})

JavaScript. jQuery import

Help me please! Why this code not work? It does not show alert.
var jqueryScript = document.createElement('script');
jqueryScript.src =
'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
jqueryScript.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(jqueryScript);
$(function() {
$("#main").click(function() {
alert("asdasd");
});
});
Thank you in advance!

Probably because jQuery lib is not loaded as it loads asynchronously made that way, and no one can guarantee you when it will load on time, which is not that way if you load it by <script> tag, so $(function() { ... }); won't work as $ which represents $.jQuery( is not initialized yet. If you execute the script second time without reloading the page, it will work, as jQuery will be loaded from the first execution, even its made in wrong time.

Load javascript source not working

Hello i need to use JavaScript to load a script tag in the head of my document. The problem is i create the script element fine, but this source is not loaded once the rest of the javascript executes. Is there a better way to load the script before the rest of the JS executes?
<script>
var jQ = document.createElement('script');
jQ.src = '../EmergencyBroadcastScripts/source/jquery-1.10.1.min.js';
jQ.type = 'text/javascript';
document.head.appendChild(jQ);
$.noConflict();
jQuery(document).ready(function () {
jQuery('.fancybox').fancybox();
});
</script>
This code will produce the error "$.noConflict is not a function" because its not loading the JQ script source before it executes my code. This is my problem. Any ideas??

Try:
jQ.onload = function () {
$.noConflict();
jQuery(document).ready(function () {
jQuery('.fancybox').fancybox();
});
}
I don't know if it will work in this scenario but it works with images on a canvas.

addScript function does not work when I load website the first time

I use jquery.flexslider plugin, which works fine.
But for screens < 600px I do not want to load the plugin. I tried several scripts and ended with the following, which I thought works best.
I inserted it after the CSS and the JS tags in the header, but unfortunately it works only on second load, not on the first neither with F5 (tested in IE 11 and in Chrome 45.0.2454.101).
function addScript (src) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'www.mywebadre.ss/js/jquery.flexslider-min.js';
document.head.appendChild(script);
}
if (screen.width > 600) {
addScript("www.mywebadre.ss/js/jquery.flexslider-min.js");
}
See http://tinyurl.com/qjkeesg

Because of cross-browser differences, you cannot always rely upon document.head already being there. Use document.getElementsById instead to get a reference to the element.
function addScript(src) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
document.getElementsByTagName("head")[0].appendChild(script);
}
if (screen.width > 600) {
addScript('http://www.mywebadre.ss/js/jquery.flexslider-min.js');
}
Also, I noticed that you were not using http or https on the front of the URL.
After testing this out, it does work in IE and in Chrome so long as I use a valid URL. As a last step, make sure that your URL is valid by pasting it into a browser.

thanks for your help, finally I found a solution by myself:
there is no seperate script needed for adding external script in Connection with Screen.width
simply open the jquery.flexslider-min.js and add to the beginningof the originally script as follow :
var mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) { here is the original code, just let it how it is }
Don't Forget the } at the end of original script to close again. hope Ican help others with this simple trick mona