jQuery移动页眉和页脚根本没有显示出来

Question

我不得不为课程做一个任务，由于某种原因我无法让jQuery Mobile工作。我按照教授的要求写了一切，但它仍然没有出现。应该有一个jQuery Mobile页眉和页脚，在滚动时始终保持在屏幕上，但它不显示。这是所有相关代码。

<!DOCTYPE html>
<html>
<head>
    <title>Homework 2</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

    <script>
    var key = "";
    var URL = "";
    var zip = "";
    var weather = 0;

    //sets the sip variable to the given zipcode
    function setZip(temp) {
        zip = temp;
    }

    //sets the weather variable to the given object
    function setWeather(temp) {
        weather = temp;
    }

    //generates and displays hourly weather
    function generateContent() {

        //resets the div element, so the previous content is replaced, and not built upon
        document.getElementById("contents").innerHTML = "";

        key = document.getElementById("key").value;
        URL = "http://api.wunderground.com/api/" + key + "/geolookup/q/autoip.json";

        //used to locate the zipcode value
        $.ajax({
            type: "GET",
            url: URL,
            dataType: "jsonp",
            success: function (msg) {

                if (msg.response.error == undefined)
                    setZip(msg.location.zip);
                else {
                    alert("Error");
                    return;
                }
            },
            error: function (jgXHR, textStatus, errorThrown) {
                alert("Error: " + textStatus + " " + errorThrown);
                return;
            }
        });

        URL = "http://api.wunderground.com/api/" + key + "/hourly/q/" + zip + ".json"

        //used to get the json hourly weather object that will be used for displaying the hourly weather
        $.ajax({
            type: "GET",
            url: URL,
            data: {},
            dataType: "jsonp",
            success: function (msg) {

                setWeather(msg.hourly_forecast);

            },
            error: function (jgXHR, textStatus, errorThrown) {
                alert("Error: " + textStatus + " " + errorThrown);
                return;
            }
        });

        //for loop that cycles through all weather elements, and displays their time, date, and the icon for the weather
        for (var i = 0; i < weather.length; i++) {

            var time = weather[i].FCTTIME.hour_padded;
            var timeZone = weather[i].FCTTIME.tz;
            var date = weather[i].FCTTIME.month_name + " " + weather[i].FCTTIME.mday + ", " + weather[i].FCTTIME.year;
            //var icon = weather[i].icon + "<img src='" + obj[i].icon_url + "' alt='icon'>

            var text = time + ":00" + " " + timeZone + " on " + date + " ";

            var icon = document.createElement("img");
            icon.src = weather[i].icon_url;

            //used to append created elements onto the empty div element 
            var paragraph = document.createElement("p").appendChild(document.createTextNode(text));
            document.getElementById("contents").appendChild(paragraph);
            document.getElementById("contents").appendChild(icon);
            document.getElementById("contents").appendChild(document.createElement("br"));
        }

    }
    </script>
    </head>
<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed"><h1>Assignment 2</h1></div>
        <div data-role="content"> 
            <p>Input Wunderground key to see the hourly weather in your area.</p>
               <input id="key" type="text" />
               <br />
                <button onclick="generateContent()">Get the Weather!</button>
                <br /> <br />
                <div id="contents"></div> <br />
        </div>
        <div data-role="footer" data-position="fixed"><h1>CS275</h1></div>
    </div>

</body>
</html>

请让我知道代码中是否有任何遗漏，因为我老实说也看不出有什么问题，虽然我会说实话，到目前为止，我在网络开发方面并不是那么出色，所以我可能只是遗漏了一些东西这里很简单。谢谢您的帮助。