Databases
StackOverflow2013
Postsdbo
POReally simple XML attributes displayed in an HTML table w/ jQuery - this should be easy
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POReally simple XML attributes displayed in an HTML table w/ jQuery - this should be easy
    primarykey
    data
    text
    <p>I've got an XML file automatically generated, which I want to display in HTML.</p> <p>I've taken a jQuery example &amp; expanded it to read all my attributes;</p> <p>Live example: <a href="http://dl.dropbox.com/u/3755926/jQuery/jQuery_report.html" rel="nofollow">http://dl.dropbox.com/u/3755926/jQuery/jQuery_report.html</a></p> <p>Is there possibly a timeout error which causes only the column headers to display? I've never had to deal with so much data before. Or is it the number of attributes on each element? Does this syntax only support a single attribute?</p> <pre><code>// Start function when DOM has completely loaded $(document).ready(function(){ // Open the xml file $.get("Default.ass",{},function(xml){ // Build an HTML string myHTMLOutput = ''; myHTMLOutput += '&lt;table width="98%" border="1" cellpadding="0" cellspacing="0"&gt;'; myHTMLOutput += '&lt;th&gt;LookUp&lt;/th&gt;&lt;th&gt;TurnLeft&lt;/th&gt;&lt;th&gt;TurnRight&lt;/th&gt;&lt;th&gt;Flare1&lt;/th&gt;&lt;th&gt;Flare2&lt;/th&gt;&lt;th&gt;CutAway&lt;/th&gt;&lt;th&gt;Bergan&lt;/th&gt;&lt;th&gt;TurnWind&lt;/th&gt;&lt;th&gt;Flare3&lt;/th&gt;&lt;th&gt;HeadWindOffSet&lt;/th&gt;&lt;th&gt;DisT&lt;/th&gt;&lt;th&gt;Safe&lt;/th&gt;'; // Run the function for each student tag in the XML file //$('AAR_Assessments',xml).each(function(i) { $(xml).find("student").each(function(i) { LookUpTime = $(this).find("LookUp").attr("Time"); LookUpAlt = $(this).find("LookUp").attr("Altitude"); LookUpRes = $(this).find("LookUp").attr("Result"); TurnLeftTime = $(this).find("TurnLeft").attr("Time"); TurnLeftAlt = $(this).find("TurnLeft").attr("Altitude"); TurnLeftRes = $(this).find("TurnLeft").attr("Result"); TurnRightTime = $(this).find("TurnRight").attr("Time"); TurnRightAlt = $(this).find("TurnRight").attr("Altitude"); TurnRightRes = $(this).find("TurnRight").attr("Result"); Flare1Time = $(this).find("Flare1").attr("Time"); Flare1Alt = $(this).find("Flare1").attr("Altitude"); Flare1Res = $(this).find("Flare1").attr("Result"); Flare2Error = $(this).find("Flare2").attr("Error"); CutAwayTime = $(this).find("CutAway").attr("Time"); CutAwayAlt = $(this).find("CutAway").attr("Altitude"); CutAwayRes = $(this).find("CutAway").attr("Result"); BerganTime = $(this).find("Bergan").attr("Time"); BerganAlt = $(this).find("Bergan").attr("Altitude"); BerganRes = $(this).find("Bergan").attr("Result"); TurnWindTime = $(this).find("TurnWind").attr("Time"); TurnWindAlt = $(this).find("TurnWind").attr("Altitude"); TurnWindRes = $(this).find("TurnWind").attr("Result"); Flare3Error = $(this).find("Flare3").attr("Error"); HeadWindOffSetTime = $(this).find("HeadWindOffSet").attr("Time"); HeadWindOffSetAlt = $(this).find("HeadWindOffSet").attr("Altitude"); HeadWindOffSetRes = $(this).find("HeadWindOffSet").attr("Result"); DisTTime = $(this).find("DisT").attr("Time"); DisTAlt = $(this).find("DisT").attr("Altitude"); DisTRes = $(this).find("DisT").attr("Result"); SafeError = $(this).find("Safe").attr("Error"); // Build row HTML data and store in string mydata = BuildStudentHTML( LookUpTime,LookUpAlt,LookUpRes, TurnLeftTime,TurnLeftAlt,TurnLeftRes, TurnRightTime,TurnRightAlt,TurnRightRes, Flare1Time,Flare1Alt,Flare1Res, Flare2Error, CutAwayTime,CutAwayAlt,CutAwayRes, BerganTime,BerganAlt,BerganRes, TurnWindTime,TurnWindAlt,TurnWindRes, Flare3Error, HeadWindOffSetTime,HeadWindOffSetAlt,HeadWindOffSetRes, DisTTime,DisTAlt,DisTRes, SafeError); myHTMLOutput = myHTMLOutput + mydata; }); myHTMLOutput += '&lt;/table&gt;'; // Update the DIV called Content Area with the HTML string $("#ContentArea").append(myHTMLOutput); }); }); function BuildStudentHTML( LookUpTime,LookUpAlt,LookUpRes, TurnLeftTime,TurnLeftAlt,TurnLeftRes, TurnRightTime,TurnRightAlt,TurnRightRes, Flare1Time,Flare1Alt,Flare1Res, Flare2Error, CutAwayTime,CutAwayAlt,CutAwayRes, BerganTime,BerganAlt,BerganRes, TurnWindTime,TurnWindAlt,TurnWindRes, Flare3Error, HeadWindOffSetTime,HeadWindOffSetAlt,HeadWindOffSetRes, DisTTime,DisTAlt,DisTRes, SafeError){ // Build HTML string and return output = ''; output += '&lt;tr&gt;'; output += '&lt;td&gt;'+ LookUpTime +'&lt;br /&gt;'+ LookUpAlt +'&lt;br /&gt;'+ LookUpRes + '&lt;/td&gt;'; output += '&lt;td&gt;'+ TurnLeftTime +'&lt;br /&gt;'+ TurnLeftAlt +'&lt;br /&gt;'+ TurnLeftRes + '&lt;/td&gt;'; output += '&lt;td&gt;'+ TurnRightTime +'&lt;br /&gt;'+ TurnRightAlt +'&lt;br /&gt;'+ TurnRightRes + '&lt;/td&gt;'; output += '&lt;td&gt;'+ Flare1Time +'&lt;br /&gt;'+ Flare1Alt +'&lt;br /&gt;'+ Flare1Res + '&lt;/td&gt;'; output += '&lt;td&gt;'+ Flare2Error + '&lt;/td&gt;'; output += '&lt;td&gt;'+ CutAwayTime +'&lt;br /&gt;'+ CutAwayAlt +'&lt;br /&gt;'+ CutAwayRes + '&lt;/td&gt;'; output += '&lt;td&gt;'+ BerganTime +'&lt;br /&gt;'+ BerganAlt +'&lt;br /&gt;'+ BerganRes + '&lt;/td&gt;'; output += '&lt;td&gt;'+ TurnWindTime +'&lt;br /&gt;'+ TurnWindAlt +'&lt;br /&gt;'+ TurnWindRes + '&lt;/td&gt;'; output += '&lt;td&gt;'+ Flare3Error + '&lt;/td&gt;'; output += '&lt;td&gt;'+ HeadWindOffSetTime +'&lt;br /&gt;'+ HeadWindOffSetAlt +'&lt;br /&gt;'+ HeadWindOffSetRes + '&lt;/td&gt;'; output += '&lt;td&gt;'+ DisTTime +'&lt;br /&gt;'+ DisTAlt +'&lt;br /&gt;'+ DisTRes + '&lt;/td&gt;'; output += '&lt;td&gt;'+ SafeError + '&lt;/td&gt;'; output += '&lt;/tr&gt;'; return output; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmarkwalker_
    1. USmarkwalker_
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POReally simple XML attributes displayed in an HTML table w/ jQuery - this should be easy
      1. USCurt
      1. VTFavorite
    1. COManaged to get it working, although not in IE yet. It would seem like I wasn't able to access that top level XML tag so had to create another within it and that worked. If anyone knows the problem with accessing that top level I'd appreciate knowing what thats about :)
      singulars
      1. POReally simple XML attributes displayed in an HTML table w/ jQuery - this should be easy
      1. USmarkwalker_
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload