Php, javascript together not displaying

Here is my situation:
I open the index file of my site. In the file the header portion is called with javascript. Within the header file I call a menu.html file using javascript. All is fine. When I insert my SSL seal php code into the header file (so it will show on all pages) I get a blank screen and perpetual loading of the index page.
If I place the php code in the index file it displays perfectly.
If I open only the header file by itself the php code displays in it perfectly.

Am I downloading the header file code to the local machine before the php can execute?
Is there a way to get around this? Do I need to call all files using php? Any example code would help as I really don’t understand php very well.
Thank you for any help.

PHP is server-side and Javascript is client-side, which is going to load first? Hint: the one closer and is always there for other users. I have taken a couple of college courses I was always told to put the javascript down at the bottom of the HTML page unless you specifically tell javascript on how to load.

Here’s a snippet of javascript code of a trivia game I wrote:
function getCategories() {

    form_data = serializeFormById('categories-form');
    //console.log('serialize', form_data);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            //console.log('Result: ' + result);

            var json = JSON.parse(result);
            //console.log(json.total);
            /*
             * Hide Category Selection
             */
            document.getElementById('categories-form').style.display = 'none';
            document.getElementById('textContainer').style.display = "block";
            document.getElementById('subject').innerHTML = "Category " + json.category;
            loadGame('triviaxml.php', 0, json.total, json.category);
        }
    };


    xhr.open('POST', 'totalRecords.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send(form_data);
}

button.addEventListener("click", function (event) {
    event.preventDefault();
    getCategories();
});

You can find the GitHub repository here: Trivia Game Vanilla Javascript

Sponsor our Newsletter | Privacy Policy | Terms of Service