0

Im trying to load a simple content from another server into a div.

File to load - banner_outage_sample.html

AJAX

(function($)
{
$(document).ready(function()
{
    $.ajaxSetup(
    {
        cache: false,
        beforeSend: function() {
            $('#content-loaded').hide();
            $('#loading').show();
        },
        complete: function() {
            $('#loading').hide();
            $('#content-loaded').show();
        },
        success: function() {
            $('#loading').hide();
            $('#content-loaded').show();
        }
    });
    var $container = $("#content-loaded");
    $container.load("http://www.svrsstatus.com/banner_outage_sample.html");

});
})(jQuery);

HTML

<div id="content-loaded"></div>
<div id="loading">Loading</div>

Basically when the content (banner_outage_sample.html) loads the 'loading' div hides and shows the 'content-loaded' div. It seems that the 'beforehand' function is working, but it will not load the content externally. Is it because of the security on the other server or what am I missing?

Here is the example on JSFIDDLE thats not working.

I also checked the Chrome debugger network and showed a security issue:

Access to XMLHttpRequest at 'svrsstatus.com/banner_outage_sample.html?_=1558710510006' from origin 'staging.svrs.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Looks like using AJAX is not the answer because of the security issue, but is there another best method to load content from another server besides using AJAX?

Thank you for your wisdom!

Christian Luneborg
  • 493
  • 7
  • 19
  • 2
    You're probably getting a cross-origin error. Open your debugger network tab and see what happens with that request. – Diodeus - James MacFarlane May 24 '19 at 15:05
  • Im showing - 'Access to XMLHttpRequest at 'http://www.svrsstatus.com/banner_outage_sample.html?_=1558710510006' from origin 'http://staging.svrs.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.' How do I get around it? – Christian Luneborg May 24 '19 at 15:09
  • 2
    That is the expected behaviour. Reap up: https://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations – Diodeus - James MacFarlane May 24 '19 at 15:12
  • Looks like using AJAX is not the answer because of the security issue. Is there another method to load the content from another server besides using AJAX? Thank you! – Christian Luneborg May 24 '19 at 16:54

0 Answers0