XML Data Island Display Problem

marcuslim · November 15th, 2004, 07:24 AM

Hi,

I've got the following in and XML data island:

<courses>
  <course>
    <title>XML Data Islands</title>
    <tutor>Wrox Publishing</tutor>
    <competency>XML</competency>
    <competency>Web Development</competency>
    <competency>Internet Explorer</competency>
  </course>
</courses>

I'm using the following HTML code to display the course details:

<xml id="courses" src="courses.xml"></xml>

<table datasrc="#courses">
  <thead>
  <tr>
    <td>
      Title
    </td>
  </tr>
  <tr>
    <td>
      Competencies
    </td>
  </tr>
  </thead>
  <tr>
    <td>
      <span datafld="title"></span>
    </td>
  </tr>
  <tr>
    <td>
      <table datasrc="#courses" datafld="competencies">
        <tr>
          <td>
            > <span datafld="$text"></span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tbody>
  </tbody>
</table>

The output I'm expecting is:

Title Competencies
XML Data Islands > XML
                          > Web Development
                          > Internet Explorer

The problem I'm having is the competencies aren't displaying and I can't figure out why.

Any help?

Many thanks

Marcus

joefawcett · November 15th, 2004, 07:49 AM

Yor table structure is slightly wrong but mainly you don't have an element named "competencies":

Code:

<html>
<head>
<title>Nested Data Island</title>
<xml id="courses">
  <courses>
    <course>
      <title>XML Data Islands</title>
      <tutor>Wrox Publishing</tutor>
      <competency>XML</competency>
      <competency>Web Development</competency>
      <competency>Internet Explorer</competency>
    </course>
    <course>
      <title>Database Design</title>
      <tutor>Wrox Publishing</tutor>
      <competency>Database</competency>
      <competency>Development</competency>
    </course>
  </courses>
</xml>
</head>
<body bgcolor="#FFFFFF">
<table border="1" align="center" width="70%" datasrc="#courses">
  <thead>
    <tr>
      <td>Title</td>
      <td>Competencies</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span datafld="title"></span></td>
      <td>
        <table border="0" width="100%" datasrc="#courses" datafld="competency">
          <tr>
            <td>&gt;<span datafld="$text"></span></td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

--

Joe (Microsoft MVP - XML)

marcuslim · November 15th, 2004, 03:51 PM

Sorry, typo on my part, I was using datafld="competency" not datafld="competencies" in my code.

With the data island explicitly populated, as in the example code, it works, but on my real page it doesn't.

My page is populated using a javascript function that is called from the body onload event.

function Init()
{
  var xmldoc = new ActiveXObject("microsoft.xmldom");
  xmldoc.async="false";
  xmldoc.load("courses.xml");
  document.all.courses.loadXML(xmldoc.selectSingleNo de("//course[name='XML']").xml);
  alert(document.all.courses.xml);
}

An alert box confirms that the correct portion of XML is returned.
But the "competency" elements do not appear. All the other elements are fine.

joefawcett · November 16th, 2004, 06:12 AM

So you are trying to filter for one specific course and then data bind to the now filtered XML?
You just need to give the secondary table a bit of a kick :)

Code:

<html>
<head>
<title>Nested Data Island</title>
<xml id="xmlAllCourses">
  <courses>
    <course>
      <title>XML Data Islands</title>
      <tutor>Wrox Publishing</tutor>
      <competency>XML</competency>
      <competency>Web Development</competency>
      <competency>Internet Explorer</competency>
    </course>
    <course>
      <title>Database Design</title>
      <tutor>Wrox Publishing</tutor>
      <competency>Database</competency>
      <competency>Development</competency>
    </course>
  </courses>
