multiple jquery files on a single page

Question

I might be asking a real dumb question here but cant find any good reading material to put my mind at ease.

I have taken over a project that uses several different jquery files. currently he header looks like:

<head>
  <title>
     Capture New Order
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/application/assets/CSS_JS/jquery.mobile-1.1.1.min.css" />
  <link rel="stylesheet" href="/application/assets/CSS_JS/green.min.css" />
  <script src="/application/assets/CSS_JS/jquery-1.7.2.min.js"></script>
  <script src="/application/assets/CSS_JS/jquery.mobile-1.1.1.min.js"></script>
  <link rel="stylesheet" href="/application/assets/CSS_JS/elf.css" media="screen">

  <link href="<?php echo base_url() ?>application/css/ui-lightness/jquery-ui-1.8.custom.css" media="screen" type="text/stylesheet" rel="stylesheet">
  <script src="<?php echo base_url() ?>application/scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
  <script src="<?php echo base_url() ?>application/scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>

  <link rel="stylesheet" href="<?php echo base_url() ?>application/css/sales.css" />

  <script type="text/javascript">
        $(function(){
          $("#customer").autocomplete({
            source: "get_customers"
          });
        });
  </script>
</head>

In this example I am calling various jquery files 4 times. However if I delete any one of these jquery files it breaks the functionality of the site.

Is there no single 'master' jquery file that has all available features?

Surely that will make more sense than having several different jquery files?

Apologies if this is a 'simple' question but just want some clarity.

Thanks, Ryan

What's the concern here? Hard to update the files? Trying to reduce the number of http requests? Or? — kyooriouskoala
– kyooriouskoala, Commented Mar 14, 2013 at 8:22
Thanks for your time, no real concern, just seems wasteful to upload several different files when one would do? Also, if you change the order of the files, they overwrite each other so it takes some fiddling to get features to work when you need a new version of Jquery. — JustStarting
– JustStarting, Commented Mar 14, 2013 at 8:27

marc_s · Accepted Answer · 2018-08-13 20:47:49Z

1

First of all you load the main jQuery file twice: jquery-1.7.2.min.js and jquery-1.9.1.min.js you just need one of them. This file is responsible for the main functions. The file jquery-ui is for UI-Elements. And jquery-mobile is for the mobile functionality and UI. Therefore if you delete one of these files the functionality of this file is gone. But everything relays on the jquery main file.

The order in which you load the files is not important, just load the jquery.min.js first.

I hope that helps.

edited Aug 13, 2018 at 20:47

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 14, 2013 at 8:30

Daniel Kurz

8167 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kyooriouskoala Over a year ago

Just adding on to Daniel's answer, normally we would say it's wasteful when you're loading a script on pages that make no use of them. If all the pages require all these files to be loaded then it's not a waste at all.

VeXii · Accepted Answer · 2013-03-14 08:36:16Z

you need to reorder the order of the tags and maybe even remove the older versions of jquery and ui

/* collect and keeping css links first*/
<link rel="stylesheet" href="/application/assets/CSS_JS/jquery.mobile-1.1.1.min.css" />
<link href="<?php echo base_url() ?>application/css/ui-lightness/jquery-ui-1.8.custom.css" media="screen" type="text/stylesheet" rel="stylesheet">
<link rel="stylesheet" href="/application/assets/CSS_JS/green.min.css" />
<link rel="stylesheet" href="/application/assets/CSS_JS/elf.css" media="screen">
<link rel="stylesheet" href="<?php echo base_url() ?>application/css/sales.css" />
/* Moving the jQuery Mobile down below the jQuery core link
   and only load jQuery core + jQuery UI once
*/
<script src="<?php echo base_url() ?>application/scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="<?php echo base_url() ?>application/scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="/application/assets/CSS_JS/jquery.mobile-1.1.1.min.js"></script>

Eich · Accepted Answer · 2013-03-14 08:47:15Z

You can't put all of the files together, because on update of any library it's better to replace one single file instead of searching the code to replace in one single combined file :) .

But your approach is good, because you can speed up your application when you decrease the amount of HTTP-Requests because every single file (JavaScript, CSS, ...) needs a HTTP-Request. You can read about this in the Rules of High Performance Web Sites of Yahoo!. There are many minify- & combine-libraries for php out there. You can use CSS-JS-Booster for example, which reduces the amount of HTTP-Requests for JavaScript and CSS. But if you google you can find much more of such libraries which may better fit your needs.

It is also recommended to put the JavaScript at the bottom of your HTML file (and CSS at the top). If you read the rules above you'll find more of such website "boosters".

Collectives™ on Stack Overflow

multiple jquery files on a single page

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related