180

I have some code specific to sorting tables. Since the code is common in most pages I want to make a JS file which will have the code and all the pages using it can reference it from there.

Problem is: How do I add jQuery, and table sorter plugin into that .js file?

I tried something like this:

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></script>');
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></script>');

but this seems to not work.

What is the best way to do this?

2
  • I'm just going to second what a few others have said in their answers. This is not really a good idea. If you want to control which files are included in one place then use a common file on your server to write the scripts tags (e.g. scripts.php would generate script tags for common js files).
    – Prestaul
    Jul 17, 2009 at 3:04
  • 2
    merge tablesorter and your code. and use server side logic to include when you need it.
    – gblazex
    Jun 30, 2010 at 10:16

21 Answers 21

224
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.3.min.js'; // Check https://jquery.com/ for the current version
document.getElementsByTagName('head')[0].appendChild(script);
4
  • 23
    I would replace http:// with // for a relative protocol. Assuming that works with the src property.
    – azz
    Oct 30, 2012 at 4:20
  • @DerFlatulator: i also need to send a variable to this included script. how to do this? like i need to send a variable itemtype = 11 or itemtype=22 to this included js file and then use it in that file accordingly
    – sqlchild
    Dec 19, 2013 at 8:49
  • Refused to load the script
    – user669677
    Aug 1, 2014 at 18:38
  • This doesn't work I replaced script.scr string with the file I downloaded (same directory so just put name of file) and I also tried the Microsoft jQuery host link but that didn't work either.
    – codehelp4
    Sep 23, 2018 at 1:19
97

If you want to include jQuery code from another JS file, this should do the trick:

I had the following in my HTML file:

<script src="jquery-1.6.1.js"></script>
<script src="my_jquery.js"></script>

I created a separate my_jquery.js file with the following:

$(document).ready(function() {
  $('a').click(function(event) {
    event.preventDefault();
    $(this).hide("slow");
  });
});
6
  • 48
    So what, it's still a good answer, and it might help someone else looking for how to do it. Welcome to stackoverflow, R-The_Master! Jun 29, 2011 at 9:11
  • 11
    @genesis φ This is currently the top Google result for jquery include js and has 13k views lol.
    – Lri
    Sep 24, 2011 at 12:09
  • 2
    Damn straight! certainly helped me out :P. Awesome!
    – zeboidlund
    Nov 23, 2011 at 5:14
  • 9
    Helped me out... 3 years later :)
    – tushar747
    May 20, 2012 at 7:55
  • 9
    I just want to point out: The order that you include your js files is important.
    – KevinO
    Aug 15, 2012 at 19:36
21

You can use the below code to achieve loading jQuery in your JS file. I have also added a jQuery JSFiddle that is working and it's using a self-invoking function.

// Anonymous "self-invoking" function
(function() {
    var startingTime = new Date().getTime();
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName("head")[0].appendChild(script);

    // Poll for jQuery to come into existance
    var checkReady = function(callback) {
        if (window.jQuery) {
            callback(jQuery);
        }
        else {
            window.setTimeout(function() { checkReady(callback); }, 20);
        }
    };

    // Start polling...
    checkReady(function($) {
        $(function() {
            var endingTime = new Date().getTime();
            var tookTime = endingTime - startingTime;
            window.alert("jQuery is loaded, after " + tookTime + " milliseconds!");
        });
    });
})();

Other Option : - You can also try Require.JS which is a JS module loader.

1
  • Thanks @StevenSpyrka for valuable appreciation. Nov 3, 2016 at 10:52
10
/* Adding the script tag to the head as suggested before */

    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "http://code.jquery.com/jquery-2.2.1.min.js";

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = handler;
    script.onload = handler;

    // Fire the loading
    head.appendChild(script);

    function handler(){
       console.log('jquery added :)');
    }
1
  • 1
    Thanks man....That's the answer I needed. Just change the http to https and it works perfectly. Aug 19, 2021 at 16:41
7

In if you want to add reference to any js file, say, from your project, you may also add it directly using reference tag, in Visual Studio IDE this is handled automatically by dragging and dropping the external file from solution explorer to current file (This works for mark up files, .js & .css files too)

/// <reference path="jquery-2.0.3.js" />
6

Here is the solution, that I adopted as a combination of some proposed solutions in some other forums.

This way you can reference both css files and other js files in one js file, thus making change next time only in a single place. Please let me know if you have any concerns on it.

