Solved

Menu and Search using data in an External File

Posted on 2004-11-02
189 Views
Last Modified: 2009-12-16
Hi Experts

To get an answer to my problem I have created an example situation.

I have an external .js file that holds the details of a number of properties, address, price etc.

This is extracted by some JavaScript to produce a list of these properties on a web page.

What I would like to do is:

1) Use the data from a particular field in each record to create a seperate menu in alphabetic order.

2) As there may be multiple instances of the data, limit it to appearing only once in the menu.

3) Make the menu item a clickable link which will then limit the records shown to only those chosen by the link.

Here is the code for both files:

--- The external .js file  (properties.js) ---
var data = new Array();

data[0] = "Chester Square | Belgravia | £3,450,000 |  Freehold | An opportunity to acquire this magnificent and superbly refurbished family house built circa 1840 and situated at the eastern end of this prestigious Belgravia garden square, set in one of London's premier locations. The accommodation comprises entrance hall, dining room, reception room, kitchen/breakfast room, six bedrooms, family room, study/library, study, utility room, en-suite shower room, two en suite bath/shower rooms, bathroom, cloakroom, conservatory, roof terrace and balcony. | "
 
data[1] = "Audley Square | Mayfair | £5,750,000 | Freehold | An impressive ambassadorial Grade II listed 18th century freehold residence with private garden and garaging located in the heart of Mayfair with views over Tilney Street towards Hyde Park. The property is conveniently located close to the comprehensive shopping and transport facilities that Mayfair has to offer. | "
 
data[2] = "Hereford House, North Road | Mayfair | £2,150,000 | Leasehold | A recently refurbished fourth floor (with lift) of a portered building off Park Lane, this impressive three bedroom apartment offers vast living space. The property comprises a 24ft reception room with natural stone fireplace, spacious dining room, stylish kitchen, sumptuous master suite and two further bedrooms both with en suite bathrooms. | "

data[3] = "Eaton Place | Belgravia | £1,985,000 | Leasehold | An elegant and immaculate three bedroom maisonette set on the third and fourth floors of this imposing period building. The property has recently been refurbished to a very high standard and comprises entrance hall, L-shaped drawing/dining room, kitchen, master bedroom, dressing room, two further bedrooms, cloakroom, two en-suite bathrooms, shower room and direct lift access. Ideally situated in this prestigious Belgravia address, the property is within easy access of a wide array of shopping, transport and entertainment facilities. | "

data[4] = "Yeomans Row | Knightsbridge | £1,750,000 | Freehold | A rare opportunity to acquire a four bedroom freehold terraced house situated in this quiet cul-de-sac off the Brompton Road in the heart of Knightsbridge. The property comprises entrance hall, dining room, eat-in-kitchen, L-shaped drawing room, four bedrooms, bathroom, cloakroom, patio garden, utility and storage in basement. | "
 
data[5] = "Warriner Gardens | Battersea | £265,000 | Share Freehold | A charming one bedroom garden flat in this fantastic location just moments from Battersea Park. The well appointed accommodation comprises reception room with bay window and stripped wood floors, double bedroom with fitted cupboards, large kitchen / diner with bay window to side, bathroom and lovely private paved garden to the rear. Warriner Gardens runs along side Prince Of Wales Drive and is within walking distance to both Battersea Park and Queenstown Road train stations and all the local amenities on Battersea Park Road. No onward chain. | "
 
data[6] = "Brompton Road | Knightsbridge | £875,000 | Leasehold | A bright and spacious apartment set on the fifth floor of this popular portered block. The property has been recently decorated and comprises entrance hall, reception room, dining hall, four bedrooms, en-suite bathroom, en-suite shower room, cloakroom, kitchen, lift and porter. Ideally situated in this prestigious address it is within easy access to the wide range of amenities of Knightsbridge. | "
 
data[7] = "Thurloe Place | Knightsbridge | £735,000 | Leasehold | A wonderfully bright and spacious second floor flat situated in this mansion block. The flat benefits from porterage and access (by separate negotiation) to the roof terrace and Thurloe Gardens. The flat comprises of two bedrooms and a study, en-suite shower room, bathroom, eat-in kitchen, utility room and large reception room. | "

