1

I know this sort of question has been asked plenty, and I've found solutions touching on the subject (such as: Dealing with HTTP content in HTTPS pages). However, I'm unsure how to implement this in my application.

I'm attempting to import an XML document from nfl.com on my website (ex: http://www.nfl.com/ajax/scorestrip?season=2015&seasonType=REG&week=1) and of course I get this error: Active mixed content error

As far as I know, changing http to https, does not work. So, how can I import this information from nfl.com to my webpage?

HTML code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
    <meta name="author" content="My Name">
    <!--Import Google Icon Font and Custom Icons-->
    <link href="https://rawgit.com/Templarian/MaterialDesign-Webfont/master/css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection">
</head>

<body>  
    <div id="main-content" class="container" style="width:auto;"></div>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
    <script type="text/javascript" src="initPicks.js"></script>
</body>
</html>

Javascript file snippet (initPicks):

$( document ).ready(function()
{
    var season = 2015;
    var week = 7;
    var url = 'http://www.nfl.com/ajax/scorestrip?season=' + season + '&seasonType=REG&week=' + week;
    $("#title").text("Week " + week);

    // set table and table header
    $("#main-content").html(
        '<table id="picks"><thead><tr>' +
        '<th data-field="date">Date</th>' + 
        '<th data-field="awayLogo">Away</th>' +
        '<th data-field="awayName"></th>' +
        '<th data-field="homeLogo">Home</th>' +
        '<th data-field="homeName"></th>' +
        '<th data-field="points">Assigned Points</th></thead></table>');

    //table body
    $("#picks").append('<tbody id="body"></tbody>');

    //import xml document from nfl.com
    $.get(url, function( data )
    {
        console.log(data);
    });
});

I apologize for poor coding. I'm new to HTML, jQuery, javascript (web development in general). Thanks in advance for your help.

Community
  • 1
  • 1
Eric Kurtzberg
  • 19
  • 3
  • use your server as a proxy. – Kevin B May 25 '16 at 18:07
  • 1
    To expand on Kenvin's comment, add a php page that just gets the file contents from that URL over HTTP, then echo's it. In that way, the document will be server from your own server and can be accessed via SSL. You could even go so far as to cache the response to save bandwidth. – circusdei May 25 '16 at 18:11
  • I'm entirely unfamiliar with php. Can you give me an example? – Eric Kurtzberg May 25 '16 at 18:33

0 Answers0