phph won't "live update" while using ssl

Question

I am creating a php website which uses javascript to get values from the database every 5 seconds.

Everything is working well when I am visiting the website without ssl connection, but as soon as I type https:// before the url, the page loads but the parts that get updated every 5 seconds keeps stuck on the loading image.

This is how I receive the updates

index.php

<div id="stats">
    <center><img src="/images/loading.gif" alt="Loading stats" title="Loading stats" /></center>
</div>

stats.js

//stats
function loadStats(){
    $.ajax({
        url: 'includes/stats.php',
        success: function(data) {
            $("#stats").html(data);
            setTimeout("loadStats()", 5000);
        }
    });
}
$(function(){
    loadStats();
});

includes/stats.php

Here I receive the databse info and echo the html

Thanks in advance!

edit:

I am using //domain/file.js now for all js/css/images but it still only 
works without the ssl connection

Is there any messages in the console? Are you loading all resources (like javascript etc) using https as well? If not, you need to, or they won't be loaded on the page under https. — M. Eriksson, Apr 30 '19 at 17:17
Look at your browser's developer console and network tab; it should be yelling at you. You are probably trying to load your JS insecurely via ` — MonkeyZeus, Apr 30 '19 at 17:17
The console outputs this: Uncaught ReferenceError: $ is not defined at stats.js:11 — Lesley Peters, Apr 30 '19 at 17:23
Looking at the source, it looks like the jquery link starts with `http://`. As we've pointed out, _all_ resources _must_ be loaded using `https://` if the main site uses `https://` or the browser will block the request. (To post code in comments, you need to wrap it with back ticks). — M. Eriksson, Apr 30 '19 at 17:26
Load remote files with `//domain/path/file` to always give preference to https, and fallback to http if needed. — Patrick Q, Apr 30 '19 at 17:40
If you don't want to specify the scheme (so it can be loaded over both http and https), then you need the `//` at the front, at the very least. — aynber, Apr 30 '19 at 17:40
Possible duplicate of [How to Include CSS and JS files via HTTPS when needed?](https://stackoverflow.com/questions/2725523/how-to-include-css-and-js-files-via-https-when-needed) — Patrick Q, Apr 30 '19 at 17:41
Is there no way to do this without including the domain name itself? — Lesley Peters, Apr 30 '19 at 20:14
@LesleyPeters You're going to have to be more specific. What _exactly_ did you change? You previously mentioned getting an "Uncaught ReferenceError". Are you still getting that same error? Are you getting any new errors? — Patrick Q, Apr 30 '19 at 20:31
@PatrickQ The only warning i'm getting at the moment is: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. — Lesley Peters, Apr 30 '19 at 20:37
I've fixed it, @MagnusEriksson gave the answer already but fergot to change this... — Lesley Peters, Apr 30 '19 at 20:40
@LesleyPeters Okay, so then it _did_ resolve the problem. Using `//` _replaces_ the need to explicitly use `https://` and saves you the headache of having to change back and forth between protocols depending on whether or not you're on a version of your site with SSL. — Patrick Q, Apr 30 '19 at 20:42
@PatrickQ I didn't have to use //domain for my local url's. I only needed to use // before the jquery include. — Lesley Peters, Apr 30 '19 at 20:50
@PatrickQ - There's no need to "change back and forth". Just use `https://` for all third-party links. Then you then know that all third-party files are loaded through SSL, which protects you against man-in-the-middle-attacks. Safety first! — M. Eriksson, May 01 '19 at 10:33

score 0 · Accepted Answer · answered Apr 30 '19 at 20:38

0

It looks like JQuery is not loading correctly.

Lesley Peters points out:

The console outputs this: Uncaught ReferenceError: $ is not defined at stats.js:11

Line 11 is:

$(function(){
  loadStats();
});

The parent page making the ajax callback may not be referencing jQuery, furthermore, make sure to load jQuery through HTTPS://.

If this does not work, you might want to consider running directly:

    function loadStats(){
    $.ajax({
        url: 'includes/stats.php',
        success: function(data) {
            $("#stats").html(data);
            setTimeout("loadStats()", 5000);
           }
   });
   }
   loadStats();

answered Apr 30 '19 at 20:38

Belle 'Sandon' Ling

144
2
9

Using: instead of: fixed the problem, I didn't need to edit my local url's. – Lesley Peters Apr 30 '19 at 20:52
@LesleyPeters - I would recommend using `https://` over `//` to make sure all external files are loaded securely through SSL. There's is a reason https exists. – M. Eriksson May 01 '19 at 10:38

phph won't "live update" while using ssl

1 Answers1