I have done following:

  1. I have created a js with name jQueryIncluder.js
  2. declared and executed following code in this file

    function getVirtualDirectory() {
      var vDir = document.location.pathname.split('/');
      return '/' + vDir[1] + '/';
    }
    
    function include_jQueryFilesToPage() {
      var siteAddress = location.protocol + '//' + document.location.hostname + getVirtualDirectory(); 
      var jqCSSFilePath =  siteAddress + 'includes/jQueryCSS/ehrgreen-theme/jquery-ui-1.8.2.custom.css';
      var jqCoreFilePath = siteAddress + 'includes/jquery-1.4.1.min.js';
      var jqUIFilePath =   siteAddress + 'includes/jquery-ui-1.8.2.custom.min.js';
      var head  = document.getElementsByTagName('head')[0]; 
    
      // jQuery CSS jnclude
      var jqCSS = 'cssIDJQ';  // you could encode the css path itself to generate id.
      if (!document.getElementById(jqCSS)) { 
        var link  = document.createElement('link'); 
        link.id  = jqCSS; 
        link.rel  = 'stylesheet'; 
        link.type = 'text/css'; 
        link.href = jqCSSFilePath; 
        link.media = 'all'; 
        head.appendChild(link); 
      } 
    
      // Core jQuery include
      var jqc = "coreFileRefIDJQ";  
      if (!document.getElementById(jqc)) 
        document.write('<scr' + 'ipt type="text/javascript" id="' + jqc + '" src="' + jqCoreFilePath + '"></scr' + 'ipt>');
    
      // jQueryUI include
      var jqUI = "uiFileRefIDJQ";  
      if (!document.getElementById(jqUI)) 
        document.write('<scr' + 'ipt type="text/javascript" id="' + jqUI + '" src="' + jqUIFilePath + '"></scr' + 'ipt>');
    }
    
    include_jQueryFilesToPage();
    
  3. I referenced the above jQueryIncluder.js file in another js or xsl file of my .Net project as following:

    <script type="text/javascript" src="~/includes/jQueryIncluder.js"></script>
    

I hope my effort is appreciated.

Thanks

6

it is not possible to import js file inside another js file

The way to use jquery inside js is

import the js in the html or whatever view page you are using inside which you are going to include the js file

view.html

 <script src="<%=request.getContextPath()%>/js/jquery-1.11.3.js"></script>
 <script src="<%=request.getContextPath()%>/js/default.js"></script>

default.js

$('document').ready(function() {
    $('li#user').click(function() {
         $(this).addClass('selectedEmp');
    });
});

this will definitely work for you

5

The following answer was posted previously by another user, but provided no explanation so I decided to annotate what is happening.

var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jQueryScript);

Explanation

The problem is solved by creating a script element in JavaScript, and then setting the src attribute to the path of the jQuery file.

var jQueryScript = document.createElement('script');

Above we create the script element.

Next we set the src attribute to the path as explained before. This can be set to

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

or

/your/path/to/jquery/file

In use:

jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');

Last, but not least, appending the new element to the document head:

document.head.appendChild(jQueryScript);

or body:

document.body.appendChild(jQueryScript);

In Use

var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jQueryScript);

setTimeout(function() {
  // Add the rest of your code here, as we have to wait a moment before the document has jQuery as a part of it.
  $("body").html("<h1>It Works!</h1>");
}, 1000);

4

Theres a plugin for jquery where you can just include the files you need into some other js file, here is the link for it http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery-plugin/.

Also this document.write line will write the script tags in the html not in your js file.

So I hope this could help you out, a little with your problem

1
  • 1
    This link is no longer available
    – sebisnow
    Jul 18, 2016 at 8:14
4

The problem is you're using </script> within the script, which is ending the script tag. Try this:

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></sc'+'ript>');
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></sc'+'ript>');
1
  • 2
    this solution does nothing, as the script tag was already being seen as a string, not as markup.
    – RozzA
    Dec 1, 2013 at 21:00
2

I believe what you want to do is still to incude this js file in you html dom, if so then this apporach will work.

  1. Write your jquery code in your javascript file as you would in your html dom
  2. Include jquery framework before closing body tag
  3. Include javascript file after including jqyery file

Example: //js file

     $(document).ready(function(){
     alert("jquery in js file");
     });

//html dom

    <body>
   <!--some divs content--->

   <script src=/path/to/jquery.js ></script>
   <script src=/path/to/js.js ></script>
   </body>
1

If you frequently want to update your jquery file link to a new version file, across your site on many pages, at one go..

Create a javascript file (.js) and put in the below code, and map this javascript file to all the pages (instead of mapping jquery file directly on the page), so when the jquery file link is updated on this javascript file it will reflect across the site.

The below code is tested and it works good!

document.write('<');
document.write('script ');
document.write('src="');
//next line is the path to jquery file
document.write('/javascripts/jquery-1.4.1.js');
document.write('" type="text/javascript"></');
document.write('script');
document.write('>');
1

You can create a master page base without included js and jquery files. Put a content place holder in master page base in head section, then create a nested master page that inherits from this master page base. Now put your includes in a asp:content in nested master page, finally create a content page from this nested master page

Example:

//in master page base    

<%@  master language="C#" autoeventwireup="true" inherits="MasterPage" codebehind="MasterPage.master.cs" %>
<html>
<head id="Head1" runat="server">
    <asp:ContentPlaceHolder runat="server" ID="cphChildHead">
        <!-- Nested Master Page include Codes will sit Here -->
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    <!-- some code here -->
</body>
</html>

