Site's Javascript Won't Load in Browser on HTTPS, ok on HTTP

[tmx108]

I hope I’m in the right place to ask this…

A site I designed http://grandmaswarehouse.com has a JavaScript slideshow on the Home page and a music player on the “Listen” page. For some reason both are no longer loading in Firefox or Chrome using HTTPS:// but come up fine when loaded as HTTP://

I assume this is because the browser doesn’t see the JavaScript as secure (?) How I can remedy this?

Thanks!

[John_Betong]

Hi @tmx108 and a warm welcome to the forum.

I checked the site using the following free validation tool and found numerous errors which may or may not be the problem. I find that clearing the errors and warnings usually solves most browser problems:

[Invalid] Markup Validation of https://grandmaswarehouse.com/ -...

[James_Hibbard]

Hi,

The first thing I would do is to redirect http://grandmaswarehouse.com to https://grandmaswarehouse.com. Normally there is an option in your CPanel to do this. Otherwise you can use an .htaccess file to force HTTPS.

As to the fact that assets included via HTTP won’t load on a site served via HTTPS site, this is expected behaviour. If you look at your browser’s console (usually accessed by the F12 key) you will see:

See here for further details on the error: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

The way to fix this is to use the HTTPS version of jQuery.`So this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

becomes:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

That’s quite an old version of jQuery by the way. You might want to look at updating it?

[tmx108]

James, a belated thank you for your help! Your solution worked perfectly :).

Also, John, I appreciate the validator link. I’ll work on fixing those errors.