We Keep Coding

How to create an external list of javascript files

At the bottom of several of my website, I have a list of javascript/css reference files, such as
<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<script src="http://domain.co.uk/jquery-3.2.1.min.js"></script>
<script src="http://domain.co.uk/jquery-ui.min.js"></script>
<script src="http://domain.co.uk/helpers.js"></script>
They all point to another website I have. This works as I only need to update the content of the files and since they all point to the same file location updates are easy.
The problem I have is, if I want to add a new file (javascript or css) then I have to add a new <script... or <link... to every website which has this list.
What I'd love to do is move that list into an external file, and reference it there.
EG
Website1
<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>
Website2
<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>
And as such, the content of myCssFiles.cs could be
<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<link rel="stylesheet" href="http://domain.co.uk/general2.css" />
<link rel="stylesheet" href="http://domain.co.uk/general3.css" />
and likewise for the javascript.
How can I achieve this?
Please note, I control these websites and CORS isn't an issue.

Hope this helps,
You can have common.js to include all your js file
common.js
var scripts = {
"http://domain.co.uk/jquery-3.2.1.min.js",
"http://domain.co.uk/jquery-ui.min.js"
}
scripts.forEach(function(data) {
var x = document.createElement('script');
x.src = data;
document.getElementsByTagName("body")[0].appendChild(x);
});
You can have a single common.js file and add links as u needed to the scripts array. You just have to include the common.js in your websites.

jquery effect() function not recognized

I have a problem creating a bounce effect on an image with jQuery effect() function.
Actually is use this code (code after calling the jQuery library):
$(document).ready(function() {
$('#arrow-disclaimer').bind('mouseenter', function(){
$(this).effect('bounce',500);
});
});
//Here there isn't the jQuery library, but in the page is included before jqueryUI
<link rel="stylesheet" type="text/css" href="css/style-disclaimer.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.js"></script>
<a href="#disclaimer-p">
<img src="images/arrow483.png" id="arrow-disclaimer" />
</a>
Could someone tell me why i get this error?
Uncaught TypeError: $(...).effect is not a function

You need to load jQuery to use jQuery-ui or any other dependant plugin
You're using jquery-ui-i18n which is used for internationalization only. You need to include jquery-ui main library and if you want to use i18n, include it after jquery-ui.
bind is deprecated in jQuery version 1.7, use on.
$(document).ready(function() {
$('#arrow-disclaimer').on('mouseenter', function() {
$(this).effect('bounce', 500);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<a href="#disclaimer-p">
<img src="images/arrow483.png" id="arrow-disclaimer" />
</a>

How can I get these two jQuery scripts to work together? [duplicate]

This question already has answers here:
JQuery Slideshow and MooTools Conflict
(2 answers)
Closed 9 years ago.
One is an audio player for Mp3s, and the other is a Lightbox I'm trying to display YouTube videos in.
Here's the head:
<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="libs/css/styles.css" />
<script src="libs/jquery/jquery.js"></script>
<script src="src/jquery.ubaplayer.js"></script>
<script>
$(function(){
$("#ubaPlayer").ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}]
});
});
</script>
I've noticed that the lightbox works when I remove "libs/jquery/jquery.js" but then my audio player stops working.
I'm not very skilled when it comes to Javascript/JQuery, so the answer might be obvious.
UPDATE:
This fixed the problem!
<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="libs/css/styles.css" />
<script src="libs/jquery/jquery.js"></script>
<script src="src/jquery.ubaplayer.js"></script>
<script>
jQuery.noConflict();
jQuery(function(){
jQuery("#ubaPlayer").ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}]
});
});
</script>

Both MooTools and jQuery uses the $ variable, that means you can't use them both. 2 solutions:
Search for jQuery/MooTools implementations of both features, I'm sure you will find those.
Use jQuery.noConflict to let MooTools use the $ variable.
Use the jQuery variable instead of $ and include MooTools after jQuery. If you want to use the $ shortcut for jQuery, wrap your jQuery code in a domready event with the $ as parameter of the callback:
jQuery(function($) {
// ... jQuery code ($ has a copy of `jQuery` now)
});
// ... MooTools code ($ has a reference to the `MooTools.id` method now)