data[8] = "Cale Street | Chelsea | £2,000,000 | Freehold | A rare opportunity to acquire a magnificent five bedroom period house located in this popular Chelsea Green Village, benefiting from a garden and swimming pool. The property is in good condition and comprises reception room, dining room, kitchen, five bedrooms, three en suite shower rooms, two en suite bathrooms, garden, terrace, heated swimming pool and spa. Ideally situated in this prestigious address, it is within easy access to the wide range of amenities available in Chelsea. | "
 
data[9] = "North Audley Street | Mayfair | £2,200,000 | Leasehold | A grand second floor family apartment with high ceilings and views towards Grosvenor Square. The apartment has been modernised over recent years and is beautifully presented. | "
 
data[10] = "Cheyne Walk | Chelsea | £999,000 | Share Freehold | A bright and spacious fourth floor three bedroom apartment set in this prestigious portered block. The property is offered in good condition throughout and comprises entrance hall, reception room, dining area, open plan kitchen, master bedroom with en-suite bathroom, two further bedrooms and a shower room. Further benefits include lift, 24 hour porterage, underground parking space and access to communal gardens. Ideally situated within easy access to the wide range of amenities available in Chelsea with the added bonus of amazing river views. | "
 
data[11] = "Warriner Gardens | Battersea | £275,000 | Leasehold | A bright well presented top floor two bedroom flat in this popular road running parallel behind Battersea Park. This split level property comprises reception room with bay window, kitchen / breakfast room, master bedroom with fitted cupboards, bedroom, bathroom and access to large loft space. Warriner Gardens runs parallel to Prince Of Wales Drive and is conveniently located for access to the open spaces of Battersea Park. Transport is provided by way of Battersea Park station and Queenstown Road. | "

--- The HTML file (properties.htm) ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<title>Properties For Sale</title>

<script language="JavaScript" src="properties.js"></script>

<script language="JavaScript">
// Create a Table from a JavaScript Array script by lil_Puffball at http://www.experts-exchange.com //

for(i=0;i<data.length;i++){data[i]=data[i].split(" | ");}

for(i=0;i<data.length;i++){data[i][0]="<b>"+data[i][0]+", "+data[i][1]+"</b>";}

for(i=0;i<data.length;i++){data[i][1]=" ";}
for(i=0;i<data.length;i++){data[i][2]=""+data[i][2]+" - "+data[i][3]+"";}
for(i=0;i<data.length;i++){data[i][3]=" ";}
//for(i=0;i<data.length;i++){data[i][4]=" ";}
for(i=0;i<data.length;i++){data[i][5]="<hr>";}

function createTable(){
  var numcols=1;
  var numrows=data[0].length,trow,tcell;
  var tbl=document.getElementById("container").firstChild;
  for(n=0;n<data.length;n+=numcols){
    for(i=0;i<numrows;i++){
      trow=document.createElement("tr");
      for(j=0;j<numcols;j++){
        tcell=document.createElement("td");
        if(!data[n+j]){tcell.innerHTML="";}
        else{tcell.innerHTML=data[n+j][i];}
        trow.appendChild(tcell);
      }
      tbl.appendChild(trow);
    }
  }
}


</script>

</head>

<body onload="createTable()">

<table id="container" align="center" cellspacing="0" cellpadding="0" border="0" width="400"><tbody></tbody></table>

</body>
</html>


I want to use the information in data[i][1] of each record for the menu system. It doesn't matter if the menu needs to be a seperate html page that will be in a frame or iframe

I realise that this may be a little difficult, so I'm putting ALL my points on this one. I hope it makes sense what I'm trying to do and if more clarification is required, please ask.

Many thanks

