1

On my local and internal (accessible within the company network) server, the jquery-ui slider displays on all pages, however, on our external server (outside the company for external clients), the slider doesn't display on any pages.

Initially, I had all the jquery files pointing to the googelapis.com CDN. I thought this could be the problem, so I copied all the files into my local directory and pointed to those files on the pages. The slider is still not working.

I'm wondering now if there is a specific order the files need to be in order to see them. I've learned that the javascript files should go at the bottom of the page (unless they are needed otherwise for DOM layout), and the .css files always go in the head. However, I saw a thread on SO Script order for jquery with bootstrap where jquery.js, jquery-ui.js and bootstrap.js are in the <head> tag along with a custom .js file and the .css files. Since the OP checked this answer as the solution, I'll try reordering my files to see if that bullet-proofs my issue.

Question: When should I place js files in the <head>, especially jquery and bootstrap JS files? If I need to do this, I will only use this reorder on the page where I'm using the sliders, because I'm not sure how this reordering will effect the rest of the site.

Also, I'm wondering why our external server doesn't display the sliders, but my local (xampp) as well as our internal server does display the sliders -- without my having to reorder them at all. Has anyone had this particular issue?

Screenshots:

local/internal server view

local/internal

external server view

external

This is the current order of my files:

<head>
  <link rel="stylesheet" href="css/jquery-ui-1-11-4.min.css">
  <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.structure.css">
  <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.theme.min.css">

  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-custom.css">

  <link rel="stylesheet" href="css/styles.css">
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link rel="stylesheet" href="css/ie10-surface-vp.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <!-- Custom styles for this template -->
  <link rel="stylesheet" href="css/navbar-fixed-top.css">

</head>


<!-- body content here -->



<!-- before end body -->
<script src="js/jquery-1-11-3.min.js"></script>
<script src="js/jquery-ui-1-11-4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-toggle-2-2-2.min.js"></script>
Community
  • 1
  • 1
Chris22
  • 1,973
  • 8
  • 37
  • 55
  • Are you using the same browser when comparing your internal/external? I recommend using Chrome Incognito when testing. IE will ruin your life because of caching. – FirebladeDan Jun 30 '16 at 19:10
  • Thanks for your suggestion, FirebladeDan. Yes, I'm using Chrome for both internal and external. The sliders aren't showing for external. Just tried it on my phone. I will try incognito mode on the external, but the sliders need to display in any chrome mode for our external clients to view it. – Chris22 Jun 30 '16 at 19:24
  • 1
    My guess is that the css files are likely conflicting. Your js placement looks fine to me. – Radmation Jun 30 '16 at 19:24
  • @Radmation I'll check that. Just crazy that the order works well on the other servers and not our external one. I'm not getting any answer from our SA either :( – Chris22 Jun 30 '16 at 19:27
  • @Radmation +1 for suggesting the css conflict. – Chris22 Jun 30 '16 at 20:18

2 Answers2

0

The bootstrap documentation for this recommends putting the JS at the end of the HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
FelisPhasma
  • 332
  • 5
  • 13
  • I'll checkout the docs as well. Placing .js files at the bottom is my usual practice, but was wondering what edge case placing them in the `` applies to... – Chris22 Jun 30 '16 at 19:29
0

Fixed. I reordered the css files to:

<link rel="stylesheet" href="css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/bootstrap-custom.css" >
    <link rel="stylesheet" href="css/jquery-ui-1-11-4.min.css">
    <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.structure.css" >
    <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.theme.min.css">

The slider shows up now on internal, local and external pages. I'm not sure why since initially I had jquery-ui under the bootstrap files.

Also, on another page, I was getting this error in the console: 

 **Mixed Content**: The page at 'https://qa1.xxx.com/siteorg/addpayment' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'. This request has been blocked; the content must be served over HTTPS.

So I replaced this link with the locally saved files to avoid the protocol conflict.

I didn't change the order of JS files (placing them in head) even though that seemed to work for the other SO post listed in my question.

Chris22
  • 1,973
  • 8
  • 37
  • 55