Solved

Table sorting with XML / HTML

Posted on 2013-06-21
8
237 Views
Last Modified: 2013-07-08
I'm still struggling with being able to work with XML and HTML.

I'm using the coding from: http://www.w3schools.com/xml/xml_to_html.asp

When I code it out and add in the proper path, element and sub elements I can only pull 3 rows max of all the items... The second I add in a 4th, 5th or 10th request to pull a sub element, the entire table breaks. I'm looked over the coding multiple times to insure my <td>, </td> are proper, but I'm still baffled...

Code working: http://tinyurl.com/l45z3mn

Code NOT working: http://tinyurl.com/mpme3es

Please feel free to crack open the html docs to see my code structure, the XML source, etc...

Any help would be appreciated!!! :-(

After this I'll then need to learn how to sort the menu, then stylize it!! Haha. Is there a program I can use to make this all easier???
0
Comment
Question by:MONSTERSTYLE
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39267733
The 'engine' node on the 3rd record is empty, you need to check for this. In general I would use a specific function for this:
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("vehicle");
for (i=0;i<x.length;i++)
  {
  document.write("<tr><td>");
  document.write(getNode0Text0(x[i], "carno"));
  document.write("</td><td>");
  document.write(getNode0Text0(x[i], "year"));
  document.write("</td><td>");
  document.write(getNode0Text0(x[i], "make"));
  document.write("</td><td>");
  document.write(getNode0Text0(x[i], "model"));
  document.write("</td><td>");
  document.write(getNode0Text0(x[i], "engine"));
  document.write("</td></tr>");
  }
document.write("</table>");

function getNode0Text0(oNode, sName)
  {
  var sReturnValue = "N/A"; // just a default value
  var oSubNodes = oNode.getElementsByTagName(sName);
  if (oSubNodes.length > 0)
    {
    var oChildNodes = oSubNodes[0].childNodes;
    if (oChildNodes.length > 0)
      {
      sReturnValue = oChildNodes[0].nodeValue;
      }
    }
  return sReturnValue;
  }

Open in new window

Note that this resembles your current output, if you wanted to use this in general, you should look at all subnodes instead of only the first.
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39267736
More general things you ask for like style could be done more easily with xsl but that's a big step ahead. For starters I would say, look at CSS: you can add class attributes to your current html output and define the style in CSS. Sorting can be done in javascript before or after you put it in a table, I would say it depends on whether you want to do it once or let the user click on the table header for example. There are plenty scripts to be found for this on the net.
0
 

Author Comment

by:MONSTERSTYLE
ID: 39268359
robert, how would I go about modifying the subnode and getting this to function properly? :( I'm in a time crunch and the company who said they were providing this for us lied, so we're in a awkward position.
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39268366
I don't understand. With the code I posted you should be able to process the empty nodes and see the text "N/A", even if it doesn't exist altogether. Is that not working for you?
0
 

Author Comment

by:MONSTERSTYLE
ID: 39268504
Wow, the code worked flawlessly!! This morning when I read over your posts I assumed it was my code you were pasting in. I'm stoked!! Is there anyway I can hire you to finish the rest? Such as setting up sorting, allow the photos to appear, and a few other things? I've been stressing out about this for days and you obviously know what you're doing. I've added you on Facebook, can you accept and we can discuss more? I/my company can pay via Paypal.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39268795
I don't need money for helping, just post some more info here unless it's sensitive?

The table already has some styling and like I said sorting shouldn't be a problem, for example using http://www.kryogenix.org/code/browser/sorttable/
0
 
LVL 82

Expert Comment

by:hielo
ID: 39280066
>>I'm in a time crunch
Post your info in your profile.
0
 

Author Closing Comment

by:MONSTERSTYLE
ID: 39309336
Robert went beyond EE to help me via Facebook. He showed extreme talent and understanding of writing code. We need more good people like him!!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
PDF Turn Look 7 37
Difference between Highcharts and Mapbox 10 45
How can I use javascript variable in mysql query 21 46
Doubt with angularJs with PHP 4 22
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question