How to add jQuery in JS file

Question

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   lt script src   javascripts jquery js  type  text javascript  gt  lt  script gt     document writeln   lt script type  text javascript  src   javascripts jquery tablesorter js  gt  lt  script gt       but this seems to not work    What is the best way to do this

User · Answer

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    lt html gt     lt head gt       lt  -- Whatever you want here -- gt       lt script src   javascripts jquery js  type  text javascript  gt  lt  script gt       lt script src   javascripts jquery tablesorter js  type  text javascript  gt  lt  script gt     lt  head gt     lt body gt      The contents of the page     lt  body gt   lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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       lt     master language  C   autoeventwireup  true  inherits  MasterPage  codebehind  MasterPage master cs    gt   lt html gt   lt head id  Head1  runat  server  gt       lt asp ContentPlaceHolder runat  server  ID  cphChildHead  gt           lt  -- Nested Master Page include Codes will sit Here -- gt       lt  asp ContentPlaceHolder gt   lt  head gt   lt body gt       lt asp ContentPlaceHolder ID  ContentPlaceHolder1  runat  server  gt       lt  asp ContentPlaceHolder gt       lt  -- some code here -- gt   lt  body gt   lt  html gt     in nested master page    lt     master language  C   masterpagefile    MasterPage master  autoeventwireup  true      codebehind  MasterPageLib master cs  inherits  sampleNameSpace    gt   lt asp Content ID  headcontent  ContentPlaceHolderID  cphChildHead  runat  server  gt       lt  -- includes will set here a nested master page -- gt       lt link href     CSS pwt-datepicker css  rel  stylesheet  type  text css    gt        lt script src     js jquery-1 9 0 min js  type  text javascript  gt  lt  script gt        lt  -- other includes    -- gt   lt  asp Content gt   lt asp Content ID  bodyContent  ContentPlaceHolderID  ContentPlaceHolder1  runat  server  gt       lt asp ContentPlaceHolder ID  cphChildBody  runat  server  EnableViewState  true  gt           lt  -- Content page code will sit Here -- gt       lt  asp ContentPlaceHolder gt   lt  asp Content gt

User · Answer

Dynamic adding jQuery  CSS from js file  When we added onload function to body we can use jQuery to create page from js file    x000D   x000D  init    x000D   x000D  function init   x000D    x000D   addJQuery    x000D   addBodyAndOnLoadScript    x000D   addCSS    x000D    x000D   x000D  function addJQuery   x000D    x000D   var head   document getElementsByTagName   head    0   x000D   var scriptjQuery   document createElement   script     x000D   scriptjQuery type    text javascript   x000D   scriptjQuery id    jQuery  x000D   scriptjQuery src    https   code jquery com jquery-3 4 1 min js   x000D   var script   document getElementsByTagName   script    0   x000D   head insertBefore scriptjQuery  script   x000D    x000D   x000D  function addBodyAndOnLoadScript   x000D    x000D   var body   document createElement  body   x000D   body onload    x000D   function   x000D     x000D    onloadFunction    x000D      x000D    x000D   x000D  function addCSS   x000D    x000D   var head   document getElementsByTagName   head    0   x000D   var linkCss   document createElement   link     x000D   linkCss rel    stylesheet   x000D   linkCss href    E  Temporary files temp css css   x000D   head appendChild  linkCss    x000D    x000D   x000D  function onloadFunction   x000D    x000D   var body       body     x000D   body append   lt strong gt Hello world lt  strong gt     x000D    x000D  html  x000D    x000D   background-color   f5f5dc  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D    lt head gt  x000D     lt meta charset  UTF-8  gt  x000D     lt title gt Temp Study HTML Page lt  title gt  x000D     lt script type  text javascript  src  E  Temporary files temp script js  gt  lt  script gt  x000D    lt  head gt  x000D    lt body gt  lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

If document write   lt  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

User · Answer

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   lt     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  gt  lt      document write  script    document write   gt

User · Answer

The problem is you re using  lt  script gt  within the script  which is ending the script tag  Try this   document writeln   lt script src   javascripts jquery js  type  text javascript  gt  lt  sc   ript gt     document writeln   lt script type  text javascript  src   javascripts jquery tablesorter js  gt  lt  sc   ript gt

User · Answer

I find that the best way is to use this        lt script src    ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt      This is from the Codecademy  Make an Interactive Website  project

User · Answer

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

User · Answer

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

User · Answer

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    I have created a js with name   jQueryIncluder js 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   lt scr     ipt type  text javascript  id      jqc      src      jqCoreFilePath      gt  lt  scr     ipt gt           jQueryUI include   var jqUI    uiFileRefIDJQ       if   document getElementById jqUI        document write   lt scr     ipt type  text javascript  id      jqUI      src      jqUIFilePath      gt  lt  scr     ipt gt        include jQueryFilesToPage     I referenced the above jQueryIncluder js file in another js or xsl file of my  Net project as following    lt script type  text javascript  src    includes jQueryIncluder js  gt  lt  script gt     I hope my effort is appreciated   Thanks

User · Answer

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    lt script src   lt   request getContextPath    gt  js jquery-1 11 3 js  gt  lt  script gt    lt script src   lt   request getContextPath    gt  js default js  gt  lt  script gt    default js     document   ready function            li user   click function                this  addClass  selectedEmp                  this will definitely work for you

User · Answer

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    x000D   x000D     Anonymous  self-invoking  function x000D   function     x000D      var startingTime   new Date   getTime    x000D         Load the script x000D      var script   document createElement  SCRIPT    x000D      script src    https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js   x000D      script type    text javascript   x000D      document getElementsByTagName  head   0  appendChild script   x000D   x000D         Poll for jQuery to come into existance x000D      var checkReady   function callback    x000D          if  window jQuery    x000D              callback jQuery   x000D            x000D          else   x000D              window setTimeout function     checkReady callback      20   x000D            x000D         x000D   x000D         Start polling    x000D      checkReady function      x000D            function     x000D              var endingTime   new Date   getTime    x000D              var tookTime   endingTime - startingTime  x000D              window alert  jQuery is loaded  after     tookTime     milliseconds     x000D              x000D          x000D        x000D   x000D   x000D    Other Option   - You can also try Require JS which is a JS module loader

User · Answer

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    Write your jquery code in your javascript file as you             would in your html dom Include jquery framework before closing body tag Include javascript file after including jqyery file   Example     js file         document  ready function         alert  jquery in js file                 html dom       lt body gt      lt  --some divs content--- gt       lt script src  path to jquery js  gt  lt  script gt      lt script src  path to js js  gt  lt  script gt      lt  body gt

User · Answer

If you want to include jQuery code from another JS file  this should do the trick   I had the following in my HTML file    lt script src  jquery-1 6 1 js  gt  lt  script gt   lt script src  my jquery js  gt  lt  script gt    I created a separate my jquery js file with the following     document  ready function          a   click function event        event preventDefault          this  hide  slow

User · Answer

var script   document createElement  script    script src    https   code jquery com jquery-3 4 1 min js   script type    text javascript   document getElementsByTagName  head   0  appendChild script

User · Answer

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  amp   css files too        lt reference path  jquery-2 0 3 js    gt

User · Answer

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

[javascript] How to add jQuery in JS file

Examples related to javascript

Examples related to jquery