We Keep Coding

How do I link scripts externally and internally?

I have a website that I want to work online and offline. I want to decrease load time, so I minified the slow loading scripts. It didn't work enough. Locally, some of the scripts are taking 4-6 seconds to load.
I know that linking scripts externally speeds it up drastically. I have tried it and it works. But some of the users will not have internet access. Is there a way to link a group of scripts to an external site, and locally if they do not have internet access?
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="ui/jquery-ui.min.js" type="text/javascript"></script>

You can do something similar to this answer. Basically, the idea is that you attempt to load the Internet based script for jQuery. Afterward, you do a normal script where you check if jQuery === undefined. If it does, you want to load the local copy.
Basically, an example of what you want to do:
<script src="[jQueryURL]" type="text/javascript"></script>
<script src="[dataTablesURL]" type="text/javascript"></script>
<script src="[jQueryUIURL]" type="text/javascript"></script>
<script type="text/javascript">
if(jQuery === undefined) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "js/jquery-1.9.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
//repeat for other two scripts here
}
</script>
What will happen is that it will attempt to load the scripts in question, and afterward it will check if jQuery is defined. If it's not, that means the scripts didn't load, so you want to load the local versions and append them to your header.

Ensure that the script declares a global variable you can test for. Then generate a local script loading element if the external script fails to load (which you can determine by testing for that variable).
<script src="http://example.com/example.js"></script>
<script>
if !(window.Example) {
document.write('<script src="../scripts/example.js"><\/script>');
}
</script>

<script type="text/javascript">
if(navigator.onLine)
{
alert("Connected");
}
else
{
alert("Not Connected");
}
</script>
First Check if internet connection exist then load external file other wise load internal file

Can not resolve Uncaught ReferenceError: jQuery is not defined

Hi I have a problem I just can not resolve. I have a mobile menu which works fine in the browser but only works on smartphone after refreshing the page
I get
Uncaught ReferenceError: jQuery is not defined
Here is the code, and below that is the order in which the scripts load
(function($) {
$.fn.collapsable = function(options) {
return this.each(function() {
var obj = $(this);
var tree = obj.next('.main-menu ul');
obj.click(function() {
if (obj.is(':visible')) {
tree.toggle();
}
});
$(window).resize(function() {
if ($(window).width() <= 800) {
tree.attr('style', '');
};
});
});
};
})(jQuery);
$(document).ready(function() {
$('.slide-trigger').collapsable();
});
(analytics code loads first top of the page www.google-analytics.com/analytics.js)
rest of the script loads from the footer all inside the body the mobile-menu.js relates to the code above.
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script async src="js/mobile-menu.js" type="text/javascript"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script async>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script async>(adsbygoogle = window.adsbygoogle || []).push({});</script>
I have searched so many links on stackoverflow and other websites for an answer. I have tried no conflict i have swapped the order in which the other scripts load but nothing.
Please. Many thanks for looking.

Remove async from the first two script tags like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="js/mobile-menu.js" type="text/javascript"></script>
jQuery completed downloading and was run after your own script file when your error occurred. When you add async to script tags they get run whenever they complete downloading.
So make the scripts load and run synchronized and it will work just fine.

Preload Webpage with jQuery

I found the below script here but wanted to know if it is posible to preload multiple pages with the same script. The reason is I want to preload some forms that will be hold in fancybox and it takes too long to load. Using this script help load the form much faster (it works) but I don't know how to make it work for multiple pages.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
$.get('index2.html', function(data) {
jQuery("#index2content").html(data);
});
});
</script>
<div id="index2content"></div>

This script loads the page "index2.html" and puts its content into the div#index2content when the DOM is ready.
So, if you want to load multiple pages, you can do the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
$.get('index2.html', function(data) {
jQuery("#index2content").html(data);
});
$.get('index3.html', function(data) {
jQuery("#index3content").html(data);
});
$.get('index4.html', function(data) {
jQuery("#index4content").html(data);
});
});
</script>
<div id="index2content"></div>
<div id="index3content"></div>
<div id="index4content"></div>

Three options:
a) Setup an API that would serve the whole html, then just get the data using $.AJAX, witch would be a bad practice because of overload
b)
<script>
var html = '<?php echo $html_file;?>';
jQuery("#index2content").html(html);
</script>
c)
<iframe id="data" style="display:none" src="your document">
</iframe>
<script>
$("#data").load(function(){
$("#index2content").html($("#data").contents().find("body").html());
$("#data").remove();/detach the iframe
});
</script>

How to load more jquery script to DOM by jquery ajax

I am creating an application that may become very large over time. So in order to keep things simple, we have decided to keep Javascript (mostly jQuery code), CSS and html for one particular feature in one file. for example, if upload is a function, then we have all the jQuery validation and css, html for upload in one file (without head and html tags).
We have a home dashboard in which a click handler will load all the links by ajax and append to the designated DIV of class indicated by additional attribute in links called "whereTOadd". so if a link has its "WhereTOadd" attribute set to ".here" and href set to upload.php then the contents of upload.php will be added to a div of class 'here' in the same page. it is done using script given below.
But the problem i am facing is that I need to include jQuery file again in every file to get the codes working, which is a terrible thing. What can be done to avoid this?
This is html of my dashboard:
<html>
<head>
..
<script src="Path-to-jquery-min-file.php" ></script>
<script>
$( document ).ready(function(){
$(document).on("click","a",function(e){
if( $(this).attr('href'))var ajaxurl = $(this).attr('href').valueOf();
if( $(this).attr('whereTOadd'))
var target = $(this).attr('whereToadd').valueOf();
/*for ajax request */
var options= {
type: 'GET',
url: ajaxurl,
dataType: 'html',
success: function (html, textStatus){
$(target).empty().append(html);
},
error: function(xhr, textStatus){
alert('error');
}
}
$.ajax(options);
return false;
});
});
</script>
</head>
<body>
<a href="upload.php" >Upload data</a>
<div class=".here" ></div>
</body>
upload.php contains:
<script type="javascript" >
$('body').append('load successful!');
</script>
This setup will not work until I make change in upload.php as:
<script src="Path-to-jquery-min-file.php" ></script>
<script type="javascript" >
$('body').append('load successful!');
</script>
Please help in solving this because loading jQuery again and again in the same page may cause errors and conflicts. Please suggest me a better approach to what I am doing.
Thanks

Why will an object literal load when in declared in external source file but not when called in a file including an external javascript file file

The code in the external file is
var testing = {
bugtest: function() {
alert('No Bugs Here');
}
}
In the php file I am using
<script type="text/javascript" src="externalScript.js">
testing.bugtest();
</script>
But this will not work why?
if I call the function in the external fil it works
var testing = {
bugtest: function() {
alert('No Bugs Here');
}
}
testing.bugtest()
this will work but this not what I want it to do I want to be able to call the function in the main file? What would the cause of this problem be?

You can not use src attribute and the text node with script elements.
They must be exclusive, e.g. an element each.
So your HTML would look something like...
<script type="text/javascript" src="externalScript.js"></script>
<script type="text/javascript">
testing.bugtest();
</script>

This
<script type="text/javascript" src="externalScript.js">
testing.bugtest();
</script>
is wrong. You can either specify a src, or run inline code.