//in nested master page :
<%@  master language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true"
    codebehind="MasterPageLib.master.cs" inherits="sampleNameSpace" %>
<asp:Content ID="headcontent" ContentPlaceHolderID="cphChildHead" runat="server">
    <!-- includes will set here a nested master page -->
    <link href="../CSS/pwt-datepicker.css" rel="stylesheet" type="text/css" />

    <script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>

    <!-- other includes ;) -->
</asp:Content>
<asp:Content ID="bodyContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ContentPlaceHolder ID="cphChildBody" runat="server" EnableViewState="true">
        <!-- Content page code will sit Here -->
    </asp:ContentPlaceHolder>
</asp:Content>
1

Dynamic adding jQuery, CSS from js file. When we added onload function to body we can use jQuery to create page from js file.

init();

function init()
{
	addJQuery();
	addBodyAndOnLoadScript();
	addCSS();
}

function addJQuery()
{
	var head = document.getElementsByTagName( 'head' )[0];
	var scriptjQuery = document.createElement( 'script' );
	scriptjQuery.type = 'text/javascript';
	scriptjQuery.id = 'jQuery'
	scriptjQuery.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
	var script = document.getElementsByTagName( 'script' )[0];
	head.insertBefore(scriptjQuery, script);
}

function addBodyAndOnLoadScript()
{
	var body = document.createElement('body')
	body.onload = 
	function()
	{
		onloadFunction();
	};
}

function addCSS()
{
	var head = document.getElementsByTagName( 'head' )[0];
	var linkCss = document.createElement( 'link' );
	linkCss.rel = 'stylesheet';
	linkCss.href = 'E:/Temporary_files/temp_css.css';
	head.appendChild( linkCss );
}

function onloadFunction()
{
	var body = $( 'body' );
	body.append('<strong>Hello world</strong>');
}
html 
{
	background-color: #f5f5dc;
}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Temp Study HTML Page</title>
		<script type="text/javascript" src="E:\Temporary_files\temp_script.js"></script>
	</head>
	<body></body>
</html>

0

If document.write('<\script ...') isn't working, try document.createElement('script')...

Other than that, you should be worried about the type of website you're making - do you really think its a good idea to include .js files from .js files?

0

just copy the code from the two files into your file at the top.

or use something like this http://code.google.com/p/minify/ to combine your files dynamically.

Josh

0

I find that the best way is to use this...

**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>**

This is from the Codecademy 'Make an Interactive Website' project.

0

After lots of research, I solve this issue with hint from ofir_aghai answer about script load event.

Basically we need to use $ for jQuery code, but we can't use it till jQuery is loaded. I used document.createElement() to add a script for jQuery, but the issue is that it takes time to load while the next statement in JavaScript using $ fails. So, I used the below solution.

myscript.js is having code which uses jQuery main.js is used to load both jquery.min.js and myscript.js files making sure that jQuery is loaded.

main.js code

window.load = loadJQueryFile();
var heads = document.getElementsByTagName('head');

function loadJQueryFile(){
    var jqueryScript=document.createElement('script');
    jqueryScript.setAttribute("type","text/javascript");
    jqueryScript.setAttribute("src", "/js/jquery.min.js");

    jqueryScript.onreadystatechange = handler;
    jqueryScript.onload = handler;  
    heads[0].appendChild(jqueryScript);
}

function handler(){
    var myScriptFile=document.createElement('script');
    myScriptFile.setAttribute("type","text/javascript");
    myScriptFile.setAttribute("src", "myscript.js");
    heads[0].appendChild(myScriptFile);
 }

This way it worked. Using loadJQueryFile() from myscript.js didn't work. It immediately goes to the next statement which uses $.

0

The latest answer is outdated, try this:

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.1.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
-1
var jQueryScript = document.createElement('script');  
jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jQueryScript);
1
  • Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. Jul 12, 2020 at 8:46
-3

Why are you using Javascript to write the script tags? Simply add the script tags to your head section. So your document will look something like this:

<html>
  <head>
    <!-- Whatever you want here -->
    <script src="/javascripts/jquery.js" type="text/javascript"></script>
    <script src="/javascripts/jquery.tablesorter.js" type="text/javascript"></script>
  </head>
  <body>
    The contents of the page.
  </body>
</html>
3
  • 2
    I am talking about JS files. how to add jQuery reference to a JS file
    – Josh
    Jul 16, 2009 at 21:34
  • Jash, you can't do it. Script files can't be referenced in other script files.
    – Canavar
    Jul 16, 2009 at 21:39
  • 6
    Yes they can, Canavar. AS far as the browser is concerned, it doesn't matter whether you're adding script tags in the HTML or in a script itself, because it interprets the result the same.
    – Salty
    Jul 16, 2009 at 21:51