Pantyboy
0
Question by:Pantyboy
    12 Comments
     
    LVL 19

    Expert Comment

    by:dakyd
    Will this work?  I added a couple of functions to populate the options in the select and to filter the table.  I also modified the external properties.js file (there's no need for the extra "|" at the end of each data item) and the createTable() function to simplify the script, it's actually a bit more efficient now.  Hope it helps.

    / *properties.js */
    var data = new Array();

    data[0] = "Chester Square | Belgravia | £3,450,000 |  Freehold | An opportunity to acquire this magnificent and superbly refurbished family house built circa 1840 and situated at the eastern end of this prestigious Belgravia garden square, set in one of London's premier locations. The accommodation comprises entrance hall, dining room, reception room, kitchen/breakfast room, six bedrooms, family room, study/library, study, utility room, en-suite shower room, two en suite bath/shower rooms, bathroom, cloakroom, conservatory, roof terrace and balcony. ";
     
    data[1] = "Audley Square | Mayfair | £5,750,000 | Freehold | An impressive ambassadorial Grade II listed 18th century freehold residence with private garden and garaging located in the heart of Mayfair with views over Tilney Street towards Hyde Park. The property is conveniently located close to the comprehensive shopping and transport facilities that Mayfair has to offer. ";
     
    data[2] = "Hereford House, North Road | Mayfair | £2,150,000 | Leasehold | A recently refurbished fourth floor (with lift) of a portered building off Park Lane, this impressive three bedroom apartment offers vast living space. The property comprises a 24ft reception room with natural stone fireplace, spacious dining room, stylish kitchen, sumptuous master suite and two further bedrooms both with en suite bathrooms. ";

    data[3] = "Eaton Place | Belgravia | £1,985,000 | Leasehold | An elegant and immaculate three bedroom maisonette set on the third and fourth floors of this imposing period building. The property has recently been refurbished to a very high standard and comprises entrance hall, L-shaped drawing/dining room, kitchen, master bedroom, dressing room, two further bedrooms, cloakroom, two en-suite bathrooms, shower room and direct lift access. Ideally situated in this prestigious Belgravia address, the property is within easy access of a wide array of shopping, transport and entertainment facilities. ";

    data[4] = "Yeomans Row | Knightsbridge | £1,750,000 | Freehold | A rare opportunity to acquire a four bedroom freehold terraced house situated in this quiet cul-de-sac off the Brompton Road in the heart of Knightsbridge. The property comprises entrance hall, dining room, eat-in-kitchen, L-shaped drawing room, four bedrooms, bathroom, cloakroom, patio garden, utility and storage in basement. ";
     
    data[5] = "Warriner Gardens | Battersea | £265,000 | Share Freehold | A charming one bedroom garden flat in this fantastic location just moments from Battersea Park. The well appointed accommodation comprises reception room with bay window and stripped wood floors, double bedroom with fitted cupboards, large kitchen / diner with bay window to side, bathroom and lovely private paved garden to the rear. Warriner Gardens runs along side Prince Of Wales Drive and is within walking distance to both Battersea Park and Queenstown Road train stations and all the local amenities on Battersea Park Road. No onward chain. ";
     
    data[6] = "Brompton Road | Knightsbridge | £875,000 | Leasehold | A bright and spacious apartment set on the fifth floor of this popular portered block. The property has been recently decorated and comprises entrance hall, reception room, dining hall, four bedrooms, en-suite bathroom, en-suite shower room, cloakroom, kitchen, lift and porter. Ideally situated in this prestigious address it is within easy access to the wide range of amenities of Knightsbridge. ";
     
    data[7] = "Thurloe Place | Knightsbridge | £735,000 | Leasehold | A wonderfully bright and spacious second floor flat situated in this mansion block. The flat benefits from porterage and access (by separate negotiation) to the roof terrace and Thurloe Gardens. The flat comprises of two bedrooms and a study, en-suite shower room, bathroom, eat-in kitchen, utility room and large reception room. ";

    data[8] = "Cale Street | Chelsea | £2,000,000 | Freehold | A rare opportunity to acquire a magnificent five bedroom period house located in this popular Chelsea Green Village, benefiting from a garden and swimming pool. The property is in good condition and comprises reception room, dining room, kitchen, five bedrooms, three en suite shower rooms, two en suite bathrooms, garden, terrace, heated swimming pool and spa. Ideally situated in this prestigious address, it is within easy access to the wide range of amenities available in Chelsea. ";
     
    data[9] = "North Audley Street | Mayfair | £2,200,000 | Leasehold | A grand second floor family apartment with high ceilings and views towards Grosvenor Square. The apartment has been modernised over recent years and is beautifully presented. ";
     
    data[10] = "Cheyne Walk | Chelsea | £999,000 | Share Freehold | A bright and spacious fourth floor three bedroom apartment set in this prestigious portered block. The property is offered in good condition throughout and comprises entrance hall, reception room, dining area, open plan kitchen, master bedroom with en-suite bathroom, two further bedrooms and a shower room. Further benefits include lift, 24 hour porterage, underground parking space and access to communal gardens. Ideally situated within easy access to the wide range of amenities available in Chelsea with the added bonus of amazing river views. ";
     
    data[11] = "Warriner Gardens | Battersea | £275,000 | Leasehold | A bright well presented top floor two bedroom flat in this popular road running parallel behind Battersea Park. This split level property comprises reception room with bay window, kitchen / breakfast room, master bedroom with fitted cupboards, bedroom, bathroom and access to large loft space. Warriner Gardens runs parallel to Prince Of Wales Drive and is conveniently located for access to the open spaces of Battersea Park. Transport is provided by way of Battersea Park station and Queenstown Road. ";

    /* the page */
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>

    <title>Properties For Sale</title>
    <script type="text/javascript" src="properties.js"></script>
    <script type="text/javascript">
    // Create a Table from a JavaScript Array script by lil_Puffball at http://www.experts-exchange.com //

    var opts = new Array();
    for(i=0, n=data.length; i < n; i++)
    {
      // first get parts of array
      var parts = data[i].split(" | ");

      // create new entry for data[i]
      var temp = new Array();
      temp[0] = "<b>" + parts[0] + ", " + parts[1] + "</b>";
      temp[1] = parts[2] + " - " + parts[3];
      temp[2] = parts[4];
      temp[3] = "<hr>";

      // store temp back into data
      data[i] = temp;

      // store unique options for drop down
      opts[parts[1]] = 1;
    }

    function createTable(arr) {
      var numcols=1;
      var numrows=arr[0].length, trow, tcell;
      tbl=document.getElementById("container").firstChild;

      // first clear all rows (if any present)
      for (var i = 0, n = tbl.rows.length; i < n; i ++)
        tbl.removeChild(tbl.rows[0]);

      // now re-build table
      for(var n=0;n<arr.length;n+=numcols){
        for(var i=0;i<numrows;i++){
          trow=document.createElement("tr");
          for(var j=0;j<numcols;j++){
            tcell=document.createElement("td");
            if(!arr[n+j]){tcell.innerHTML="";}
            else{tcell.innerHTML=arr[n+j][i];}
            trow.appendChild(tcell);
          }
          tbl.appendChild(trow);
        }
      }
    }

    function createOptions()
    {
      var sel = document.getElementById("theSel");
      sel.options[0] = new Option("Please Select a Location", ",");
      for (var i in opts)
        sel.options[sel.options.length] = new Option(i, i);
      sel.onchange = filter;
    }

    function filter()
    {
      var key = this.options[this.options.selectedIndex].value;
      var includeArr = new Array();
      for (var i = 0, n = data.length; i < n; i ++)
      {
        var location = data[i][0];
        if (location.indexOf(key) > -1)
          includeArr[includeArr.length] = data[i];
      }
      createTable(includeArr);
    }
    </script>

    </head>

    <body onload="createTable(data); createOptions();">

    <select id="theSel"></select>

    <table id="container" align="center" cellspacing="0" cellpadding="0" border="0" width="400"><tbody></tbody></table>

    </body>
    </html>
    0
     
    LVL 1

    Author Comment

    by:Pantyboy
    Hi dakyd

    This works perfectly.

    Just a few of questions if I may. As I would prefer not to use an option menu if possible (I know, I just being awkward):

    1) Is it possible to put the menu in alphabetic order?

    2) Can the menu be a list of links so that html and style sheets can be used to format the look?
    ie: <a href='...' class='classname'>menu item 1</a>
         <a href='...' class='classname'>menu item 2</a>
         <a href='...' class='classname'>menu item 3</a>
         ...
         ...

    3) if question 2 is possible, can they be placed inside another table for easier formatting, so as to have the menu and selections side-by-side?

    Kind regards

    Pantyboy

    0
     
    LVL 19

    Expert Comment

    by:dakyd
    Sorry I didn't notice your post earlier, but give the script below a shot.
    1) Yes, you can alphabetize the links in the menu.  I remember reading that in your question, but somehow I forgot, sorry about that.
    2 and 3) I created the links, you'll notice that the section that createOptions() now creates rows and cells that populate the table with id "myOpts".  To be honest, though, you can probably create nicer formatting without the tables and some CSS instead.  Regardless, I think that should cover it, let me know if you still have any questions.  Hope that helps.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>

    <title>Properties For Sale</title>
    <style type="text/css">
    #myOpts {
      float: left;
      width: 150px;
    }
    </style>
    <script type="text/javascript" src="properties.js"></script>
    <script type="text/javascript">
    // Create a Table from a JavaScript Array script by lil_Puffball at http://www.experts-exchange.com //

    var opts = new Array();
    for(i=0, n=data.length; i < n; i++)
    {
      // first get parts of array
      var parts = data[i].split(" | ");

      // create new entry for data[i]
      var temp = new Array();
      temp[0] = "<b>" + parts[0] + ", " + parts[1] + "</b>";
      temp[1] = parts[2] + " - " + parts[3];
      temp[2] = parts[4];
      temp[3] = "<hr>";

      // store temp back into data
      data[i] = temp;

      // store unique options for drop down
      opts[parts[1]] = 1;
    }

    function createTable(arr) {
      var numcols=1;
      var numrows=arr[0].length, trow, tcell;
      tbl=document.getElementById("container").firstChild;

      // first clear all rows (if any present)
      for (var i = 0, n = tbl.rows.length; i < n; i ++)
        tbl.removeChild(tbl.rows[0]);

      // now re-build table
      for(var n=0;n<arr.length;n+=numcols){
        for(var i=0;i<numrows;i++){
          trow=document.createElement("tr");
          for(var j=0;j<numcols;j++){
            tcell=document.createElement("td");
            if(!arr[n+j]){tcell.innerHTML="";}
            else{tcell.innerHTML=arr[n+j][i];}
            trow.appendChild(tcell);
          }
          tbl.appendChild(trow);
        }
      }
    }

    function createOptions()
    {
      var obj = document.getElementById("myOpts").getElementsByTagName("tbody")[0];

      var temp = new Array();
      for (var i in opts)
        temp[temp.length] = i;
      temp.sort();

      for (var i = 0, n = temp.length; i < n; i++)
      {
        var myRow = document.createElement("tr");
        var myCell = document.createElement("td");

        var myAnchor = document.createElement("a");
        myAnchor.href = "#";
        myAnchor.className = "theClassName";
        myAnchor.innerHTML = temp[i];
        myAnchor.onclick = filter;
        myCell.appendChild(myAnchor);
        myRow.appendChild(myCell);
        obj.appendChild(myRow);
      }
    }

    function filter()
    {
      var key = this.innerHTML;
      var includeArr = new Array();
      for (var i = 0, n = data.length; i < n; i ++)
      {
        var location = data[i][0];
        if (location.indexOf(key) > -1)
          includeArr[includeArr.length] = data[i];
      }
      createTable(includeArr);
    }
    </script>

    </head>

    <body onload="createTable(data); createOptions();">

    <table id="myOpts"><tbody>
      <tr>
        <td><a href="#" onclick="createTable(data)">ALL</a></td>
      </tr>
    </tbody></table>

    <table id="container" align="center" cellspacing="0" cellpadding="0" border="0" width="400"><tbody></tbody></table>

    </body>
    </html>
    0
     
    LVL 1

    Author Comment

    by:Pantyboy
    Hello again dakyd

    Many, many thanks for the changes. This is exactly what I'm looking for.

    I'm afraid I've got another couple of questions for you though, if you wouldn't mind.

    In the menu, you have created a link 'All' to show the whole list. Is there some way for that link to appear as the last item on the menu?

    Also, after the user has clicked a menu link and gets the 'filtered' list, if I wanted to sort the list by, for example, the price (highest first or lowest first, whichever is my choice, not the users), could that be done, and if so, how?

    Sorry to throw in another couple of questions, even though you have answered my question, but these came up as I saw the results.

    Many many, thanks once again

    Pantyboy
    0
     
    LVL 19

    Expert Comment

    by:dakyd
    Give this a shot, think it's what you're looking for.  Hope that helps.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>

    <title>Properties For Sale</title>
    <style type="text/css">
    #myOpts {
      float: left;
      width: 150px;
    }

    #firstSortLink {
      float: left;
    }

    #secondSortLink {
      float: right;
    }
    </style>
    <script type="text/javascript" src="properties.js"></script>
    <script type="text/javascript">
    // Create a Table from a JavaScript Array script by lil_Puffball at http://www.experts-exchange.com //

    var opts = new Array();
    for(i=0, n=data.length; i < n; i++)
    {
      // first get parts of array
      var parts = data[i].split(" | ");

      // create new entry for data[i]
      var temp = new Array();
      temp[0] = "<b>" + parts[0] + ", " + parts[1] + "</b>";
      temp[1] = parts[2] + " - " + parts[3];
      temp[2] = parts[4];
      temp[3] = "<hr>";

      // store temp back into data
      data[i] = temp;

      // store unique options for drop down
      opts[parts[1]] = 1;
    }

    function createTable(arr, sortType) {
      var numcols=1;
      var numrows=arr[0].length, trow, tcell;
      tbl=document.getElementById("container").firstChild;

      // first clear all rows except sorter row
      for (var i = 0, n = tbl.rows.length-1; i < n; i ++)
        tbl.removeChild(tbl.rows[1]);

      // sort array by price
      if (sortType == "ascending")
        arr.sort(mySort);
      else if (sortType == "descending")
        arr.sort(myReverseSort);

      // now re-build table
      for(var n=0;n<arr.length;n+=numcols){
        for(var i=0;i<numrows;i++){
          trow=document.createElement("tr");
          for(var j=0;j<numcols;j++){
            tcell=document.createElement("td");
            if(!arr[n+j]){tcell.innerHTML="";}
            else{tcell.innerHTML=arr[n+j][i];}
            trow.appendChild(tcell);
          }
          tbl.appendChild(trow);
        }
      }
    }

    function createOptions()
    {
      var obj = document.getElementById("myOpts").getElementsByTagName("tbody")[0];

      var temp = new Array();
      for (var i in opts)
        temp[temp.length] = i;
      temp.sort();

      for (var i = 0, n = temp.length; i < n; i++)
      {
        var myRow = document.createElement("tr");
        var myCell = document.createElement("td");

        var myAnchor = document.createElement("a");
        myAnchor.href = "#";
        myAnchor.className = "theClassName";
        myAnchor.innerHTML = temp[i];
        myAnchor.onclick = filter;
        myCell.appendChild(myAnchor);
        myRow.appendChild(myCell);
        obj.appendChild(myRow);
      }

      // add in last link for "ALL"
      var myRow = document.createElement("tr");
      var myCell = document.createElement("td");
      var myAnchor = document.createElement("a");
      myAnchor.href = "#";
      myAnchor.className = "theClassName";
      myAnchor.innerHTML = "ALL";
      myAnchor.onclick = function() {includeArr = data; createTable(data);};
      myCell.appendChild(myAnchor);
      myRow.appendChild(myCell);
      obj.appendChild(myRow);
    }

    function filter()
    {
      var key = this.innerHTML;
      includeArr = new Array();
      for (var i = 0, n = data.length; i < n; i ++)
      {
        var location = data[i][0];
        if (location.indexOf(key) > -1)
          includeArr[includeArr.length] = data[i];
      }
      createTable(includeArr);
    }

    function mySort(a, b)
    {
      var priceStrA = a[1].split("-")[0].substr(1);
      priceStrA = priceStrA.split(",").join("");
      var priceA = parseInt(priceStrA);

      var priceStrB = b[1].split("-")[0].substr(1);
      priceStrB = priceStrB.split(",").join("");
      var priceB = parseInt(priceStrB);

      if (priceA > priceB)
        return 1;
      else if (priceA == priceB)
        return 0;
      else
        return -1;
    }

    function myReverseSort(a, b)
    {
      return (-1 * mySort(a, b));
    }
    </script>

    </head>

    <body onload="includeArr = data; createTable(data, ''); createOptions();">

    <table id="myOpts"><tbody></tbody></table>

    <table id="container" align="center" cellspacing="0" cellpadding="0" border="0" width="400"><tbody>
      <tr>
        <td>
          <a href="#" onclick="createTable(includeArr, 'ascending'); return false;" id="firstSortLink">Sort from Lowest to Highest</a>
          <a href="#" onclick="createTable(includeArr, 'descending'); return false;" id="secondSortLink">Sort from Highest to Lowest</a>
        </td>
      </tr>
    </tbody></table>

    </body>
    </html>
    0
     
    LVL 1

    Author Comment

    by:Pantyboy
    Hi dakyd

    You've done it again.

    However... (there's always just one more question) if I wanted to 'hard code' whether all the lists appear ascending (or decending) in price, instead of having links, how would I do that?

    Also, I want to have a page that has only the menu and some informational blurb on it (Welcome to the website. Use the menu on the left to select... etc) but no property lists. The lists only appears after the user clicks a relevant link on the menu, could this be done and if so, how?

    I'm sorry that I have even more questions, especially after you've answered my original question and if you think enough is enough please say so.

    Many thanks yet again for your help

    Pantyboy

    PS

    I figured out how to put the 'All' link at the bottom. Just put it after the </tbody> tag. Sorry, I should have tried that first.

    P
    0
     
    LVL 1

    Author Comment

    by:Pantyboy
    Hi dakyd

    Before I waste any more of your time, I've just figured out how to 'hard code' the ascending/decending problem. I took the '...createTable(includeArr, 'ascending')' statement in the link and put it into the <body> tag in place of 'createTable(data, '')' and it works like a charm.

    However, I can't figure out the 'welcome page' thing.

    Pantyboy
    0
     
    LVL 19

    Accepted Solution

    by:
    All right, here's the last change, I think any more would be a bit much for one question.  I put a very simple welcome message, no styling or anything, just a block of text in the "welcome" div.  Put your welcome page there.  You'll want to remove the createTable() from the onload altogether so it doesn't build the table of properties when the page loads.  Also, I modified createTable() so it no longer takes a sort type - instead, that value is hard-coded into a variable named "sortType", so your property list will always be sorted by sortType.  Change it to descending if you want the properties sorted from most expensive to least expensive.  Anyhow, hope that helps.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>

    <title>Properties For Sale</title>
    <style type="text/css">
    #myOpts {
      float: left;
      width: 150px;
    }

    #firstSortLink {
      float: left;
    }

    #secondSortLink {
      float: right;
    }
    </style>
    <script type="text/javascript" src="properties.js"></script>
    <script type="text/javascript">
    // Create a Table from a JavaScript Array script by lil_Puffball at http://www.experts-exchange.com //

    var opts = new Array();
    var sortType = "ascending"; // CHANGE THIS IF WANT DIFFERENT SORT

    for(i=0, n=data.length; i < n; i++)
    {
      // first get parts of array
      var parts = data[i].split(" | ");

      // create new entry for data[i]
      var temp = new Array();
      temp[0] = "<b>" + parts[0] + ", " + parts[1] + "</b>";
      temp[1] = parts[2] + " - " + parts[3];
      temp[2] = parts[4];
      temp[3] = "<hr>";

      // store temp back into data
      data[i] = temp;

      // store unique options for drop down
      opts[parts[1]] = 1;
    }

    function createTable(arr) {
      var numcols=1;
      var numrows=arr[0].length, trow, tcell;
      tbl=document.getElementById("container").firstChild;

      // sort array by price
      if (sortType == "ascending")
        arr.sort(mySort);
      else if (sortType == "descending")
        arr.sort(myReverseSort);

      // first clear all rows except sorter row
      for (var i = 0, n = tbl.rows.length; i < n; i ++)
        tbl.removeChild(tbl.rows[0]);

      // now re-build table
      for(var n=0;n<arr.length;n+=numcols){
        for(var i=0;i<numrows;i++){
          trow=document.createElement("tr");
          for(var j=0;j<numcols;j++){
            tcell=document.createElement("td");
            if(!arr[n+j]){tcell.innerHTML="";}
            else{tcell.innerHTML=arr[n+j][i];}
            trow.appendChild(tcell);
          }
          tbl.appendChild(trow);
        }
      }

      // hide the welcome message
      document.getElementById("welcome").style.display = "none";
    }

    function createOptions()
    {
      var obj = document.getElementById("myOpts").getElementsByTagName("tbody")[0];

      var temp = new Array();
      for (var i in opts)
        temp[temp.length] = i;
      temp.sort();

      for (var i = 0, n = temp.length; i < n; i++)
      {
        var myRow = document.createElement("tr");
        var myCell = document.createElement("td");

        var myAnchor = document.createElement("a");
        myAnchor.href = "#";
        myAnchor.className = "theClassName";
        myAnchor.innerHTML = temp[i];
        myAnchor.onclick = filter;
        myCell.appendChild(myAnchor);
        myRow.appendChild(myCell);
        obj.appendChild(myRow);
      }

      // add in last link for "ALL"
      var myRow = document.createElement("tr");
      var myCell = document.createElement("td");
      var myAnchor = document.createElement("a");
      myAnchor.href = "#";
      myAnchor.className = "theClassName";
      myAnchor.innerHTML = "ALL";
      myAnchor.onclick = function() {includeArr = data; createTable(data);};
      myCell.appendChild(myAnchor);
      myRow.appendChild(myCell);
      obj.appendChild(myRow);
    }

    function filter()
    {
      var key = this.innerHTML;
      includeArr = new Array();
      for (var i = 0, n = data.length; i < n; i ++)
      {
        var location = data[i][0];
        if (location.indexOf(key) > -1)
          includeArr[includeArr.length] = data[i];
      }
      createTable(includeArr);
    }

    function mySort(a, b)
    {
      var priceStrA = a[1].split("-")[0].substr(1);
      priceStrA = priceStrA.split(",").join("");
      var priceA = parseInt(priceStrA);

      var priceStrB = b[1].split("-")[0].substr(1);
      priceStrB = priceStrB.split(",").join("");
      var priceB = parseInt(priceStrB);

      if (priceA > priceB)
        return 1;
      else if (priceA == priceB)
        return 0;
      else
        return -1;
    }

    function myReverseSort(a, b)
    {
      return (-1 * mySort(a, b));
    }
    </script>

    </head>

    <body onload="includeArr = data; createOptions();">

    <table id="myOpts"><tbody></tbody></table>

    <table id="container" align="center" cellspacing="0" cellpadding="0" border="0" width="400"><tbody></tbody></table>

    <div id="welcome">Hello, this is a quick welcome message.  It's mission, which it has chosen to accept, is to to illustrate the behavior of this page.  It is not much to look at it, as it is trying to keep a low profile.  This message will self-destruct (disappear) when you click on one of the links on the left.  G'luck.</div>
    </body>
    </html>
    0
     
    LVL 1

    Author Comment

    by:Pantyboy
    Hello once more dakyd

    You'll be pleased to know there are no more questions.

    When I asked this question, I was going to buy some points as I felt that it should have been worth 500 points. So, I've bought some and added an extra 100 for the supplemental questions. I hope that this is OK.

    Many thanks for all your help and patience.

    Very kind regards

    Pantyboy
    0
     
    LVL 1

    Author Comment

    by:Pantyboy
    Ah, I've tried to post and extra 100, but it says that only a maximum of 500 is allowed. It was worth more.

    P
    0
     
    LVL 19

    Expert Comment

    by:dakyd
    Haha, don't sweat the extra questions, I don't mind tweaking code I've provided, it was just getting to be rather lengthy, 'tis all.  Anyhow, glad to hear you got what you wanted, and thanks for the points.
    0
     
    LVL 1

    Author Comment

    by:Pantyboy
    Hi dakyd

    Once again, many thanks for your time and patience and many thanks for all the alterations. It was worth every point.

    Pantyboy
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    Hire Freelancers to Complete JavaScript Projects

    Source the talented Expert Exchange community
    for top quality work on your JavaScript projects.

    Hire the best. Collaborate easily. Get quality work.

    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    877 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

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now