CODEWITHSUNDEEP
javascriptjqueryhtmlhttp
Malonge
Malonge

Reputation: 2040

JSFiddle Script Does Not Work With HTTPS

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?

Upvotes: 1

Views: 1897

Answers (1)

obaylis
obaylis

Reputation: 3034

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

  1. Change the scripts to be called over https, then your link will work
  2. 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>

Upvotes: 1

Related Questions