</xml>
<xml id="xmlCurrentCourse"></xml>
<script type="text/javascript">
  function getAllCourses()
  {
    return document.getElementById("xmlAllCourses").XMLDocument
  }

  function filterXml(CourseTitle)
  {
    var oDomAll = getAllCourses();
    var oDomCurrent = document.getElementById("xmlCurrentCourse").XMLDocument;
    if (CourseTitle.length == 0 )
    {
      oDomCurrent.loadXML("");
      return;
    }
    var sXPath = "courses/course[title = '" + CourseTitle + "']";
    var oNode = oDomAll.selectSingleNode(sXPath);    
    oDomCurrent.loadXML("<courses>" + oNode.xml + "</courses>");
    var oTable = document.getElementById("tblCompetency");
    oTable.dataSrc = oTable.dataSrc;  //Needed as otherwise table does not refresh.
  }

  function loadOptions()
  {
    var oLst = document.getElementById("lstCourses");
    var oDom = getAllCourses();
    var colTitles = oDom.selectNodes("courses/course/title");
    for (var i = 0; i < colTitles.length; i++)
    {
      addOption(oLst, colTitles[i].text, colTitles[i].text);
    }
  }

  function addOption(Listbox, Text, Value)
  {
    var oOption = document.createElement("option");
    oOption = Listbox.appendChild(oOption);
    oOption.text = Text;
    oOption.value = Value;
  }

  function init()
  {
    loadOptions();
  }
</script>
</head>
<body bgcolor="#FFFFFF" onload="init();">
<select id="lstCourses" onchange="filterXml(this.options[this.selectedIndex].value);">
  <option value="">------Choose a course------</option>
</select>
<table border="1" align="center" width="70%" datasrc="#xmlCurrentCourse">
  <thead>
    <tr>
      <td>Title</td>
      <td>Competencies</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span datafld="title"></span></td>
      <td>
        <table id="tblCompetency" border="0" width="100%" datasrc="#xmlCurrentCourse" datafld="competency">
          <tbody>
            <tr>
              <td>
                <span datafld="$text"></span>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

--

Joe (Microsoft MVP - XML)

marcuslim · November 16th, 2004, 10:03 AM

Thanks for that! :o)

Seems awfully complicated to achieve something so simple.

M

joefawcett · November 16th, 2004, 10:08 AM

Well the only code actually needed was re-setting the datasource

Code:

var oTable = document.getElementById("tblCompetency");
    oTable.dataSrc = oTable.dataSrc;

, I think this is a bug which I will pass to my Microsoft contact in case we've missed something, although I doubt if it will be fixed :) The rest was all window dressing. I think in general data binding is very limited once you get anything other than a single table. I usually just process the file using script and assign the values myself.

--

Joe (Microsoft MVP - XML)

marcuslim · November 16th, 2004, 10:35 AM

Just when I thought all was well...

I've got the page working, but with a couple of exceptions. When I filter by two specific "Course Type" values, the competencies don't appear.

Is there a way I can get you to have a look at the real data and see if you can spot something that I can't?

Now sure how much I can paste into this space...

Thanks - your help is really appreciated.

Marcus

joefawcett · November 16th, 2004, 10:43 AM

Unless your stuff is on a public server then just email your zipped pages and xml. I have a HoTMaiL address, my user name is the same as my p2p user name.

--

Joe (Microsoft MVP - XML)

mitcrellim · December 7th, 2004, 04:00 AM

I was looking for help on data islands and saw this post. I got it to work as I think you want with a separate file for the data island. I called this file test1.xml and it contains:

####begin file####
<?xml version="1.0"?>
  <courses>
    <course>
      <title>XML Data Islands</title>
      <tutor>Wrox Publishing</tutor>
      <competency>XML</competency>
      <competency>Web Development</competency>
      <competency>Internet Explorer</competency>
    </course>
    <course>
      <title>Database Design</title>
      <tutor>Wrox Publishing</tutor>
      <competency>Database</competency>
      <competency>Development</competency>
    </course>
  </courses>
####end of file####

and the htm file is:

####begin file####
<html>
<XML id="courses" src="test1.xml" > </XML>

<head>
<title>Nested Data Island</title>
</head>
<body bgcolor="#FFFFFF">
<table border="1" align="center" width="70%" datasrc="#courses">
  <thead>
    <tr>
      <td>Title</td>
      <td>Competencies</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span datafld="title"></span></td>
      <td>
        <table border="0" width="100%" datasrc="#courses" datafld="competency">
          <tr>
            <td>><span datafld="$text"></span></td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
####end of file####

Notice no code and I think it displays what you want?