Jump to content

How do I use javascript to query XML and use filters from user to display table accordingly?


Recommended Posts

Hello, I have an XML file called cookbook.xml as well as an XSL file linked to it, called cookbook.xsl that presents all the information found in the .xml file in an html table (with headings, seperate cells, etc.) Now I want to create an html file that will presenet the above complete table on page load, as well as some query fields above that table, so that the table is refreshed according to a user's input (filters..) More specifically: XML file: For each cookbook (represented by a recipestories element), the file contains information about its title, author(s), year and page numbers, among others As for the HTML file, the user should be able to filter the results appearing on the table as follows:

  1. for each of author, title and year, the user should be able to enter a value (e.g. 1990) as well as an operator (e.g., <, =, >) and retrieve the cookbooks satisfying the corresponding conditions (e.g., year=1990). The user should be able to enter conditions for any combination of these three properties. If no conditions are entered, all cookbooks should be returned.
  2. For author and title, the user should also be able to enter "contains" as an operator, along with some value. In this case, the system should return cookbooks where the corresponding author or title contains the value entered as a substring. For example, I might want all papers where the title contains the string "choco".
  3. The user should also be able to search for cookbookss by their number of authors. Here too an operator and value should be allowed (e.g., all cookbooks with at least 3 authors).
  4. The user should be able to specify the property (author, title, pages or year) by which the returned cookbooks should be sorted.

This is where I am right now:

<html> <script type="text/javascript"> function loadXML(file) //function for loading XML files{  var moz = (typeof document.implementation.createDocument != 'undefined');  var ie =  (typeof window.ActiveXObject != 'undefined');  var xmlDoc;   if (moz)	xmlDoc = document.implementation.createDocument("", "", null);  else if (ie)	xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  xmlDoc.async = false;  xmlDoc.load(file);  return xmlDoc;} </script> <script type="text/javascript"> var xmlDoc = loadXML("cookbooks.xml");var stylesheet = loadXML("cookbooks.xsl");var moz = (typeof document.implementation.createDocument != 'undefined');var ie =  (typeof window.ActiveXObject != 'undefined'); if (moz){  var nsResolver = stylesheet.createNSResolver(stylesheet.ownerDocument == null ?  				   stylesheet.documentElement:stylesheet.ownerDocument.documentElement);   ..........} else if (ie){	var value = stylesheet.selectSingleNode(............} </script> </html>

that is pretty basic I know, but I'm also pretty lost and desperate and I don't know where to start from! Do I create an html form with the fields for the queries and a submit button? Do I then take all the values entered in the above form and "spread them out" in that NSResolver function I'm trying to create above, evaluate them and reapply the stylesheet to the xml file accordingly? Help! :)

Link to comment
Share on other sites

Add your inputs where you want them, it's not necessary to use an actual form tag and submit button if everything is going to be handled with Javascript. Instead of having people type in operators, I would suggest putting operators in a dropdown where they select the one they want to use and then type in the value in another field.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...