Why doesn't this function load after a successful ajax call in jquery?

Question

I'm using the tutorial here , that used to work last month, but now it isn't. I've copied the relevant code below.

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "http://papermashup.com/demos/jquery-xml/books.xml",
        dataType: "xml",
        success: xmlParser
    });
    alert("123");
});

function xmlParser(xml) {
    alert("456");

    $('#load').fadeOut();

    $(xml).find("Book").each(function () {

        $(".main").append('<div class="book"><div class="title">' + $(this).find("Title").text() + '</div><div class="description">' + $(this).find("Description").text() + '</div><div class="date">Published ' + $(this).find("Date").text() + '</div></div>');
        $(".book").fadeIn(1000);

    });

}

The problem is that the xmlParser() function isn't being called after the successful ajax request. It shows a 123 alert but not a 456 alert. Am I doing something wrong, or is the tutorial wrong?

I've included a relevant jsfiddle here. http://jsfiddle.net/desbest/nwt3unxu/

Answer 1

Why doesn't this function load after a successful ajax call in jquery?

It does.

From the JavaScript error console:

XMLHttpRequest cannot load http://papermashup.com/demos/jquery-xml/books.xml . No ' Access-Control-Allow-Origin ' header is present on the requested resource. Origin ' http://fiddle.jshell.net ' is therefore not allowed access.

Your request isn't successful (at least in Ajax terms, it is in strictly HTTP terms, but the site you are requesting the data from isn't giving the browser permission to give the data to the JavaScript from JSFiddle).