Ajax call to external API

Design help Custom code
1

In the body tag we are using the following code (which works outside of webflow). However it doesn’t work in webflow. Can anyone see what’s going wrong?

$(document).ready(function () {
    $.ajax({
        url: "https://secure.self-servicenetworks.com/athensapi/api/data/getstops/1/1/",
        success: function (data) {
        alert('here');
            var stopList = "";
            for (var i = 0; i < data.length; i++) {
                stopList += data[i].StopName +"<br/>";
            }
            $('#divStops').html(stopList);
        },
        error: function(a,b,c) {
            alert('there');
        }
    });
});
1 Like
2

Do you see any console errors?

3

Error message is

XMLHttpRequest cannot load https://secure.self-servicenetworks.com/athensapi/api/data/getstops/1/1/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

This is because XML cannot be loaded from another website using AJAX as there are cross-domain restrictions. You will need to find a JSON resource on that site to load instead.