Question

I am including HTML pages in an iPad magazine app using WebView (Woodwing Reader app). All files for the HTML pages are bundled with the app.

The root directory of the app contains a folder [images] which, contains a subdirectories of folders for each page in the app (i.e [page1], [page2], [page3], etc.). Also in the root directory is the main XML file which maps the layout structure of the pages.

I am attempting to build an HTML page that reads the [magazine.xml] and shares content via Twitter, FB, etc. I am able to parse the data from [magazine.xml] to an external web page (which will be used for a sharing URL), but the problem is that the external web page is not able to recognize which magazine issue date to share. As each issue has the same naming convention for the XML file [magazine.xml].

I can manually insert the issue date on my sharing app via javascript, but I would much rather make this an automated process. The XML file has a tag [issuedate] that lists the publication date, so I am attempting to read this tag via javascript and insert it into a URL string…but so far, no success.

Below is a sample of my javascript:

var issue = '08-27-2011';

$(function() {
var src = 'http://www.example.com/sections/ipad/'+section+'/?issue='+issue;
$('<iframe " src="' + src + '" width="100%" height="100%" scrolling="auto" frameborder="0"><\/iframe>').appendTo('#iframe');
});

And here is sample of the XML structure:

<?xml version="1.0" encoding="UTF-8"?>
<issue domversion="1.0">
<issuedate>08-19-2011</issuedate>
<items>
<item>
  <id>111</id>
  <category>Story Category</category>
  <title>Story Title</title>
  <description>Description</description>
  <author/>
  <pages>
    <page>
      <horizontalpage>
        <objects>
          <object>
            <id>000111222.1</id>
            <type>webview</type>
            <x>0</x>
            <y>0</y>
            <width>1024</width>
            <height>768</height>
            <link>bundle://images/111/PageID/PageID.html</link>
          </object>
        </objects>
        <pthumb>images/111/PageID_Thumbnail_h.jpg</pthumb>
        <ppreview>images/111/PageID_Preview_h.jpg</ppreview>
      </horizontalpage>
      <verticalpage>
        <objects>
          <object>
            <id>000111222a.1</id>
            <type>activeelement</type>
            <x>0</x>
            <y>0</y>
            <width>768</width>
            <height>1024</height>
            <link>bundle://images/111/PageID/PageID.html</link>
          </object>
        </objects>
         <pthumb>images/111/PageID_Thumbnail_v.jpg</pthumb>
        <ppreview>images/111/PageID_Preview_v.jpg</ppreview>
      </verticalpage>
    </page>

As I mentioned before I would much rather automate the process of gathering the issue var. I attempted to do this with the following code, but to no avail:

 xmlDoc=loadXMLDoc("../../magazine.xml");
 var issue = xmlDoc.getElementsByTagName("issuedate");

$(function() {
var src = 'http://www.example.com/sections/ipad/'+section+'/?issue='+issue;
$('<iframe " src="' + src + '" width="100%" height="100%" scrolling="auto" frameborder="0"><\/iframe>').appendTo('#iframe');
});

As you can see, the XML file resides two directories up from the directory that holds the javascript file. I can’t figure out how to make this work…your help will be much appreciated.

Thanks,
Carlos

——————————————————————————————>

UPDATE:

I figured it out, with the help of a friend from work. The solution was actually easier than I thought! I simply placed my HTML pages in the root directory of the app and called the XML file with the following code:

$(function() {
var issue;
$.ajax({
    async: false,
    type: "GET",
    url: "magazine.xml",
    dataType: "xml",
    success: function(xml) {
        issue = $(xml).find('issuedate').text();
    }
});
var src = 'http://www.example.com/ipad/'+section+'/?issue='+issue;
$('<iframe " src="' + src + '" width="100%" height="100%" scrolling="auto" frameborder="0"><\/iframe>').appendTo('#iframe');
});

As you can see, I was able to pass the ‘issue’ variable into the URL as well.

Answer 1

I actually answered my own question (with the help of a co-worker), so here it is:

$(function() {
var issue;
$.ajax({
async: false,
type: "GET",
url: "magazine.xml",
dataType: "xml",
success: function(xml) {
    issue = $(xml).find('issuedate').text();
}
});
var src = 'http://www.example.com/ipad/'+section+'/?issue='+issue;
$('<iframe " src="' + src + '" width="100%" height="100%" scrolling="auto" frameborder="0"><\/iframe>').appendTo('#iframe');
});