Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Very newb question probably really easy involving xml and javascript

Status
Not open for further replies.
BenMiles

BenMiles

Technical User
Mar 11, 2008
12
US
Hello all,
I am trying to design a job listing page that would display all job listings, then when a user clicks on a job title it would load the corresponding description page. What I want to do is use one xml page that has the title and description like this:

Code: 
<?xml version="1.0" encoding="ISO-8859-1" ?> 
<CAREERS> 
<JOB> 
<TITLE>Director of Sales</TITLE> 
<DESC>blah blah blah</DESC> 
</JOB> 

<JOB> 
<TITLE>Graphic Designer</TITLE> 
<DESC>blah blah blah</DESC> 
</JOB> 

<JOB> 
<TITLE>Web Developer</TITLE> 
<DESC>blah blah blah</DESC> 
</JOB> 
</CAREERS>
that way someone from HR can go in and edit it without my help. I have the first page set up, very basic layout:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL] 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL] 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<body> 

<script type="text/javascript"> 
var xmlDoc=null; 
if (window.ActiveXObject) 
{// code for IE 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
} 
else if (document.implementation.createDocument) 
{// code for Mozilla, Firefox, Opera, etc. 
xmlDoc=document.implementation.createDocument("","",null); 
} 
else 
{ 
alert('Your browser cannot handle this script'); 
} 
if (xmlDoc!=null) 
{ 
xmlDoc.async=false; 
xmlDoc.load("test.xml"); 

document.write("<table>"); 

var x=xmlDoc.getElementsByTagName("JOB"); 
for (i=0;i<x.length;i++) 
{ 
document.write("<tr>"); 
document.write("<td>"); 
document.write("<a href = 'JobDesc.html'>"); 
document.write( 
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); 
document.write("</a>"); 
document.write("</td>"); 
} 
document.write("</table>"); 

} 
</script> 

</body> 

</html>

What I cant figure out is on the second html page, what do I need to code so it knows what title was clicked? I am guessing it will have to be a "if" statement, something along the lines of: "if title is clicked, display description" can anyone help me out?
Thanks!
 
Sort by date Sort by votes
How about :

Code: 
document.write("<a href = 'JobDesc.html?title="+x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue+"'>");

thes pick up the details from the url parameters within JobDesc.html.

might be better if you have an id for the job instead of the title
 
Upvote 0 Downvote
So do I need to create a seperate webpage for each job? What i would like is one html for all job descriptions and what ever the user clicks on the html pulls the appropriate desc from the xml, is that possible? also what did you mean by

Code: 
might be better if you have an id for the job instead of the title
again very newb, thanks for the help!
 
