diff --git a/getteam.py b/getteam.py
index 4f9aacda..ca393fa3 100644
--- a/getteam.py
+++ b/getteam.py
@@ -5,7 +5,6 @@
 Note that this first looks for the ``ASTROPY_REPO_PATH`` environment
 variable to try to find a local copy of the astropy repo.
 """
-from __future__ import print_function
 
 
 def get_astropy_credits(warner=print):
diff --git a/js/functions.js b/js/functions.js
index 3ecb86d5..5e4f600f 100755
--- a/js/functions.js
+++ b/js/functions.js
@@ -22,123 +22,6 @@ $( document ).ready(function(){
 			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
 	});
 
-    //creating Astropy roles table & roles lists using roles.json
-    var request = new XMLHttpRequest();
-    var dataURL = "roles.json";
-    request.open('GET', dataURL);
-    request.responseType = 'json';
-    request.send();
-
-    //log error when request gets failed
-    request.onerror = function () {
-        console.log("XHR error");
-    };
-
-    request.onload = function () {
-        //received json data via XHR
-        var data = request.response;
-        //creating roles table from json data
-        createRolesTable(data);
-        //creating roles lists from json data
-        createRolesDescription(data);
-    };
-
-    function createRolesTable(roles) {
-        //roles is an array of objects called "role"
-        var rows = '';
-        roles.forEach(function (role) {
-            //role is an object containing information about each team role
-            //index marks current people
-            var index = 0;
-
-            // for roles where there are no sub-roles, the people are defined
-            // at the top-level of the JSON role dict - for convenience below we create
-            // a virtual sub-role with no heading
-            if (!('sub-roles' in role)) {
-                role['sub-roles'] = [{'role': '',
-                                      'people': role['people']}];
-            }
-
-            //creating each row by iterating over each person in a role
-            role["sub-roles"].forEach(function (subrole) {
-                //rowRole is displayed once for each role
-                rowRole = index == 0 ? '<a href="#' + role["url"] + '">' + role["role"] + '</a>' : "";
-
-                var rowSubRole = subrole['role'];
-
-                if (subrole['people'][0] == "Unfilled") {
-                    rowPeople = '<a href="mailto:coordinators@astropy.org"><span style="font-style: italic;">Unfilled</span></a>';
-                } else {
-                    rowPeople = subrole['people'].join(', ');
-                }
-
-                //generating rows
-                if (index == 0) {
-                    rows += '<tr class="border-top">';
-                } else {
-                    rows += '<tr>';
-                }
-
-                rows +=   '<td>' + rowRole + '</td>' +
-                          '<td>' + rowSubRole + '</td>' +
-                          '<td>' + rowPeople + '</td>' +
-                        '</tr>';
-                index++;
-            });
-        });
-
-        $("#roles-table").append(rows);
-    }
-
-    function createRolesDescription(roles) {
-        //roles is an array of objects called "role"
-        var blocks = "";
-        roles.forEach(function (role) {
-            //role is an object containing information about each team role
-            var list = "";
-            //checking if role["description"] array isn't empty
-            if (role["responsibilities"] != null) {
-
-                // If responsibilities is a dict, wrap inside a list so that all entries have a list
-                // dicts
-                if (role['responsibilities'].constructor == Object) {
-                    role['responsibilities'] = [role['responsibilities']];
-                }
-
-                console.log(role['responsibilities']);
-
-                blocks += '<br/>' +
-                '<h3 id="' + role["url"] + '">' + role["role-head"] + '</h3>';
-
-                index = 0;
-
-                role['responsibilities'].forEach(function (resp) {
-
-                    console.log(resp);
-
-                    detail_list = '';
-                    resp["details"].forEach(function (detail) {
-                        detail_list += '<li>' + detail + '</li>';
-                    });
-
-                    if ('subrole-head' in resp) {
-                        if (index > 0) {
-                            blocks += '<br>';
-                        }
-                        blocks += '<em>' + resp["subrole-head"] + '</em>';
-                    }
-                    blocks += '<p>' + resp["description"] + '</p>' +
-                              '<ul>' + detail_list + '</ul>';
-
-                    index += 1;
-
-                })
-
-            }
-        });
-        $("#roles-description").append(blocks);
-    }
-
     $('#os-selector ul').each(function(){
       // For each set of tabs, we want to keep track of
       // which tab is active and it's associated content
@@ -255,6 +138,7 @@ function pypi_translator(pypiname) {
     }
 }
 
+
 function bool_translator(stable) {
     if (stable) {
         return 'Yes';
@@ -263,6 +147,7 @@ function bool_translator(stable) {
     }
 }
 
+
 function ghuser_translator(fullname, ghname) {
     if (fullname === undefined || ghname === undefined) {
         return 'None';
@@ -272,6 +157,7 @@ function ghuser_translator(fullname, ghname) {
     }
 }
 
+
 var _email_regex_str = '[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}';
 var _email_regex  = new RegExp(_email_regex_str, 'i');
 var _email_with_name_regex  = new RegExp('(.+)<(' + _email_regex_str + ')>', 'i');
@@ -292,11 +178,118 @@ function maintainer_translator(maint, pkgnm) {
 }
 
 
+function createRolesTable(roles) {
+    //roles is an array of objects called "role"
+    var rows = '';
+    roles.forEach(function (role) {
+        //role is an object containing information about each team role
+        //index marks current people
+        var index = 0;
+
+        // for roles where there are no sub-roles, the people are defined
+        // at the top-level of the JSON role dict - for convenience below we create
+        // a virtual sub-role with no heading
+        if (!('sub-roles' in role)) {
+            role['sub-roles'] = [{'role': '',
+                                  'people': role['people']}];
+        }
+
+        //creating each row by iterating over each person in a role
+        role["sub-roles"].forEach(function (subrole) {
+            //rowRole is displayed once for each role
+            rowRole = index == 0 ? '<a href="#' + role["url"] + '">' + role["role"] + '</a>' : "";
+
+            var rowSubRole = subrole['role'];
+
+            if (subrole['people'][0] == "Unfilled") {
+                rowPeople = '<a href="mailto:coordinators@astropy.org"><span style="font-style: italic;">Unfilled</span></a>';
+            } else {
+                rowPeople = subrole['people'].join(', ');
+            }
+
+            //generating rows
+            if (index == 0) {
+                rows += '<tr class="border-top">';
+            } else {
+                rows += '<tr>';
+            }
+
+            rows +=   '<td>' + rowRole + '</td>' +
+                      '<td>' + rowSubRole + '</td>' +
+                      '<td>' + rowPeople + '</td>' +
+                    '</tr>';
+            index++;
+        });
+    });
+
+    $("#roles-table").append(rows);
+}
+
+
+function createRolesDescription(roles) {
+    //roles is an array of objects called "role"
+    var blocks = "";
+    roles.forEach(function (role) {
+        //role is an object containing information about each team role
+        var list = "";
+        //checking if role["description"] array isn't empty
+        if (role["responsibilities"] != null) {
+
+            // If responsibilities is a dict, wrap inside a list so that all entries have a list
+            // dicts
+            if (role['responsibilities'].constructor == Object) {
+                role['responsibilities'] = [role['responsibilities']];
+            }
+
+            console.log(role['responsibilities']);
+
+            blocks += '<br/>' +
+            '<h3 id="' + role["url"] + '">' + role["role-head"] + '</h3>';
+
+            index = 0;
+
+            role['responsibilities'].forEach(function (resp) {
+
+                console.log(resp);
+
+                detail_list = '';
+                resp["details"].forEach(function (detail) {
+                    detail_list += '<li>' + detail + '</li>';
+                });
+
+                if ('subrole-head' in resp) {
+                    if (index > 0) {
+                        blocks += '<br>';
+                    }
+                    blocks += '<em>' + resp["subrole-head"] + '</em>';
+                }
+                blocks += '<p>' + resp["description"] + '</p>' +
+                          '<ul>' + detail_list + '</ul>';
+
+                index += 1;
+
+            })
+
+        }
+    });
+    $("#roles-description").append(blocks);
+}
+
+
+function populateRoles(data, tstat, xhr) {
+    //creating roles table from json data
+    createRolesTable(data);
+    //creating roles lists from json data
+    createRolesDescription(data);
+}
+
+
 function populateTables(data, tstat, xhr) {
     populatePackageTable('coordinated', filter_pkg_data(data, "coordinated", true));
     populatePackageTable('affiliated', filter_pkg_data(data, "coordinated", false));
 }
 
+
 function filter_pkg_data(data, field, value) {
     if (data === null) {
       return null;
@@ -401,6 +394,7 @@ var review_color_map = {'Unmaintained': "red",
     "Needs work": "red"
 };
 
+
 function makeShields(pkg) {
   var shield_string = "";
 
@@ -426,6 +420,7 @@ function makeShields(pkg) {
   return shield_string
 }
 
+
 function guess_os() {
     var OSName="source";
     if (navigator.appVersion.indexOf("Win")!=-1) OSName="windows";
diff --git a/team.html b/team.html
index 587b4837..684f8c32 100644
--- a/team.html
+++ b/team.html
@@ -750,6 +750,12 @@ <h3 id="other-credits">Other Credits<a class="paralink" href="#other-credits" ti
 		<script src="js/jquery.sidr.min.js"></script>
 		<script src="js/functions.js"></script>
 
+	  <script type="text/javascript">
+		    $(document).ready(function() {
+		        $.getJSON("roles.json", populateRoles);
+		    });
+		</script>
+
         <hr>
 		<p>
 		<img style="vertical-align:middle" src="images/astropy_brandmark.png" height=20><span style="vertical-align:middle">