JSFiddle Script Does Not Work With HTTPS

Question

I have the following JSFiddles script that simply implements the jQuery-UI Datepicker so that a calendar appears in the date input form.

Here is the code

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker functionality</title>
  <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <!-- Javascript -->
  <script>
     $(function() {
        $( "#datepicker" ).datepicker();
     });
  </script>
</head>
<body>
  <!-- HTML --> 
    <p>Enter Date: <input type="text" id="datepicker"></p>
</body>
</html>

Interestingly, when I use the link I put into this question, the javascript does not work, while the original link does work. I found that if I remove the https:// from the link the javascript works perfectly. I do not know nearly enough about this subject to understand what could be going on. What about the https:// could be causing an error with the javascript?

Is it that the links that I include can not be accessed?

The very first step in debugging is to check your browser console for errors: "The page was loaded over HTTPS but requested an insecure stylesheet". This tells you exactly what the error is - you're trying to load insecure content on a secure page. Either view the page via http, or include your resources via https. — Christian
– Christian, Commented Sep 21, 2015 at 22:30
You can read more about Chrome's browser console here: developer.chrome.com/devtools/docs/console — Christian
– Christian, Commented Sep 21, 2015 at 22:34

obaylis · Accepted Answer · 2019-06-23 08:17:20Z

1

This is Mixed Content and is a security feature to maximise the security of your page.

As you've already found out, and has been mentioned, it's the script resources that you are accessing over http (not https) that cause the problem.

You have 2 options (1 being preferable).

Change the scripts to be called over https, then your link will work
Change your URL to be over http

Code as per option #1 below.

$(function() {
    $("#datepicker").datepicker();
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>

<p>Enter Date: <input type="text" id="datepicker"></p>

answered Jun 23, 2019 at 8:17

obaylis

3,0544 gold badges43 silver badges68 bronze badges

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

Collectives™ on Stack Overflow

JSFiddle Script Does Not Work With HTTPS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related