Upvote 0 Downvote
I would change your approach a bit. Load both title and description from your xml file at the start and hide the description until the job title is clicked. The following is a quick and dirty suggested implementation:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    <title>Untitled Document</title>
    <style type="text/css">
      /* initially, hide all tags with a class name of "jobDesc" */
      .jobDesc {
        display: none;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //<![CDATA[

      function hideAllJobDescriptions() {

        var allDivs = document.getElementsByTagName('div');
        for (var i=0; i <allDivs.length; i++) {
          if (allDivs[i].className == 'jobDesc') {
            allDivs[i].style.display = 'none';
          }
        }

      }

      function showJobDescription(index) {

        hideAllJobDescriptions();
        descObj = document.getElementById("jobDesc" + index);
        descObj.style.display = 'block';

      }

      var xmlDoc = null;
      if (window.ActiveXObject) {
        // code for IE
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      } else if (document.implementation.createDocument) {
        // code for Mozilla, Firefox, Opera, etc.
        xmlDoc = document.implementation.createDocument("","",null);
      } else {
        alert('Your browser cannot handle this script');
      }
      if (xmlDoc != null) {
        xmlDoc.async=false;
        xmlDoc.load("test.xml");

        document.write('<div id="job-list">');
        var x = xmlDoc.getElementsByTagName("JOB");
        var title='';
        for (i=0; i < x.length; i++) {
          document.write('<div id="jobTitle' + i + '">');
          title = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
          desc = x[i].getElementsByTagName("DESC")[0].childNodes[0].nodeValue;
          document.write('<a href="javascript:showJobDescription(\'' + i + '\')">');
          document.write(title);
          document.write('</a>');
          document.write('<div class="jobDesc" id="jobDesc' + i + '">');
          document.write(desc);
          document.write('</div>');
          document.write('</div>');
        }
        document.write('</div>');
      }
      //]]>
    </script>
  </body>
</html>

Clive
Runner_1Revised.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096
 
Upvote 0 Downvote
change your xml to:

Code: 
<?xml version="1.0" encoding="ISO-8859-1" ?> 
<CAREERS> 
<JOB> 
<ID>1</ID>
<TITLE>Director of Sales</TITLE> 
<DESC>blah blah blah</DESC> 
</JOB> 

<JOB> 
<ID>2</ID>
<TITLE>Graphic Designer</TITLE> 
<DESC>blah blah blah</DESC> 
</JOB> 

<JOB> 
<ID>3</ID>
<TITLE>Web Developer</TITLE> 
<DESC>blah blah blah</DESC> 
</JOB> 
</CAREERS>

I haven't used javascript for years, but I'm sure you can substring the window.location to grab the id (try the javascript forum)

Then use the id in your second page, and use x.selectNodes / selectSingleNode to grab your job and display the same way as above
 
Upvote 0 Downvote
No, you would not need a seperate page for each job, you would dynamically take the data you need each time the page is called, using the value passed in the url parameter.

The problem with Stretchwickster's solution is that it requires all data for all jobs to be loaded at once, then creates div's for each one, you might find that an older mac might explode if you use more than a couple of divs and a variable.
 
Upvote 0 Downvote
so if I take your change in the html you posted above and the change you made in the xml it should work or is there more to it?

Thanks alot everyone!
 
Upvote 0 Downvote
I haven't posted an exact solution, but then, this site is for advise not answers.

If you have it in you to find the answers out yourself, then yes, the solution is there, if you get stuck, just post again, people are always here to help.

From your original post, it looks like you are nearly there anyway.

Good luck.
 
Upvote 0 Downvote
With some minor changes, you can create a div-less version based on table rows.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    <title>Untitled Document</title>
    <style type="text/css">
      /* initially, hide all tags with a class name of "jobDesc" */
      .jobDesc {
        display: none;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //<![CDATA[

      function hideAllJobDescriptions() {

        var allTableRows = document.getElementsByTagName('tr');
        for (var i = 0; i < allTableRows.length; i++) {
          if (allTableRows[i].className == 'jobDesc') {
            allTableRows[i].style.display = 'none';
          }
        }

      }

      function showJobDescription(index) {

        hideAllJobDescriptions();
        descObj = document.getElementById("jobDesc" + index);
        descObj.style.display = 'table-row';

      }

      var xmlDoc = null;
      if (window.ActiveXObject) {
        // code for IE
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      } else if (document.implementation.createDocument) {
        // code for Mozilla, Firefox, Opera, etc.
        xmlDoc = document.implementation.createDocument("","",null);
      } else {
        alert('Your browser cannot handle this script');
      }
      if (xmlDoc != null) {
        xmlDoc.async=false;
        xmlDoc.load("test.xml");

        document.write('<table border="1" id="job-list">');
        var x = xmlDoc.getElementsByTagName("JOB");
        var title='';
        for (i=0; i < x.length; i++) {
          document.write('<tr id="jobTitle' + i + '">');
          title = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
          desc = x[i].getElementsByTagName("DESC")[0].childNodes[0].nodeValue;
          document.write('<td><a href="javascript:showJobDescription(\'' + i + '\')">');
          document.write(title);
          document.write('</a></td></tr>');
          document.write('<tr class="jobDesc" id="jobDesc' + i + '"><td>');
          document.write(desc);
          document.write('</td>');
          document.write('</tr>');
        }
        document.write('</table>');
      }
      //]]>
    </script>
  </body>
</html>

Clive
Runner_1Revised.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096
 
Upvote 0 Downvote
Here's a final version, which doesn't pre-load all the job descriptions and now correctly hides and shows table rows in both IE and Firefox.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    <title>Untitled Document</title>
    <style type="text/css">
      /* initially, hide all tags with a class name of "jobDesc" */
      .jobDesc {
        display: none;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //<![CDATA[

      function hideAllJobDescriptions() {

        var allTableRows = document.getElementsByTagName('tr');
        for (var i = 0; i < allTableRows.length; i++) {
          if (allTableRows[i].className == 'jobDesc') {
            allTableRows[i].style.display = 'none';
          }
        }

      }

      function showJobDescription(index) {

        hideAllJobDescriptions();
        // locate table row to insert information into
        var jobRow = document.getElementById("jobDesc" + index);
        // IE doesn't understand a display setting of 'table-row', hence
        // the workaround below
        if(navigator.appName.indexOf("Microsoft") > -1){
          jobRow.style.display = 'block';
        } else {
          jobRow.style.display = 'table-row';
        }

        if (xmlDoc != null) {
          // find appropriate JOB element
          var jobObj = xmlDoc.getElementsByTagName("JOB")[index];
          // find DESC element within appropriate JOB element
          var descObj = jobObj.getElementsByTagName("DESC")[0];
          // extract text value from DESC element
          var desc = descObj.firstChild.nodeValue;

          // find the first table cell
          var jobCell = jobRow.getElementsByTagName("td")[0];
          // insert job description in table cell
          jobCell.innerHTML = desc;
        }

      }

      var xmlDoc = null;
      if (window.ActiveXObject) {
        // code for IE
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      } else if (document.implementation.createDocument) {
        // code for Mozilla, Firefox, Opera, etc.
        xmlDoc = document.implementation.createDocument("","",null);
      } else {
        alert('Your browser cannot handle this script');
      }
      if (xmlDoc != null) {
        xmlDoc.async=false;
        xmlDoc.load("test.xml");

        document.write('<table border="1" id="job-list">');
        var x = xmlDoc.getElementsByTagName("JOB");
        var title='';
        for (i=0; i < x.length; i++) {
          document.write('<tr id="jobTitle' + i + '">');
          title = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
          document.write('<td><a href="javascript:showJobDescription(\'' + i + '\')">');
          document.write(title);
          document.write('</a></td></tr>');
          document.write('<tr class="jobDesc" id="jobDesc' + i + '"><td>');
          document.write('&nbsp;');
          document.write('</td>');
          document.write('</tr>');
        }
        document.write('</table>');
      }
      //]]>
    </script>
  </body>
</html>

Clive
Runner_1Revised.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096
 
Upvote 0 Downvote
that's really cool thanks Clive!
And Simon I am stuck, but I put a post in the javascript forum so hopefully they can help, thanks!
 
Upvote 0 Downvote
You're welcome. Does this solve your original problem? If so, I would say so in your Javascript forum post.

Clive
Runner_1Revised.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096
 
Upvote 0 Downvote
not totally because I want when a user clicks on a job title, a new window opens with the job description, do you know how that would work?
 
Upvote 0 Downvote
Ah, I understand now. I obviously didn't read your original post properly!
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    <title>Untitled Document</title>
  </head>
  <body>
    <script type="text/javascript">
      //<![CDATA[

      function showJobDescription(index) {

        if (xmlDoc != null) {
          // find appropriate JOB element
          var jobObj = xmlDoc.getElementsByTagName("JOB")[index];
          // find DESC element within appropriate JOB element
          var descObj = jobObj.getElementsByTagName("DESC")[0];
          // extract text value from DESC element
          var desc = descObj.firstChild.nodeValue;

          // create popup window
          var popupWindow = window.open('','name','height=400,width=500');
          popupWindow.document.write('<html><head><title>Job Description</title>');
          popupWindow.document.write('</head><body>');
          popupWindow.document.write('<p>' + desc + '</p>');
          popupWindow.document.write('<p><a href="javascript:self.close()">Close</a> the popup.</p>');
          popupWindow.document.write('</body></html>');
          popupWindow.document.close();

        }

      }

      var xmlDoc = null;
      if (window.ActiveXObject) {
        // code for IE
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      } else if (document.implementation.createDocument) {
        // code for Mozilla, Firefox, Opera, etc.
        xmlDoc = document.implementation.createDocument("","",null);
      } else {
        alert('Your browser cannot handle this script');
      }
      if (xmlDoc != null) {
        xmlDoc.async=false;
        xmlDoc.load("test.xml");

        document.write('<table>');
        var x = xmlDoc.getElementsByTagName("JOB");
        var title='';
        for (i=0; i < x.length; i++) {
          document.write('<tr>');
          title = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
          document.write('<td><a href="javascript:showJobDescription(\'' + i + '\')">');
          document.write(title);
          document.write('</a></td></tr>');
        }
        document.write('</table>');
      }
      //]]>
    </script>
  </body>
</html>

A good source of information is:
Clive
Runner_1Revised.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

smak1
  • Locked
  • Question
add structure to XML
Replies
0
Views
359
smak1
smak1
Bijan Borazjani
  • Locked
  • Question
XML to PDF
Replies
0
Views
419
Bijan Borazjani
Bijan Borazjani
cdr_greg
  • Locked
  • Question
Display XML Line Breaks in Microsoft Word Content Controls
Replies
0
Views
490
cdr_greg
cdr_greg
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
1
Views
387
atlopes
atlopes
dawna3
  • Locked
  • Question
exporting blog posts to XML but how to read?!
Replies
0
Views
352
dawna3
dawna3

Part and Inventory Search

Sponsor

Back
Top