CODEWITHSUNDEEP
jquery
JustStarting
JustStarting

Reputation: 287

multiple jquery files on a single page

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

Upvotes: 0

Views: 174

Answers (3)

Daniel Kurz
Daniel Kurz

Reputation: 816

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.

Upvotes: 1

Eich
Eich

Reputation: 3788

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".

Upvotes: 0

VeXii
VeXii

Reputation: 3109

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>

Upvotes: 0

Related Questions