jQuery link for bootstrap - javascript

I have noticed that the bootstrap provides a jQuery link that you can use to run the JavaScript files. What I would like to know is if it matters what jQuery link you use.
Currently, the code provided by the bootstrap site is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Would it hurt if I used these links below to replace the above link:
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

It will not create any issue as jQuery library version is same. as per your link both files version is same that means files is same but loads from different server.
Main thing is you need to use jQuery library suggested by bootstrap
jQuery (necessary for Bootstrap's JavaScript plugins) .
you can download that files to your local project folder and use in project it will work fine.
jQuery Migrate Plugin
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
jQuery Migrate Plugin simplify the transition from older versions of
jQuery. The plugin restores deprecated features and behaviors so that
older code will still run properly on jQuery 1.9 and later.

These two file are exactly the same therefore you should not see any difference.

No. It will be not. Because the links which you have mentioned will have the same jquery files and those links are nothing but different CDNs that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.
As per the mentioned link this service is effective in speeding the delivery of content of websites with high traffic and websites that have global reach. The closer the CDN server is to the user geographically, the faster the content will be delivered to the user.

Related

Are there any downsides in using CDN only for Bootstrap JS parts?

I'm theming Bootstrap with custom styles, by using a local copy of the source SASS files as described on the official documentation, and importing them in a custom.scss file.
I'm mainly willing to customize the appearance, non the functionality; so, in example: colors, typography and the so-called "Sass options".
In this kind of scenario, are there any downsides or possible problems in importing the JS part of Bootstrap (I'm referring in particular to bootstrap.bundle.min.js) in my project by using a CDN instead of providing it from local?
EDIT: Please note that I'm not asking how loading a resource from CDN is different from loading it from local, I'm just asking if loading a part of Boostrap from CDN and another from local could lead to problems or unexpected behavior.
This is probably a silly question, I'm reasonably sure that I can do this without incurring in any problem, but I'd like to have some feedback from someone more expert than me.
If you can, you should host the JS yourself.
Since bootstrap uses integrity parameters in their example "how to use" code, you don't really have to be scared about cross site scripting attacks if their CDN is compromised (unless you leave them out in your code). The files will simply not be loaded.
That is still however not something you want: If their CDN is compromised or their servers simply crash, you will not be able to load the JS anymore and parts of your app might become unusable.
You could, however, first attempt to serve from the cdn and if that's not possible give the user a local version. That way you can utilize the cache and be save when bootstrap servers go down. Here's a small excerpt taken from freecodecamp:
<script>
if (! $.fn.modal) {
document.write('<script src="YOUR JS LOCATION"></script>');
}
</script>
You should put this underneath the line where you include the bootstrap CDN.
The code simply checks if a function from bootstrap is available and if not loads it from your local server.

Google Apps Script libraries are not working on a webapp

I'm a newbie in web development in Google Apps Script and I'm having a hard time trying to run a simple webapp which is supposed to set up a menu example by using SlickNav jQuery Plugin. I successfully set it up as a GAS library (you can see the source code here). That plugin requires jQuery 1.7 onwards, so I've also set up jQuery (v2.1.0) as a GAS library (click here to see the code).
After importing both of them as libraries:
in my webapp, it works like a charm in dev. mode:
but in production mode, it throws
"ReferenceError: undefined "jQuery". (line 1, file "slicknav.js", project "slicknav")"
I've spent 3 days trying to make this example running. Am I missing something on this example? What could it be wrong? Can somebody here point me in the right direction?
Thanks in advance.
You cannot use JQuery inside of Apps Script as Apps Script since GAS does not have a DOM to manipulate.
If you wish to use JQuery, or any other JavaScript library inside your web app you need to add it with a <script> tag. Such as adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> inside your <head> or below your <body> tags.
Google even has a set of hosted libraries that you can include in your web app: https://developers.google.com/speed/libraries/
If you don't want to use a CDN service (like the google hosted libraries) you can copy/paste the source into a new GAS html file, and include that in your web app.
Example:
jquery.html
<script>
//Paste jquery.min.js here
</script>
index.html
<html>
<head>
<?!= HtmlService.createHtmlOutputFromFile('jquery').getContent(); ?>
</head>
</html>
After Clarification:
JQuery needs to be loaded before slicknav, since it requires it. It looks like you are, but that's the error it's throwing. I would start by simplifying your process and using script tags with CDN hosted libraries and see if that works. Then try including the files in your current project and see if that works...etc Try and isolate the problem in that manner.
It's also good to note than when deploying, you HAVE to update the version to apply and development changes.

How to get a jQuery Plugin from their Plugin-Repository CDN?

For a website with live "edit-in-place", first I get the jQuery library from the fastest CDN for free ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
... and on top of that I need the Jeditable plugin, listed in the jQuery repository at jQuery on this page!
Is this plugin also hosted on Jquery CDN?
If not, whats the use of jQuery having a plugin in the repository without hosting the script?
In other words whats the use of a plugin repository?
How to load a script directly from jQuery repository?
<script src="................................../jeditable.js"></script>
http://www.appelsiini.net/projects/jeditable
http://www.appelsiini.net/projects/jeditable/default.html
https://github.com/tuupola/jquery_jeditable
I'm mostly using cdnjs for common js things.
A search for jeditable.js gives you the link and the script tag for easy copy-pastin'.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></script>
Plugins are most likely not hosted on jquery CDN, because they are most likely not written by the people behind jquery.
Discoverability? Don't know how their plugin listing works, but may have been from users submitting their plugins for example. Actually hosting the plugins would add another level of unnecessary complexity. Especially if the goal is discoverability, i.e. an easy place for jquery new-comers to see what else might be possible.
I don't know how "cloudflare one day hosts something and otherday it doesnt work without notice". At least not with cdnjs, which has always worked for me. But if you're worried, just download the script and host it yourself instead...

Bootstrap 3.3.7 - Will CDN (maxcdn) Support end for Bootstrap and will I be forced to migrate to bootstrap 4?

I am developing a webpage for work using Bootstrap 3.3.7 supported via CDN (See links below). My knowledge of HTML, JavaScript’s, CSS etc.. is limited and What I have created so far is really good. I am worried that I am basing my page on CND support for bootstrap version 3.3.7 is a bad idea.
Questions;
Will the CDN support ever end?
When a new version of bootstrap is released will I be forced to migrate or can I continue to use 3.3.7 version indefinitely?
If you do not want to be forced to migrate to BS4. Then get the MAXCDN files to your local & call your styles & scripts from there. Steps you should follow:
Note: below steps are demonstrated for CSS only. You need to do that to JS file as well
Open your MAXCDN link in your browser address bar, say for example:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Now copy the entire code that you can see .. Ctrl + A > Ctrl + C
Now create a file on your local project under say css folder & name it whatever you want, say bs3.3.7.min.css(make sure it has .min.css as the extension for CSS).
Now paste the entire code you copied to the CSS file you just created.
Finally you need to just change the <link href="/link/to/bs3.3.7.min.css"> in your HTML.
Answers:
1: It all depends on the provider of CDN
2: No one is going to forced you to use latest version, they might provide updated version a new URL again but it all depends on CDN provider
for safer side you can store those bootstrap files in your server and use it instead of CDN this way you will always have right version of files for your website

jquery plugin hosting as google does with jquery

I'm currently linking to jquery from Google. This way I'm not hosting the file on my server.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
Anyone knows of a similar service that's available for the individual jquery plugins?
There isn't one out there yet (though some sparse plugins have their own CDN, like jQuery Tools).
However, the jQuery team is working on this with Media Temple (which currently hosts jquery.com and other related sites)...I'm not sure how far along it is though.

Categories

Resources