Question

I am currently working on an interactive HTML5 widget for an EPUB file. We typically use jQuery to do these things.

Current project would be much easier if I could include an XML data file in with the EPUB manifest and then have my little HTML5 widget read in the data from the XML file using standard jQuery and AJAX methods.

I have done this a thousand times for web applications just having difficulty doing it inside of an EPUB file.

My main questions are:

1) Is this even possible?

2) What is the proper media-type to use when declaring the data XML file in the package.opf?

I am using the following code:

$.ajax({
    type: "GET",
    async: false,
    cache: false,
    url: "data/test.xml",
    dataType: "xml",
    error: function() {
        alert("ERROR: The table data could not be read...");
    },
    success: function(objFileContents) {
        alert("SUCCESS");
    }
);

The error alert keeps displaying when I test in iBooks. But, everything works fine when I test in Safari on my desktop.

Any assistance is greatly appreciated.

Thanks!

Answer 1

One has to wonder what the point of using a huge library like jQuery is inside an EPUB, when one of the main purposes of jQuery is cross-browser compatibility. I’d strongly recommend using standard ECMA5/XHTML5 techniques.

Anyway, of course you can include an XML file in an EPUB and read it. What difficulties are you having? The obvious thing is to check the path. Are you sure it should not be ../data/text.xml, for instance? For media type, all else being equal, just use text/xml or application/xml.

Please note that some readers may return a value of 0, for unknown reasons, even when the read was successful. That may be tricking jQuery into reporting an error. But you should be able to access the responseText or responseXml field of the underlying XMLHttpRequest object.

I use the following code and it works just fine:

read=(function(){
    var r=new XMLHttpRequest();
    return function(src){
        r.open('GET', src, false);
        r.send();
        if(r.status!=200 && r.status!=0){//E-books return 0 for some reason?
            //REPORT ERROR
            return null;
        }
        return r.responseText;
    };
}())
;