asked on

Search on selection from multiple spry menus

I am using Dreamweaver CS3 to build a website that allows users to search a MySql database for commercial white papers. I need ideas to point me to the right direction. Here is my situation. Any help is appreicate.

In page one of my site, I have nine major product categories with photos so that users will know what kind of products are covered. Under each major category, there are several minor categories to further define the products.

Now I want to do a search page so that when a user clicks one minor category from a drop down menu, all articles related to this minor category will show up.

I researched online for solutions, and only found answers that apply to one drop down menu instead of multiple. Like this example http://www.w3schools.com/php/php_ajax_database.asp

In my case, there are nearly 100 minor categories under 9 different drop downs. Do I need to repeat such scrpits in the example article 9 or even 100 times? Any simpler way to achieve this?

In addition, all articles are talking of regular drop down menus created by code like
<select name="category" id="category">
<option value="facility">Facility</option>
......

But in my situation, the code Dreamweaver Spry Menu gave is like:

<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Apparels & Garments</a>
<ul>
<li><a href="#">Aprons</a></li>
......
</ul>
</li>
</ul>

Do I need to remove the Spry Menu and re-do the drop downs using the conventional method? I mean the <select> and <option value> tags?

I have yet to work on my search page code based on advice you may provide. My table columns are:
ID / Title / URL / Author / Organization / Date / Major_category / Minor_category

Jason C. Levine

Hi nnrsc,

I think the more appropriate example is this one:

http://labs.adobe.com/technologies/spry/samples/data_region/DataSetMasterDetailSample.html

The above shows you how to use one Spry list to filter the other. You would just need to extend the concept however many levels deep are required.

nnrsc

ASKER

Hi jason1178,

Thanks for the advice. The example looks somewhat different from my situation. Do you mind take a look at my page http://www.nnsourcebook.com/Cleanroom.html

For some reason I chose to use the current drop-down style instead of the ones like the Adobe example. If you move the mouse over to the Cleaning & Sterilization section and click the Wipers & Wipes at the very bottom of the drop-down, you will get in an article page. This page is what my question about. For this particular page, I manually inserted hyperlinks for articles on wipers and wipes. As I expand the scope to have all other sub-categories covered, I figure using MySql query might be a better way to go as I am already building such a database.

Any further ideas?

Jason C. Levine

I guess I am not understanding your question, then.

You can use Spry in the same way you use PHP/MySQL. It can filter lists based on selections

nnrsc

ASKER

I used the scriptes in this example http://www.w3schools.com/php/php_ajax_database.asp to get basic some sense of how to tackle my situation. But haven't figured out everything yet. Below are the codes I just copied and modified to suit my goal.

One major question is when a drop-down menu is created in conventional way using <select> and <option value> tags, like the below test1.html, you can define in the form
<select name="users" onChange="showUser(this.value)">
But what to use in Spry? There is no <select>, just:

<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Apparels</a>
<ul>
<li><a href="#">Aprons</a></li>
............................

Where or how shall I incorporate the onChange="showUser(this.value) in the form?

1. Code for test1.html
 
<html>
<head>
<script type="text/javascript" src="selectuser1.js"></script>
</head>
<body>
 
<form>
Select a User:
<select name="users" onChange="showUser(this.value)">
<option value="Peter">Peter</option>
<option value="Lois">Lois</option>
<option value="Glenn">Glenn</option>
<option value="Joseph">Joseph</option>
</select>
 
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
 
</body>
</html>
 
2. Code for selectuser1.js
 
var xmlhttp;
 
function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="getuser1.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
 
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
 
3. Code for getuser1.php
 
<?php
$q=$_GET["q"];
 
$con=mysql_connect('localhost','username','pwd');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
 
mysql_select_db('db') or die(mysql_error()); 
 
$sql="SELECT * FROM WP WHERE match (Title) against ('".$q."')";
 
$result = mysql_query($sql);
 
echo "<table border='1'>
<tr>
<th>Title</th>
<th>Source</th>
</tr>";
 
while($row = mysql_fetch_array($result))
  {
 echo "<tr>";
  echo "<td>" . $row['Title'] . "</td>";
  echo "<td>" . $row['Source_URL'] . "</td>";
  echo "</tr>";
  }
echo "</table>";
 
mysql_close($con);
?>

Open in new window

ASKER CERTIFIED SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nnrsc

ASKER

Okay. I will play with the Adobe examples and see if I works out. Appreciate the help.