You can isolate your jQuery code inside of an autoexecuting function passing the jQuery object as argument. So that $ means inside of the scope jQuery but outside it can be something else.
(function ($) {
// your jQuery code here
}(jQuery));
It is very common to pass also the object window to avoid resolving the global scope, and receive window and undefined. Since you only pass 2 arguments, the 3rd must be undefined, which improves compressibility of the code and makes more stable (undefined can be unfortunately redefined)
(function ($, window, undefined) {
// your jQuery code here
}(jQuery, window));

adding css file with jquery

I am creating a popupwindow and I want to add a css file to that popupwindow. Below is the code for popupwindow. I have a JavaScript which creates a popupwindow.
Print1
Now I want to add a css file to this popupwindow. I tried something like
$('.popupwindow').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');
but it doesn't work.

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
This should work.

This is how I add css using jQuery ajax. Hope it helps someone..
$.ajax({
url:"site/test/style.css",
success:function(data){
$("<style></style>").appendTo("head").html(data);
}
})

var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "yourcustomaddress/bundles/andreistatistics/css/like.css"
});
css_link.appendTo('head');

Just my couple cents... sometimes it's good to be sure there are no any duplicates... so we have the next function in the utils library:
jQuery.loadCSS = function(url) {
if (!$('link[href="' + url + '"]').length)
$('head').append('<link rel="stylesheet" type="text/css" href="' + url + '">');
}
How to use:
$.loadCSS('css/style2.css');

Try doing it the other way around.
$('<link rel="stylesheet" href="css/style2.css" type="text/css" />').appendTo('head');

Your issue is that your selector is for an anchor element <a>. You are treating the <a> tag as if it represents the page which is not the case.
$('head') will work as long as this selector is being executed by the page that needs the css.
Why not simply add the css file to the page in question. Any particular reason to attempt this dynamically from another page? I am not even familiar with a way to inject css to remote pages like this ... seems like it would be a major security hole.
ADDENDUM to your reasoning:
Then you should simply pass a parameter to the page, read it using javascript, and then do whatever is needed based on the parameter.

I don't think you can attach down into a window that you are instancing... I KNOW you can't do it if the url's are on different domains (XSS and all that jazz), but you can talk UP from that window and access elements of the parent window assuming they are on the same domain. your best bet is to attach the stylesheet at the page you are loading, and if that page isn't on the same domain, (e.g. trying to restyle some one else's page,) you won't be able to.

Have you tried simply using the media attribute for you css reference?
<link rel="stylesheet" href="css/style2.css" media="print" type="text/css" />
Or set it to screen if you don't want the printed version to use the style:
<link rel="stylesheet" href="css/style2.css" media="screen" type="text/css" />
This way you don't need to add it dynamically.

ASP.NET MVC 3 How to inject Javascript into the master layout

I am trying out the new razor view engine from MVC 3. The issue that I am having is that I have Javascript that is page specific. I normally have all my Javascript code before the tag closes. I was thinking of putting a section just before I close the body tag on my master layout. Some thing to the effect of:
<script type="text/javascript">
#RenderSection("JavaScript")
</script>
But VS2010 underlines it in green. So which ever pages uses this master layout can have it's Javascript injected Here. How would you guys do it? The reason why I want to do it like this is because then I can add JavaScript from the master layout also in here, other I will have to define a separate script tag just below the #RenderSection.
When I do the following then VS gives me a warning (I don't like warnings):
Validation (HTML 4.01): Element 'link' cannot be nested within element 'link'.
Here is my code for the above warning:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css">
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css">
}
How can I get these warnings away?

Here's what I'd do, according to the best practices you should place your scripts at the bottom of the page.
_Layout.cshtml
<html>
<head>
#* ... *#
</head>
<body>
#* ... *#
#RenderSection("Scripts", false)
</body>
</html>
MyView.cshtml
#section Scripts
{
<script src="#Url.Content("~/Scripts/myScript.js")"
type="text/javascript"></script>
}

I would use #RenderSection("head", false) in my _layout page. Then you can inject whatever you want in the head of the page (including script)...and by using false you make it optional on all of your view pages.

You can turn off or modify VS's XHTML validation checking:
http://weblogs.asp.net/scottgu/archive/2005/11/23/431350.aspx

You need to close the link tags.
Like this:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css" />
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css" />
}
And then follow Ryan's answer.