Link to home
Start Free TrialLog in
Avatar of DS928
DS928Flag for United States of America

asked on

Dependent Listboxes on Webpage

I have a web[age with three listboxes.  I have the first on loading, but I am at loss on how to have the second populate dependant whats in the first and the third populate whats in the second.  I've looked around and found some examples but I just can't get my teeth into where the code goes or how the code works.  Any help is appreciated.  Thank you.  What I have...

http://www.menuhead.net/index.php

The basic code minus the visual stuff on...
index.php
<?php
    $dbc = mysql_connect('','','') 
     or die('Error connecting to MySQL server.'); 
 
	mysql_select_db('MyDB'); 
?>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
$("input:image").click(function(evt) {
evt.preventDefault();
display( $(this).val() );})
})


function display(what)
{
$.getJSON("mydoggie.php?ajax=true", { "case" : what }, function(data) {
$("#Doggie").empty();
$.each(data, function(index, objRecord) {
$("#Doggie").append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');});
		});
	}

</script>

<title>MenuHead Search</title>
</head>
    <form>
    <br />
      <div align="center">
    <table width="960" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="192"><div align="center"> <input type = "image" value = "Place" img src="Glass-Place.jpg"
    	width="177" height="168" alt="Place"/></div></td>
    <td width="192"><div align="center"> <input type = "image" value = "Cuisine" img src="Glass-Cuisine.jpg"
    	width="177" height="168" alt="Cuisine" /></div></td>
    <td width="192"><div align="center"><input type = "image" value = "City" img src="Glass-City.jpg"
    	width="177" height="168" alt="City" /></div></td>
    <td width="192"><div align="center"><input type = "image" value = "State" img src="Glass-State.jpg"
    	width="177" height="168" alt="State" /></div></td>
    <td width="192"><div align="center"><input type = "image" value = "ZipCode" img src="Glass-Zip.jpg"
    	width="177" height="168" alt="ZipCode" /></div></td>
    </tr>
    </table>
    <p><br /> 
      <select name="Doggie" size="25" style="width:250px" id="Doggie"> 
      </select>
      <select name="Kitty" size="25" style="width:250px"  id="Kitty">  
      </select>
      <select name="Pig" size="25" style="width:250px"  id="Pig">
      </select>    
    <p><a href="tabresults.html"><strong>Get Your Results</strong></a><br />
        
        
      </div>

      <!-- end .content -->
    </form>
  </div>
  <div class="footer">
    <h2 align="center"></h2>
  <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

Open in new window



And the mydoggie.php file
<?php
	$list_array = array();

	if(isset($_GET['case'])) {
		
		$dbc = mysql_connect('','','') or die('Error connecting to MySQL server.'); 
		$case = mysql_real_escape_string($_GET['case']);
		
		mysql_select_db('MyDB'); 
		
		switch($case){
			case 'Place':
			$result = mysql_query("select RestID as ID, RestName as Name from tblRestaurants order by RestName ASC");
			break;
			case 'Cuisine':
			$result = mysql_query("select CuisineID as ID, CuisineName as Name from tblCuisines order by CuisineName ASC");
			break;
			case 'City':
			$result = mysql_query("select CityID as ID, CityName as Name from tblCities order by CityName ASC");
			break;
			case 'State':
			$result = mysql_query("select StateID as ID, StateName as Name from tblStates order by StateName ASC");
			break;
			case 'ZipCode':
			$result = mysql_query("select LocationID as ID, ZipCode as Name from tblLocations order by ZipCode ASC");
			break;
		}
		if($result)
			while($row = mysql_fetch_assoc($result)) {
				$list_array[] = array("ID"=>$row["ID"], "Name"=>$row["Name"]);		
			}
	}
	
	header('Content-type: application/json');
	echo json_encode($list_array);
	
?>

Open in new window

Avatar of DS928
DS928
Flag of United States of America image

ASKER

Perhaps this is in the right direction?  I have this on the first listbox "doggie"

<select name="Doggie" size="25" style="width:250px" style="font-size:18px" id="Doggie"
onChange='javascript: getChildDropdown(this);'>
</select>

Open in new window


And this as  a funtion...
function getChildDropdown(parentval) {
parentval = parentval.value;
window.location.href('mydoggie.php?parent='+parentval);
}

Open in new window


And this in the PHP file....Needless to say.................................................Not working!
if(isset($_GET['parent']) && $_GET['parent'] != '') {
 }

Open in new window


Ok the first part, the onchange of the select listbox is working, so I guess I am up to writing the function!
Avatar of DS928

ASKER

Ok digging deeper here.  This is the first part.  When I click on the list it works.  It calls the function.  Here is the first part of the code.
onChange='javascript: getKittyList(this);'

Open in new window


Here is the function, it work for the first box so I figure it should work for the second with a few changes.  The second box is called Kitty (keeping with the animal theme!)  Here is the function.
function getKittyList()
{
$.getJSON("mykitty.php?ajax=true", { "case" : what }, function(data) {
$("#Kitty").empty();
$.each(data, function(index, objRecord) {
$("#Kitty").append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');});
});
}

Open in new window


and the PHP file  mykitty.php
<?php
$list_array = array();
$dbc = mysql_connect('','',') or die('Error connecting to MySQL server.'); 
mysql_select_db('MyDB'); 
$result = mysql_query("SELECT tblLocations.RestID as ID, tblCities.CityName as Name
FROM tblCities INNER JOIN tblLocations ON tblCities.CityID = tblLocations.CityID
WHERE tblLocations.RestID = tblRestaurants.RestID
ORDER BY tblCities.CityName ASC");
if($result)
while($row = mysql_fetch_assoc($result)) {
$list_array[] = array("ID"=>$row["ID"], "Name"=>$row["Name"]);		
	}
	}
	
	header('Content-type: application/json');
	echo json_encode($list_array);
	
?>

Open in new window

Avatar of Eddie Shipman
Change your javasacript to this and it should work for you:

    $(document).ready(function() {
        $("input:image").click(function(evt) {
            evt.preventDefault();
            display("Doggie", ${this).val());
        })
    
        $("#Doggie").change(function(){
            display("Kitty", ${#Doggie").val());
        });    
        
        $("#Kitty").change(function(){
            display("Pig", ${#Kitty").val());
        });    
    
    });

    function display(_type_, _what_) {
        $.getJSON("mydata.php?ajax=true", { "type_": _type_, "case" : _what_}, function(data) {
            $("#"+_type_).empty();
            $.each(data, function(index, objRecord) {
                $("#"+_type_).append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');
            });
        });
    }

Open in new window


And make your PHP like this and call it mydata.php. This allows you to keep everything in one file:

<?php
    $type_ = $_GET['type_'];
    $list_array = array();
    $dbc = mysql_connect('','',') or die('Error connecting to MySQL server.'); 
    mysql_select_db('MyDB'); 

    switch($type_) {
        case: 'Doggie':
            switch($case){
                case 'Place':
                    $sql = "select RestID as ID, RestName as Name from tblRestaurants order by RestName ASC";
                break;
                case 'Cuisine':
                    $sql = "select CuisineID as ID, CuisineName as Name from tblCuisines order by CuisineName ASC";
                break;
                case 'City':
                    $sql = "select CityID as ID, CityName as Name from tblCities order by CityName ASC";
                break;
                case 'State':
                    $sql = "select StateID as ID, StateName as Name from tblStates order by StateName ASC";
                break;
                case 'ZipCode':
                    $sql = "select LocationID as ID, ZipCode as Name from tblLocations order by ZipCode ASC";
                break;
            }

        case: 'Kitty':
            $sql = "SELECT tblLocations.RestID as ID, tblCities.CityName as Name
                    FROM tblCities INNER JOIN tblLocations ON tblCities.CityID = tblLocations.CityID
                    WHERE tblLocations.RestID = tblRestaurants.RestID
                    ORDER BY tblCities.CityName ASC";
        break;
        case: 'Pig':
            $sql = "PIG SQL GOES HERE";
        break;
    };
    $result = mysql_query($sql);
    if($result)
        while($row = mysql_fetch_assoc($result)) {
            $list_array[] = array("ID"=>$row["ID"], "Name"=>$row["Name"]);        
        }
    }
  header('Content-type: application/json');
    echo json_encode($list_array);    
?>

Open in new window

Avatar of DS928

ASKER

Thank you.  With mydata.php I am getting errors on lines 8, 27, 33, 36 and 42.  Has to be the the brackets, no?  But where?

Also in the index.php on one line.

$(document).ready(function() {
$("input:image").click(function(evt) {
evt.preventDefault()
display("Doggie", ${this).val());       //This line is giving troubles
})

Open in new window


Once again thank you.

Fixed the mydata.php  it was the colons.
I didn't read the entire post - wasn't sure if you still needed help so went to the last post ...

where you have display("Doggie  etc

change to display("Doggie", $(this).val());

hope that helps ...
Avatar of DS928

ASKER

Yes that fixed the first display.  But the other to are wacked yet.

$(document).ready(function() {
        $("input:image").click(function(evt) {
            evt.preventDefault();
            display("Doggie", $(this).val());
			})
    
        $("#Doggie").change(function(){
            display("Kitty", ${#Doggie).val() );})
		})
        
        $("#Kitty").change(function(){
            display("#Pig", ${#Kitty").val());
        });    

Open in new window

$("#Doggie").change(function(){
                  display("#Kitty", $("#Doggie").val());
            })
            
            $("#Kitty").change(function(){
                  display("#Pig", $("#Kitty").val());
            });
Do you use an editor that has syntax highlighting? I'm sorry about the misplaced brackets but that is something that should have stood out to you if you have done any jQuery development.
Avatar of DS928

ASKER

I am using Dreamweaver cs6,  thank you I really apprciate all of your help!  Im no linger getting errors but its not pulling the data.  Nit even the first listbox.  Once again your help is appreciated!
Avatar of DS928

ASKER

Ok No more errors but no more results.  If anyone can see the problem, let me know!

$(document).ready(function() {
        $("input:image").click(function(evt) {
            evt.preventDefault();
            display("#Doggie", $(this).val());
			})
    
	$("#Doggie").change(function(){
                  display("#Kitty", $("#Doggie").val());
            })
            
            $("#Kitty").change(function(){
                  display("#Pig", $("#Kitty").val());
            }); 
	});


    function display(_type_,_what_) {
        //alert('MyKitty Is Running.');
		$.getJSON("mydata.php?ajax=true", { "type_": _type_, "case" : _what_}, function(data) {
            $("#"+_type_).empty();
            $.each(data, function(index, objRecord) {
                $("#"+_type_).append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');
            });
        });
    }

Open in new window


mydata.php
<?php
    $type_ = $_GET['type_'];
    $list_array = array();
    $dbc = mysql_connect('','','') or die('Error connecting to MySQL server.'); 
    mysql_select_db('MyDB'); 

    switch($type_) {
        case 'Doggie':
            switch($case){
                case 'Place':
                    $sql = "select RestID as ID, RestName as Name from tblRestaurants order by RestName ASC";
                break;
                case 'Cuisine':
                    $sql = "select CuisineID as ID, CuisineName as Name from tblCuisines order by CuisineName ASC";
                break;
                case 'City':
                    $sql = "select CityID as ID, CityName as Name from tblCities order by CityName ASC";
                break;
                case 'State':
                    $sql = "select StateID as ID, StateName as Name from tblStates order by StateName ASC";
                break;
                case 'ZipCode':
                    $sql = "select LocationID as ID, ZipCode as Name from tblLocations order by ZipCode ASC";
                break;
			}

        case 'Kitty':
            $sql = "SELECT tblLocations.RestID as ID, tblCities.CityName as Name
                    FROM tblCities INNER JOIN tblLocations ON tblCities.CityID = tblLocations.CityID
                    WHERE tblLocations.RestID = tblRestaurants.RestID
                    ORDER BY tblCities.CityName ASC";
        break;
        case 'Pig':
            $sql = "PIG SQL GOES HERE";
        break;
    };
    $result = mysql_query($sql);
    if($result)
        while($row = mysql_fetch_assoc($result)) {
            $list_array[] = array("ID"=>$row["ID"], "Name"=>$row["Name"]);        
        }
    //}
  header('Content-type: application/json');
    echo json_encode($list_array);    
?>

Open in new window

well I wondered about this but didn't really know what you were wanting ...

I think you need to remove the # from : display("#Kitty", $("#Doggie").val()); so it becomes : display("Kitty", $("#Doggie").val());
and the same for the others.
Avatar of DS928

ASKER

Thank you, that doesn't seem to populate the list either.  If you go to  www.Menuhead.net/index.php  you will see the layout and how it's , well I don't want to say working but the first list is being populate at the very least.
are there any javascript errors?

copy and paste this:
$("input:image").click(function(evt) {
            evt.preventDefault();
            display("Doggie", $(this).val());
                  });
   
      $("#Doggie").change(function(){
                  display("Kitty", $(this).val());
            });
         $("#Kitty").change(function(){
                  display("Pig", $(this).val());
            });
Avatar of DS928

ASKER

Thank you.  Nothing loads.  No errors.  Is it really this hard? LOL!  Could it be by any chance the Switch statement?  We are populating the doggie list first by Place, Cuisine, City, State or Zip.  After that the the kitty list gets updated depending whats in the doggie list.  Does the switch statement need to be changed?
i went to the link you posted and i don't see this code ??
Avatar of DS928

ASKER

Here is the Switch code....

mydata.php

<?php
    $type_ = $_GET['type_'];
    $list_array = array();
    $dbc = mysql_connect('',''.'') or die('Error connecting to MySQL server.'); 
    mysql_select_db('MyDB'); 

    switch($type_) {
        case 'Doggie':
            switch($case){
                case 'Place':
                    $sql = "select RestID as ID, RestName as Name from tblRestaurants order by RestName ASC";
                break;
                case 'Cuisine':
                    $sql = "select CuisineID as ID, CuisineName as Name from tblCuisines order by CuisineName ASC";
                break;
                case 'City':
                    $sql = "select CityID as ID, CityName as Name from tblCities order by CityName ASC";
                break;
                case 'State':
                    $sql = "select StateID as ID, StateName as Name from tblStates order by StateName ASC";
                break;
                case 'ZipCode':
                    $sql = "select LocationID as ID, ZipCode as Name from tblLocations order by ZipCode ASC";
                break;
			}

        case 'Kitty':
            $sql = "SELECT tblLocations.RestID as ID, tblCities.CityName as Name
                    FROM tblCities INNER JOIN tblLocations ON tblCities.CityID = tblLocations.CityID
                    WHERE tblLocations.RestID = tblRestaurants.RestID
                    ORDER BY tblCities.CityName ASC";
        break;
        case 'Pig':
            $sql = "PIG SQL GOES HERE";
        break;
    };
    $result = mysql_query($sql);
    if($result)
        while($row = mysql_fetch_assoc($result)) {
            $list_array[] = array("ID"=>$row["ID"], "Name"=>$row["Name"]);        
        }
    //}
  header('Content-type: application/json');
    echo json_encode($list_array);    
?>

Open in new window


and the main code
$(document).ready(function() {
    $("input:image").click(function(evt) {
            evt.preventDefault();
            display("Doggie", $(this).val());
                  });
    
      $("#Doggie").change(function(){
                  display("Kitty", $(this).val());
            });
         $("#Kitty").change(function(){
                  display("Pig", $(this).val());
            }); 
			});


    function display(type_,what_) {
        //alert('MyKitty Is Running.');
		$.getJSON("mydata.php?ajax=true", { "type_": _type_, "case" : _what_}, function(data) {
            $("#"+_type_).empty();
            $.each(data, function(index, objRecord) {
                $("#"+_type_).append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');
            });
        });
    }

Open in new window

start from scratch on your mydata.php file

just try to get a callback - use console.log - just get a value of what has been posted to it
Avatar of DS928

ASKER

Being new to this, How would I do this?  REM everything out?  Any help is appreciated. Thank you.
right after this line : $.getJSON("mydata.php?ajax=true", { "type_": _type_, "case" : _what_}, function(data) {
add : console.log(data);

and now that i look closer at your mydata.php file i believe there is faulty logic in the case statements as you said

just strip it down to nothing and build it back up

btw - console.log will show to you when you hit F12
then click your element and results should show - good way to debug and figure out whats up
i.e.
on mydata.php first just return back the type - then add in more complex data ...
Avatar of DS928

ASKER

That I think is the problem.  (Doggie, Kitty, Pig)  These are the name of the three listboxes,  You don't get the type untill you click on lets say place, then you click on a place in the Doggie box  which should in turn fill in the Kitty box with the name of the city, So I think the Switch statement is off.
yeah - just start real simple ...
talk to ya tomorrow - gotta watch tv now ...
I do see a problem, you want the selections to be related, correct?

If you select a state, you want all cities in that state.
If you select a city, you want all restaurants in that city.
If you want a cuisine, you want all resturants serving that type of food.
etc.

You have no foreign keys in your SQL, Can you post a subset of your data in all your tables?
Avatar of DS928

ASKER

This is correct.  Here is the structure.
tblRestaurants        RestID, RestName
tblLocations            LocationID, RestID, CityID, StateID, AreaID
tblCities                   CityID, CityName
tblStates                  StateID, StateName
tblAreas                   AreaID, AreaName
tblDetails                 RestID, LocationID
I hope this helps.  Thank you.
It really would be better if you posted a subset of your data, too.
Avatar of DS928

ASKER

Not sure what you mean?  Is this it?


Place Image
Doggie List           Kitty List             Pig List
Place                     City                     Area
tblRestaurants     tblLocations       tblLocations
                              tblCities              tblAreas


Cuisine Image
Doggie List           Kitty List               Pig List
Cuisine                  City                       Place
tblLocations          tblLocations        tblLocations
tblCuisines            tblCities               tblRestaurants


City Image
Doggie List           Kitty List                Pig List
City                        Area                      Place
tblLocations         tblLocations          tblLocations
tblCities                tblAreas                 tblRestaurants


State Image
Doggie List          Kitty List                  Pig List
State                    City                           Place
tblLocations        tblLocations            tblLocations
tblStates              tblCities                   tblRestaurants


ZipCode Image
Doggie List           Kitty List                  Pig List
ZipCode               Place                         Cuisine
tblLocations        tblLocations             tblLocations
                             tblRestaurants         tblCuisines


Here are the Primary and Foreign Keys
Table                                      Primary        Foreign
tblRestaurants                      RestID
tblLocations                          LocationID   RestID
tblCuisines                            CuisineID
tblCities                                 CityID
tblStates                                StateID
tblAreas                                 AreaID

I hope this helps.  Thank you.
Avatar of DS928

ASKER

I think its best to break them into seperate files
This is the index.php, mydoggie.php and mykitty.php file......and the mypig.php

<?php
    $dbc = mysql_connect('','','3') 
     or die('Error connecting to MySQL server.'); 
 
	mysql_select_db('MyDB'); 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SearchFour</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">


// End -->

// WAIT COMPLETE LOADING OF THE PAGE 
	
	//The Doggie ListBox
	$(document).ready(function() {
	$("input:image").click(function(evt) {
	evt.preventDefault();
	getDoggie( $(this).val() );})
	})


	function getDoggie(what)
	{
	$.getJSON("mydoggie.php?ajax=true", { "case" : what }, function(data) {
	$("#Doggie").empty();
	$.each(data, function(index, objRecord) {
	$("#Doggie").append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');});
		});
	}
	
	//The Kitty ListBox
	$(document).change(function() {
	getKitty("Kitty", $(this).val() );})
		
	function getKitty(what)
	{
	//alert('MyKitty Is Running.');
	$.getJSON("mykitty.php?ajax=true", { "case" : what }, function(data) {
	$("#Kitty").empty();
	$.each(data, function(index, objRecord) {
	$("#Kitty").append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');});
		});
	}
	
	//The Pig ListBox
	$(document).change(function() {
	getPig("Pig", $(this).val() );})
	
	function getPig(what)
	{
	//alert('MyPig Is Running.');
	$.getJSON("mypig.php?ajax=true", { "case" : what }, function(data) {
	$("#Pig").empty();
	$.each(data, function(index, objRecord) {
	$("#Pig").append('<option value="' + objRecord.ID + '">' + objRecord.Name + '</option>');});
		});
	}
	
	function MM_preloadImages() { //v3.0
  		var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
	}

	function MM_swapImgRestore() { //v3.0
  		var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
	}

	function MM_findObj(n, d) { //v4.01
  		var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  		if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  		for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  		if(!x && d.getElementById) x=d.getElementById(n); return x;
	}

	function MM_swapImage() { //v3.0
  		var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   		if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
	}
</script>

<title>MenuHead Search</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	color: #000;
	background-image: url(MHBackground.jpg);
	background-repeat: repeat;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
	font-size: xx-large;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
	width: 960px;
	background-color: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
	width: 960px;
	background-color: #FFFFFF;
	border: thin none #CCC;
}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/

.content {

	padding: 10px 0;
}

/* ~~ The footer ~~ */
.footer {
	background-color: #FFFFFF;
	clear: both;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 40px;
	padding-left: 0;
	background-image: url(Footer.jpg);
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

<style type="text/css">

body {
	background-image: url(MHBackground.jpg);
	background-repeat: repeat;
}

.styled-select select {
   background: transparent;
   width: 250px;
   padding: 0px;
   font-size: 16px;
   line-height: 10;
   border: 0;
   border-radius: 0;
   height: 34px;
   }
body,td,th {
	font-size: 16px;
}
   
-->
</style>
</head>
<body onLoad="MM_preloadImages('PaleOrder.jpg','PaleABC.jpg','PaleMenus.jpg','PaleNews.jpg','PaleReviews.jpg','SearchByPlace.jpg','SearchByCuisine.jpg','SearchByCity.jpg','SearchByState.jpg','SearchByZipCode.jpg')">
<div class="container">
  <div class="header">
    <div align="center"><a href="#"></a> 
    <!-- end .header --> <img src="MHLogoTop.jpg" name="TopLogo" width="960" height="160" id="TopLogo" />
    <table width="960" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="WhiteSearch.jpg" name="WhiteSearch" width="160" height="30" id="WhiteSearch" /></td>
        <td><img src="GreyOrder.jpg" name="GreyOrder" width="160" height="30" id="GreyOrder"
        	onMouseOver="MM_swapImage('GreyOrder','','PaleOrder.jpg',1)" onMouseOut="MM_swapImgRestore()" /></td>
        <td><img src="GreyAbc.jpg" name="GreyABC" width="160" height="30" id="GreyABC"
        	onMouseOver="MM_swapImage('GreyABC','','PaleABC.jpg',1)" onMouseOut="MM_swapImgRestore()" /></td>
        <td><img src="GreyMenus.jpg" name="GreyMenu" width="160" height="30" id="GreyMenu"
        	onMouseOver="MM_swapImage('GreyMenu','','PaleMenus.jpg',1)" onMouseOut="MM_swapImgRestore()" /></td>
        <td><img src="GreyNews.jpg" name="GreyNews" width="160" height="30" id="GreyNews"
        	onMouseOver="MM_swapImage('GreyNews','','PaleNews.jpg',1)" onMouseOut="MM_swapImgRestore()" /></td>
        <td><img src="GreyReviews.jpg" width="160" height="30" id="Image1"
        	onMouseOver="MM_swapImage('Image1','','PaleReviews.jpg',1)" onMouseOut="MM_swapImgRestore()" /></td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </div>
  </div>
  <div class="content">
    <div align="center"></div>
    <form>
    <br />
      <div align="center">
    <table width="960" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="192"><div align="center"> <input type = "image" value = "Place" img src="Glass-Place.jpg"
    	width="177" height="168" alt="Place"/></div></td>
    <td width="192"><div align="center"> <input type = "image" value = "Cuisine" img src="Glass-Cuisine.jpg"
    	width="177" height="168" alt="Cuisine" /></div></td>
    <td width="192"><div align="center"><input type = "image" value = "City" img src="Glass-City.jpg"
    	width="177" height="168" alt="City" /></div></td>
    <td width="192"><div align="center"><input type = "image" value = "State" img src="Glass-State.jpg"
    	width="177" height="168" alt="State" /></div></td>
    <td width="192"><div align="center"><input type = "image" value = "ZipCode" img src="Glass-Zip.jpg"
    	width="177" height="168" alt="ZipCode" /></div></td>
    </tr>
    </table>
    
    
   
    <p><br /> 
      <select name="Doggie" size="25" style="width:250px" id="Doggie" onChange='javascript: getKitty();'>
>
        </select>
      <select name="Kitty" size="25" style="width:250px"  id="Kitty" onChange='javascript: getPig();'>
        </select>
      <select name="Pig" size="25" style="width:250px"  id="Pig">
        </select>    
    </p>
    <p><a href="tabresults.html"><strong>Get Your Results</strong></a><br />
        
        
      </div>

      <!-- end .content -->
    </form>
  </div>
  <div class="footer">
    <h2 align="center"></h2>
  <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

Open in new window



<?php
	$list_array = array();

	if(isset($_GET['case'])) {
		
		$dbc = mysql_connect('','','') or die('Error connecting to MySQL server.'); 
		$case = mysql_real_escape_string($_GET['case']);
		
		mysql_select_db('MyDB'); 
		
		switch($case){
			case 'Place':
			$result = mysql_query("select RestID as ID, RestName as Name from tblRestaurants order by RestName ASC");
			break;
			case 'Cuisine':
			$result = mysql_query("select CuisineID as ID, CuisineName as Name from tblCuisines order by CuisineName ASC");
			break;
			case 'City':
			$result = mysql_query("select CityID as ID, CityName as Name from tblCities order by CityName ASC");
			break;
			case 'State':
			$result = mysql_query("select StateID as ID, StateName as Name from tblStates order by StateName ASC");
			break;
			case 'ZipCode':
			$result = mysql_query("select LocationID as ID, ZipCode as Name from tblLocations order by ZipCode ASC");
			break;
		}
		if($result)
			while($row = mysql_fetch_assoc($result)) {
				$list_array[] = array("ID"=>$row["ID"], "Name"=>$row["Name"]);		
			}
	}
	
	header('Content-type: application/json');
	echo json_encode($list_array);
	
?>

Open in new window



<?php
	
	$list_array = array();

	if(isset($_GET["ajax"])) {
		
		$dbc = mysql_connect('','','') or die('Error connecting to MySQL server.'); 
		$case = mysql_real_escape_string($_GET['case']);
		
		mysql_select_db('MyDB'); 
		
		switch($case){
			case 'Place': //City
			$result = mysql_query("SELECT tblLocations.RestID, tblLocations.CityID, tblCities.CityName
			FROM tblCities INNER JOIN tblLocations ON tblCities.CityID = tblLocations.CityID
			GROUP BY tblLocations.RestID, tblLocations.CityID, tblCities.CityName
			ORDER BY tblCities.CityName ASC");
			break;
			
			case 'Cuisine': //City
			$result = mysql_query("SELECT tblDetails.LocationID, tblLocations.CityID, tblCities.CityName
			FROM tblDetails INNER JOIN (tblCities INNER JOIN tblLocations ON tblCities.CityID = tblLocations.CityID)
			ON tblDetails.RestID = tblLocations.RestID
			GROUP BY tblDetails.LocationID, tblLocations.CityID, tblCities.CityName
			ORDER BY tblCities.CityName ASC");
			break;
			
			case 'City':  //Area
			$result = mysql_query("SELECT tblLocations.CityID, tblAreas.AreaID, tblAreas.AreaName
			FROM tblLocations INNER JOIN tblAreas ON tblLocations.AreaID = tblAreas.AreaID
			GROUP BY tblLocations.CityID, tblAreas.AreaID, tblAreas.AreaName
			ORDER BY tblAreas.AreaName ASC");
			break;
			
			case 'State':  //City
			$result = mysql_query("SELECT tblLocations.StateID, tblCities.CityID, tblCities.CityName
			FROM tblCities INNER JOIN tblLocations ON tblCities.CityID = tblLocations.CityID
			GROUP BY tblLocations.StateID, tblCities.CityID, tblCities.CityName
			ORDER BY tblCities.CityName ASC");
			break;
			
			case 'ZipCode':  //Place
			$result = mysql_query("SELECT tblLocations.ZipCode, tblRestaurants.RestID, tblRestaurants.RestName
			FROM tblRestaurants INNER JOIN tblLocations ON tblRestaurants.RestID = tblLocations.RestID
			GROUP BY tblLocations.ZipCode, tblRestaurants.RestID, tblRestaurants.RestName
			ORDER BY tblRestaurants.RestName ASC");
			break;
		}
		}
		if($result)
			while($row = mysql_fetch_assoc($result)) {
				$list_array[] = array("ID"=>$row["ID"], "Name"=>$row["Name"]);		
			}
	header('Content-type: application/json');
	echo json_encode($list_array);
	//alert('MyKitty Is Running.');
?>

Open in new window


<?php
	
	$list_array = array();

	if(isset($_GET["ajax"])) {
		
		$dbc = mysql_connect('',','') or die('Error connecting to MySQL server.'); 
		$case = mysql_real_escape_string($_GET['case']);
		
		mysql_select_db('MyDB'); 
		
		switch($case){
			case 'PlaceCity': //Area
			$result = mysql_query("SELECT tblLocations.LocationID, tblLocations.CityID, tblAreas.AreaID, tblAreas.AreaName
			FROM tblLocations INNER JOIN tblAreas ON tblLocations.AreaID = tblAreas.AreaID
			GROUP BY tblLocations.LocationID, tblLocations.CityID, tblAreas.AreaID, tblAreas.AreaName
			ORDER BY tblAreas.AreaName ASC");
			break;
			
			case 'CuisineCity':  //Place
			$result = mysql_query("SELECT tblDetails.CuisineID, tblLocations.CityID, tblRestaurants.RestID,
			tblRestaurants.RestName
			FROM tblRestaurants INNER JOIN (tblDetails INNER JOIN tblLocations ON tblDetails.RestID = tblLocations.RestID)
			ON tblRestaurants.RestID = tblLocations.RestID
			GROUP BY tblDetails.CuisineID, tblLocations.CityID, tblRestaurants.RestID, tblRestaurants.RestName
			ORDER BY tblRestaurants.RestName ASC");
			break;
			
			case 'CityArea':  //Place
			$result = mysql_query("SELECT tblLocations.CityID, tblLocations.AreaID, tblRestaurants.RestID,
			tblRestaurants.RestName
			FROM tblRestaurants INNER JOIN tblLocations ON tblRestaurants.RestID = tblLocations.RestID
			GROUP BY tblLocations.CityID, tblLocations.AreaID, tblRestaurants.RestID, tblRestaurants.RestName
			ORDER BY tblRestaurants.RestName ASC");
			break;
			
			case 'StateCity':  //Place
			$result = mysql_query("SELECT tblLocations.StateID, tblLocations.CityID, tblRestaurants.RestID,
			tblRestaurants.RestName
			FROM tblRestaurants INNER JOIN tblLocations ON tblRestaurants.RestID = tblLocations.RestID
			GROUP BY tblLocations.StateID, tblLocations.CityID, tblRestaurants.RestID, tblRestaurants.RestName
			ORDER BY tblRestaurants.RestName ASC");
			break;
			
			case 'ZipCodePlace':  //Cuisine
			$result = mysql_query("SELECT tblLocations.ZipCode, tblRestaurants.RestID, tblRestaurants.RestName
			FROM tblRestaurants INNER JOIN tblLocations ON tblRestaurants.RestID = tblLocations.RestID
			GROUP BY tblLocations.ZipCode, tblRestaurants.RestID, tblRestaurants.RestName
			ORDER BY tblRestaurants.RestName ASC");
			break;
		}
		}
		if($result)
			while($row = mysql_fetch_assoc($result)) {
				$list_array[] = array("ID"=>$row["ID"], "Name"=>$row["Name"]);		
			}
	header('Content-type: application/json');
	echo json_encode($list_array);
	//alert('MyKitty Is Running.');
?>

Open in new window

I'm almost finished "cloning" your data. and will write the mockup later.
BTW, I don't see ZipCode in your tblLocations definition.
Another problem is, I don't have any data for the Areas table. Can you export some of your Areas table data and post it?
I also do not see a tblDetails. Until you figure out your data and post it correctly, I'm afraid we aren't going to be able to really help you understand how to link them all together.

You keep changing the specifications and not telling us about them.
Avatar of DS928

ASKER

Thank you...Here is some data from the area table.

AreaID      AreaName      AreaCity      AreaStatus

18      West 80's      New York City      Yes
19      West 90's      New York City      Yes
20      West 100's      New York City      Yes
21      Central Village      New York City      Yes
22      West Village      New York City      Yes
23      East Village      New York City      Yes
24      Lower Eastside      New York City      Yes
25      Soho            New York City      Yes
26      Little Italy      New York City      Yes
27      Tribeca            New York City      Yes
28      Chinatown      New York City      Yes
29      Wall Street      New York City      Yes
30      Harlem            New York City      Yes
31      East Harlem      New York City      Yes
32      
34      Bernal Heights      San Francisco      Yes
35      Castro            San Francisco      Yes
36      Chinatown      San Francisco      Yes
37      Civic Center      San Francisco      Yes
38      Cow Hollow      San Francisco      Yes
39      Embarcadero      San Francisco      Yes
129      Allston      Boston      Yes
130      Back Bay      Boston      Yes
131      Beacon Hill      Boston      Yes
132      Brighton      Boston      Yes
133      Brookline      Boston      Yes
134      Charlestown      Boston      Yes
135      Chestnut Hill      Boston      Yes
136      East Boston      Boston      Yes
Avatar of DS928

ASKER

Here are the tables...(P) for primary key
tblAreas
AreaID (P)
AreaName
AreaCity
AreaStatus

tblCities
CityID  (P)
CityName
CityState
CityStatus

tblCuisines
CuisineID (P)
CuisineName
CuisineType
CuisineStatus

tblDetails
RestID
LocationID
MealPeriods
PricePoints
Ratings
HoursID
Theme
FullBar
Handicap
CreditCards
Delivery
Catering
BusinessLunch
KidFriendly
Reservations
DetailsPhoto
DetailsStatus

tblHours
LocationID
SunOpen
SunClose
MonOpen
MonClose
TueOpen
TueClose
WedOpen
WedClose
ThurOPen
ThurClose
FriOpen
FriClose
SatOpen
SatClose

tblLocations
LocationID (P)
StreetID
StreetNumber
Street
AreaID
CityID
StateID
ZipCode
Phone
Fax
EMail
SMS
Website
LocationStatus

tblRestaurants
RestID (P)
RestName
RestDate
RestStatus

tblStates
StateID (P)
StateName
StateAb
StateStatus
Avatar of DS928

ASKER

Ive attached a notepad file with most of the data occuping the tables.  tblHours is empty and I gave you only a few records from tblRestaurants. Once again, thank you.
Data.txt
Ok, Now that I have the data all built, please explain further how this works. From what I'm reading in your code, it isn't going to work correct, first because the SQL for kitty doesn't return any results. second, I think that your DB architecture is flawed.

I would also have just a single PHP script and pass the info into it like in my first post.
Avatar of DS928

ASKER

Ok...Here it is, When you click on Place, the first listbox is poulated by Place, when you select a place in the first listbox, the second listbox gives you the city or cities that the Place is in.  When you Select a City in the second listbox, the third list box will give you the are or areas that the Place is located in.  After this you can click on for the results of either all of the places or just the selected place in the last listbox.  This brings you to the Result page.  I set the database up as such because each restaurant can have several locations in one city or/and one or many locations in many cities.  If you have a better suggestion, I am happy to listen and learn.  Once again thank you.

PS Here is something that I did earlier on in MS Access 2010.  Go to forms. And open frmSearch.
MenuheadTwo.accdb
OK, let me work on it a little while. I think I can optimize it for you.
The Access app helped a lot. However, can you give me a glimpse of what the results should look like?
Avatar of DS928

ASKER

If you go to a site called www.restaurant.com this is what I am aiming for in the long run.  However,; I'm changing it a bit.  The first page is different from mine, but the results will look the same.  I'm going to filter it further as they do (on the left) and have the listings in the center.  This is further down the road.  Right now, I;m still trying to get the three listboxes to work.  I really appreciate your help!

PS If you'll notice I have the listbox only return results on whats in the database.  In other words you cannot select a Place, Cuisine, City, State, Area or Zip Code when there are no records.  I think this is pretty much controlled from the tblLocations which seems to be the core table.
Ok, I have a partially working system for you. I want to point out that there is no relationship between Cuisines and Restaurants or Locations so populating the 3rd listbox with Cuisines needs some work. I wrote the PHP script to work for all three but you could add the Results page to the script easily.
I am attaching the PHP/reworked HTML. It also includes my db_mysql script that I used in the PHP script; you will need to change the values at the top of that script to login to your DB.

Now, looking at the Access application, I came up with this matrix and used it to determine what went into which listbox. If I was wrong, let me know.
Doggie values	Kitty values	Pig values		
---------------	---------------	--------------- 
Place		Cities 		Areas		

Open in new window

This would be the SQL for the Result page:
SELECT a.`AreaName`, r.`Restname`, l.`StreetNumber`, l.`Street`, l.`AreaID`,
       l.`CityID`, l.`StateID`, l.`ZipCode`, l.`Phone`, l.`Fax`,
       l.`Email`, l.`SMS`, l.`Website`, d.`Meal Period`, d.`Price Points`,
       d.`Rating`, d.`Theme`, d.`Full Bar`, d.`Handicap Access`,
       d.`Credit Cards`, d.`Delivery`, d.`Catering`, d.`Business Lunches`,
       d.`Kid Friendly`
FROM tblarea a
INNER JOIN tblCities c ON c.CityID = a.AreaCity
INNER JOIN tblLocation l ON l.CityID = c.CityID
INNER JOIN tblDetails d ON d.LocationID = l.LocationID
INNER JOIN tblRestaurants r ON r.RestID = d.RestID
WHERE a.AreaID = :AreaID

Open in new window

*******************************************
Doggie values	Kitty values	Pig values		
---------------	---------------	--------------- 
Cuisine		Cities		Restaurants
City		Areas		Restaurants
State		Cities		Restaurants

Open in new window

This would be the SQL for the Result page:
SELECT r.`Restname`, l.`StreetNumber`, l.`Street`, l.`AreaID`,
       l.`CityID`, l.`StateID`, l.`ZipCode`, l.`Phone`, l.`Fax`,
       l.`Email`, l.`SMS`, l.`Website`, d.`Meal Period`, d.`Price Points`,
       d.`Rating`, d.`Theme`, d.`Full Bar`, d.`Handicap Access`,
       d.`Credit Cards`, d.`Delivery`, d.`Catering`, d.`Business Lunches`,
       d.`Kid Friendly`
FROM tblRestaurants r
INNER JOIN tblDetails d ON d.LocationID = r.RestID
INNER JOIN tblLocation l ON l.LocationID = d.LocationID
WHERE r.RestID = :RestID

Open in new window

****************************************
Doggie values	Kitty values	Pig values		
---------------	---------------	--------------- 
Zip		Resturants	Cuisines

Open in new window

This would be the SQL for the Result page:
SELECT r.`Restname`, l.`StreetNumber`, l.`Street`, l.`AreaID`,
       l.`CityID`, l.`StateID`, l.`ZipCode`, l.`Phone`, l.`Fax`,
       l.`Email`, l.`SMS`, l.`Website`, d.`Meal Period`, d.`Price Points`,
       d.`Rating`, d.`Theme`, d.`Full Bar`, d.`Handicap Access`,
       d.`Credit Cards`, d.`Delivery`, d.`Catering`, d.`Business Lunches`,
       d.`Kid Friendly`
FROM tblDetails d
INNER JOIN tblCuisine c ON c.CuisineID = d.Cuisines
INNER JOIN tblLocation l ON l.LocationID = d.LocationID AND l.Active
INNER JOIN tblrestaurants r ON r.RestID = d.RestID AND r.RestActive
WHERE c.CuisineID = :CuisineUD

Open in new window

Linked-ListBoxes.zip
Oops, I had an error in the SQL for the Cuisine button.
mydata.php
Avatar of DS928

ASKER

Thank you.  Now that I am meeting free I am going to play around with it and get back to you.
I will continue to work on the mydata.php script because I saw that it didn't quite work the way I think it should.
Avatar of DS928

ASKER

Yeah, this is a tough one.  I've been working hard on this.  I figured one way to do this is first forget about the five buttons, Place, Cuisine, City, State and Zip.  For now.  They can be added back in.  I wanted to get one set working.  This is what I have so far.  It's built on "Place as the first listbox, "City" as the second and "Area as the third.  The first listbox works, only showing the restaurants that have a City, The second listbox works showing every city that the restaurants are loacted in, and even the third listbox works.  The problem is, I need a second filter on it.  I need the RestID and the CityID, otherwise on multiple cities it shows the areas for all of the cities, not just the area for the selected city.  So I need to add a second $LID, such as $CID to the mix, I havent figured that out yet perhaps you can.  After this works then I can reintroduce the five buttons.  Try it out live.  The problem is 28 Degrees.  It has two in Boston and one in NYC.  Perhaps some sort of UNION query?
sections-demo.php
config.php
ajax-city.php
ajax-area.php
Now, after looking at your DB, I would have made changes to the architecture as shown below:
This would make things much easier to query.

tblRestaurants
  RestID		int autoinc
  RestName		varchar  
  CuisineID		int (FK into tblCuisine CuisineID)
  Active		tinyint (0 or 1 for No/Yes)

tblLocation
  LocationID		int autoinc
  RestID		int (FK into tblRestaurants RestID)
  StreetNum		varchar
  StreetName    	varchar
  CityID		int (FK into tblCities CityID)  
  Phone			varchar
  Fax			varchar
  Email			varchar
  SMS			varchar
  Website		varchar
  HoursID		int
  Active		tinyint (0 or 1 for No/Yes)

tblAreas
  AreaID		int autoinc
  AreaName		varchar
  CityID		int
  Active		tinyint (0 or 1 for No/Yes)

tblCities
  CityID		int autoinc
  CityName		varchar
  StateID 		int (FK into tblStates StateID)
  ZipID			int (FK into tblZipCodes ZipID)
  Active		tinyint (0 or 1 for No/Yes)

tblStates
  StateID 		int autoinc
  StateName		varchar
  StateAb		varchar
  Active		tinyint (0 or 1 for No/Yes)

tblZipCodes
  ZipID			int autoinc
  ZipCode		varchar
  Active		tinyint (0 or 1 for No/Yes)

tblCuisine
  CuisineID		int autoinc
  CuisineName		varchar
  CuisineType		varchar
  Active		tinyint (0 or 1 for No/Yes)

tblDetails
  DetailsID		int autoinc
  RestID		int (FK into tblRestaurants RestID)
  Meal_Period   	int
  Price_Points  	int
  Rating		int
  Theme			tinyint (0 or 1 for No/Yes)
  Full_Bar		tinyint (0 or 1 for No/Yes)
  Handicap_Access	tinyint (0 or 1 for No/Yes)
  Credit_Cards		tinyint (0 or 1 for No/Yes)
  Delivery		tinyint (0 or 1 for No/Yes)
  Business_lunch	tinyint (0 or 1 for No/Yes)
  Kid_Friendly		tinyint (0 or 1 for No/Yes)

Open in new window

Ok, I have all the listboxes working correctly with the exception of when you need to show Cuisines as noted in mydata.php

I made one change to the structure of your database. I created a tblZipCodes and modified the ZipCode column in tblLocation to ZipID and pointed to the corresponding ZipID in tblZipCodes.

Until there is a CuisineID in tblRestaurants, I can't finish this up. I don't know what cuisine each restaurant is. If you could let me know about that, I can finish this up for you.
Avatar of DS928

ASKER

Thank you, Eddie, that looks good, except I would move Cuisines to Locations because a restaurant can have the same name but serve different cuisines.  For now, just make anything up for each restaurants cuisine, its just dummy data.  Did you try what I sent you?
Understood. Will fix the structure and go with it. Should be done later today.
Now, I don't yet have the SQL for the results page but I think I can get a clue.
Avatar of DS928

ASKER

Thank you, Eddie.
ASKER CERTIFIED SOLUTION
Avatar of Eddie Shipman
Eddie Shipman
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
BTW, your new demo does things different that the Access application. If you select ZipCode, the Access app loads Restaurants then Cities. Your new app, loads Cuisines then Locations.

It is difficult to hit a moving target and get things correct if you keep changing the code and/or specifications.
Avatar of DS928

ASKER

Thank you Eddie.  I am going to play around with it today.  Sorry about the "Moving Target"  I am just pushing ahead for a solution.  I don't want you to think that I am just sitting waiting for an answer.  I certainly appreciate all of your efforts.  Stay tuned!  Once again thank you so much!
Avatar of DS928

ASKER

Ok Eddie.  I have the new db loaded.  I am not getting a connection error, however; nothing happens when I click on the images.  You can go to:

www.MenuHead.net/Eddie/MenuHead.php

the database name, user name are MenuEddie
host is MenuEddie.db.5513143.hostedresource.com
pass is MenuEddie@1973

give it a shot....... I also renamed Menuhead.html to Menuhead.php and added the id's to the images if this matters.  Thank you.
The reason the third LB is not cleared on your other post is because you forgot to use  this in the $("#Doggie").change:

$("#Kitty").empty();
$("#Pig").empty();

Open in new window

Avatar of DS928

ASKER

Eddie the idea of where to put this   $("#Pig").empty();  worked.  Please post in the other thread so that I can give you credit for this.  I still have the problem of Kitty and Pig not clearing out when one of the five images are clicked.  Thank you Eddie.  Inch by inch!
If you lopk at the code I postd, you'll see the solution.
Avatar of DS928

ASKER

I did try it, and it froze after a few times.  Did you get your code to work?  I'm still not getting any results from your zip file.  I loaded the database in, made the connection, but nothing is returning when I click on an image.
It worked perfectly on my system. Did you change the info in db_mysql to connect to your database?
  //Hostname - localhost
  var $hostname = "localhost";
  //Database name
  var $database = "db";
  //Database Username
  var $username = "dbuser";
  //Database Password
  var $password = "db_pwd";

Open in new window


This code is the code that clears all LBs when the images are clicked:
$("input:image").click(function(evt) {
	evt.preventDefault();
	$("#Doggie").empty();
	$("#Kitty").empty();
	$("#Pig").empty();
	display("Doggie", $(this).val());
	window.Doggie = $(this).val()
})

Open in new window

Avatar of DS928

ASKER

Hello Eddie.  I setup a seperate db on the server for you.  That is what I am connecting to.  However; the list don't populate.  Are you connecting to MenuEddie?  Also I tried the code above to empty the listboxes and it freezes after a couple of times.  Thank you for all of your help.  It's appreciated.
I can see right off the bat that you aren't getting ANYTHING from the DB. This SQL is being run when I click Places button:
SELECT RestID as ID, RestName as Name FROM tblRestaurants ORDER BY RestName ASC

Open in new window

Make sure you can run that SQL against your DB.

That is on: http://www.menuhead.net/Eddie/menuhead.php
Avatar of DS928

ASKER

I don't understand it?  I believe all of the sign in data is correct.  I get onto the database with navicat, I see all of the tables populated, but still nothing when an image is clicked on.
As I said, are you positive that values correct in db_mysql.php? We don't care what navicat shows, we want to know if our PHP script connects and is able to query the data.
Avatar of DS928

ASKER

Eddie, Postive all values are correct, I checked and rechecked.  I do not know why it is noy working?
Try making these changes:
1st, add this function to db_mysql.php at the end, before the last }
  /*
   * returns the last error thrown by the query.
   */
   function lastError($query) {
    mysql_error($query);
  }

Open in new window


Then add this line to mydata.php:
	 $list_array['error'] = Db::getInstance()->lastError($dbresult);

Open in new window

after this line:
	 $list_array['sql'] = $sql;

Open in new window


Then, I want you to take the SQL that is returned and run it in your query tool to be certain that it returns records.
Avatar of DS928

ASKER

Eddie, nothing is coming back.  Could it be that the mydata.php is never being called?
Do you use Firebug to help you debug the javascript?
Put a break point on this line in the display() function:
$.each(data, function(index, objRecord) {

Open in new window


Then evaluate the data value. If it only has the sql item and an empty error item, then you r DB doesn't return anything from the query.

Try this code below. if it returns No records Found! in the error, then something is wrong with your DB.
	    $dbresult = Db::getInstance()->query($sql);
	
	    if($dbresult) {
	        while($row = mysql_fetch_assoc($dbresult)) {
	            $list_array[] = array("ID"=>$row["ID"], "Name"=>$row["Name"]);        
	        }
	    }
	    if(Db::getInstance()->numRows($dbresult) == 0) {
			$list_array['error'] = 'No records Found!';
		} else {
			$list_array['error'] = Db::getInstance()->lastError($dbresult);
		}
		// if you uncomment this line, you get to see the SQL in the data returned in the ajax call.
		$list_array['sql'] = $sql;
	    echo json_encode($list_array);    

Open in new window

Avatar of DS928

ASKER

Eddie, can you connect to the database when you run your code.  Here is a new sign-in the old one was broken on the server so I had to reinstall.  User is MenuEd, db is MenuEd, pass is MenuEd@1234, MenuEd.db.5513143.hostedresource.com.  Let me know
Cannot connect because our firewall won't let me connect to the mysql port remotely.
Avatar of DS928

ASKER

Eddie the same thing happened to me the orher day.  My buttons would not return any results.  And guess what it was?  Ine of my functions had an extra comma in it, I removed the comma and it worked.  So I am going to go through the code line by line and perhaps that might be the problem!
Avatar of DS928

ASKER

Thank you Eddie.  I am going to close this and give you the points.  You have been a tremendous help.  I certainly appreciate your efforts.  Like I said, I'm sure it's syntax, I'll find it.  Once again thank you!
Avatar of DS928

ASKER

Gave me a lot of advice on doing such a complex webpage.   I certainly appreciate his time and efforts!  A true champ!
One thing that may help is to have an editor that highlights PHP syntax. I, personally use Homesite5, it's rather old but still works on Win7. It is not sold anymore but there are plenty editors out there that are very good. I also like and sometimes use Aptana Studio 3. It is based on Eclipse and does things that normal editors don't.