With jQuery and I need help getting individual table row titles attributes from an xml file

Question

I'm usig tablesorter jQuery to parse this xml file

    <?xml version="1.0" encoding="iso-8859-1"?>
<CATALOG>
  <CD>
    <TITLE>Title 01</TITLE>
    <ARTIST>Artist 01</ARTIST>
    <COUNTRY>Country 01</COUNTRY>
    <PRICE>10.00</PRICE>
    <YEAR>2010</YEAR>
    <INFO>Tooltip Info 01</INFO>
  </CD>
  <CD>
    <TITLE>Title 02</TITLE>
    <ARTIST>Artist 02</ARTIST>
    <COUNTRY>Country 02</COUNTRY>
    <PRICE>9.00</PRICE>
    <YEAR>2009</YEAR>
    <INFO>Tooltip Info 02</INFO>
  </CD>
  <CD>
    <TITLE>Title 03</TITLE>
    <ARTIST>Artist 03</ARTIST>
    <COUNTRY>Country 03/COUNTRY>
    <PRICE>8.00</PRICE>
    <YEAR>2008</YEAR>
    <INFO>Tooltip Info 03</INFO>
  </CD>
</CATALOG>

and with this code

    <script type="text/javascript">
$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "file.xml",
    dataType: "xml",
    success: function(xml){                 
       $(xml).find("CD").each(function(){                                             
          $("#tablebody").append('<tr><td>'
            + $(this).find("TITLE").text() 
            + '</td><td>'+ $(this).find("ARTIST").text() 
            + '</td><td>'+ $(this).find("COUNTRY").text() 
            + '</td><td>'+ $(this).find("PRICE").text() 
            + '</td><td>'+ $(this).find("YEAR").text() 
            + '</td></tr>');                        
          });
       }
  });
});
</script>

I'm new at javascript and have been trying with no luck for a couple of hrs to get the text from the INFO/INFO tags in the xml file to show as title attributes for each table row. The reason for that is that I need to have individual popup tooltips on mouse-over each table row. Many Thanks in advance for any kind of help or suggestions!

Answer 1

$("#tablebody").append("<tr title='" + $(this).find("INFO").text() + "'><td>"
            + $(this).find("TITLE").text() 
            + '</td><td>'+ $(this).find("ARTIST").text() 
            + '</td><td>'+ $(this).find("COUNTRY").text() 
            + '</td><td>'+ $(this).find("PRICE").text() 
            + '</td><td>'+ $(this).find("YEAR").text() 
            + '</td></tr>');                        
          });

Answer 2

I would do it slightly differently to eliminate some repetitive code:

var cells = ["TITLE", "ARTIST", "COUNTRY", "PRICE", "YEAR"];

...

success: function(xml) {
  $(xml).find("CD").each(function() {
    var title = $(this).children("INFO").text();
    var row = $("<tr>").attr("title", title).appendTo("#tablebody");
    for (var i=0; i<cells.length; i++) {
      var text = $(this).children(cells[i]).text();
      $("<td>").text(text).appendTo(row);
    }
  }

cells is just an array of the child elements you want to create table cells from. Creating markup the way you do can get slow. The above method is much faster. The title attribute on the row is what produces the tool tip.

Answer 3

For better performance (if the output is very large), use this function:

success: function(xml){
  var content = '';
  $(xml).find("CD").each(function(){
    content += '<tr title="' + $(this).find("INFO").text() + '"><td>' +
    $(this).find("TITLE").text() + '</td><td>' +
    $(this).find("ARTIST").text() + '</td><td>' +
    $(this).find("COUNTRY").text() + '</td><td>' +
    $(this).find("PRICE").text() + '</td><td>' + 
    $(this).find("YEAR").text() + '</td></tr>';
  });
  $("#tablebody").append(content);
}

From this article, the best performance would be to not use the .each function and use arrays and such, but I didn't use that method as it is a bit harder to read and understand especially to someone new to javascript.

Answer 4

biterscript to get all TITLES (or tag values of one tag type).

# Script XMLTags.txt
var str document, xml, tagtype, tagvalue, searchRE
set $searchRE = "^<"+$tagtype+"&</"+$tagtype+"^"
cat $document > $xml
while ( { sen -r -c $searchRE $xml } > 0 )
do
    stex -r -c $searchRE $xml > $tagvalue
    stex "^>^]" $tagvalue > null
    stex "]^<^" $tagvalue
done

Call the script like this from calling script.

script XMLTags.txt document("http://www.xxx.yyy/file.xml") tagtype("TITLE")

Will get all titles.

script XMLTags.txt document("http://www.xxx.yyy/file.xml") tagtype("ARTIST")

Will get all artists.

etc.