clickable itmes in an array

freddyw · December 2, 2008

hello there. Im new to this forum, and to the wonderful world of PHP. before i ask for help, let me 1st explain what i want to accheive. I want to create a table with two columns. in one column is a list of cocktails. the second column will be blank until a cocktail on the left is clicked. Once a cocktail is clicked the recipe to make the cocktail will appear in the right hand column. each recipe will be stored in a .txt file which the PHP will show once its clicked. heres my code so far...

<html>
  <head>
    <title>cocktail bar</title>
      <link rel="stylesheet" href="style.css" type="text/css" />

      </head>
        <body>

              <script type ="text/javascript src ="cocktailbar.js">
            </script>

<h1><center>Welcome to the Virtual Cocktail Bar</center><h1>
<table border="5" summary = "cocktails">
  <tr>
    <td rowspan="12">
      <ul>

<?php

    $cocktails = array("appletini", "mojito", "fruit caipirinha", "caipirinha", "seabreeze", "lynchburg", "espresso", "martini", "cosmopolitan", "bellini", "key west cooler", "long island iced tea");
    foreach($cocktails as $key => $value) {
    echo $key . " " . $value . "<br>";
    }

?>


      </ul>

    <td rowspan="12">

    </td>
  </tr>
</table>

</body>
</html>

what this displays is a one column table with the cocktails, and a number infront of each cocktail.

what is my next step from here? i want to make each cocktail clickable, and once clicked the recipe to be put into the right hand column. also is it possable to hide the numbers that the array creates?

any help would be appreciated.

thankyou

chronister · December 3, 2008

Sounds like you need some Ajax. Ajax will allow you to respond to a javascript onClick event and trigger some server side code (retrieving the drink information).

Look for the Ajax script in the code repository here on PHPFreaks. It is a very simple ajax script and can be tailored to do what you want. http://www.phpfreaks.com/forums/index.php/topic,155984.0.html

I used it to take an item from a select input and retrieved a date from a database for that particular item.

I would make your list a select dropdown list, and create a div area for your text to display.

Nate

freddyw · December 3, 2008

Thanks for your help. I've looked at that script and not entirely sure how to change it for what i want. Im not going to ask you to script it for me, because it will take time that i dont expect you to give up, but can a fe pointers would be nice if you could?

chronister · December 3, 2008

The ajax function, accepts 2 parameters, But can be made to accept 3 to make it more universal. The 1st one is the ID you wish to target for the data to be put into. The second is the value of the item that has been selected. The 3rd is the script you wish to use to process it.

I have put together a simple example.

<!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>
<script>
	function ajaxFunction(ID, Param, loaderphp)
	{
		//we don't need to change anymore of this script
		var xmlHttp;
		try{
			// Firefox, Opera 8.0+, Safari
			xmlHttp=new XMLHttpRequest();
		 }catch(e){
			// Internet Explorer
			try{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				try{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e){
					alert("Your browser does not support AJAX!");
					return false;
				}
			}
		}
		 xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4){
				document.getElementById(ID).innerHTML = xmlHttp.responseText;
			  }
		}
		 xmlHttp.open("GET", loaderphp+"?Param="+Param,true);
		 xmlHttp.send(null);
	}
</script>
<title>Ajax Test</title>
</head>
<body>

<div style="width:15%; margin-right:10px; float:left">

	<select name="mySelectList" id="mySelectList" onchange="ajaxFunction('TargetDiv', this.value, 'processIt.php');">
		<option value="Appletini">Appletini</option>
		<option value="Mojito">Mojito</option>
	</select>
</div>

<div style="width:65%; float:left" id="TargetDiv" name="TargetDiv" > Here is the target Div. This text will be replaced.</div>

</body>
</html>

processIt.php

<?php
if(isset($_GET['Param']))
{
$theParam = $_GET['Param'];

switch($theParam){
	case 'Appletini';
	$recipe = '1 1/2 oz Smirnoff® Green Apple Twist vodka<br>
				  1 oz DeKuyper® Sour Apple Pucker schnapps';
	break;
	case 'Mojito';
	$recipe = '3 fresh mint sprigs<br />
				  2 tsp sugar<br />
				  3 tbsp fresh lime juice<br />
				  1 1/2 oz light rum<br />
				  club soda';
	break;

	}

	echo $recipe;


}
?>

I added the 3rd parameter, which allows you to pass the name of the script you want to use for processing. The PHP script is very simple. It takes the variable passed in the Ajax function and goes through a switch statement to find the match. You would make this file the script that grabs the txt doc and parses it to display your drink recipe.

Hope this helps you understand it more. Post back if you want clarification.

Nate

adx · December 3, 2008

Couldn't you do this with a simple drop down from and

Php Switch?

This way you could select a cocktail hit go! and view the recipe or any other

information about the drink. This was just the easiest way I could think of.

chronister · December 3, 2008

Couldn't you do this with a simple drop down from and

Php Switch?

This way you could select a cocktail hit go! and view the recipe or any other

information about the drink. This was just the easiest way I could think of.

I use a switch statement and it is the same concept, but you don't have to hit the submit button and refresh the page.

freddyw stated that the drink recipes are in a txt file. You could use a switch statement to grab the txt file and parse it, but a switch statement is basically a shorhand version of an if / elseif / elseif / elseif / else statement.

Either way will work, it boils down to 1 question. Do you want a page refresh or not. In this scenario, I would say a page refresh is not necessary. Just my opinion though.

Nate

adx · December 3, 2008

Couldn't you do this with a simple drop down from and

Php Switch?

This way you could select a cocktail hit go! and view the recipe or any other

information about the drink. This was just the easiest way I could think of.

Either way will work, it boils down to 1 question. Do you want a page refresh or not. In this scenario, I would say a page refresh is not necessary. Just my opinion though.

True, though it kind of depends on how many cocktails they've got and how complicated the recipe is. I prefer mine simple, jack->coke->done.

chronister · December 3, 2008

Sorry, I don't see how the complexity of the drink makes a difference on whether or not a page refresh is desired.

I think the number of drinks and the complexity of them would potentially determine whether a database should be used instead of txt files, but I think the Ajax thing is a good way to go regardless. It saves the step of hitting the submit button.

jack->coke->done

I am not a drinker, but a jack and coke is a good choice from time to time

freddyw · December 4, 2008

thanx alot chronister and other people who have commented here

this is exactly what i was looking for. i cant thank you enough.

chronister · December 4, 2008

thanx alot chronister and other people who have commented here

this is exactly what i was looking for. i cant thank you enough.

You can make the check payable to Nathan and send it to PO Box 123 ......

just kidding. Your welcome.

freddyw · December 5, 2008

your cheque is in the mail

ive edited the code to add al cocktails and all recipes. I know the recipes are short and not correct, i want to keep it fairly simple for the second part of this. For some reason its throwing up an error code. I dont know why, ive followed the code exactly. im sure im just missing something like ' or ; but i cant find it. i spent a fair amount of time debugging. Can you see it?

<?php
if(isset($_GET['Param']))
{
   $theParam = $_GET['Param'];
   
   switch($theParam){
      
      case 'Appletini';
      $recipe = '1 vodka<br>
                 1 apple schnapps';
      
      break;
      case 'Mojito';
      $recipe = '2 tsp sugar<br />
                 3 lime juice<br />
                 2 rum<br />
                 1 soda water';
      break;
      case  'Caipirinha' ;
      $recipe = '1 lime juice<br />
                 3 sugar<br />
                 2 Cachaca'
      
      
      break;
      case 'Fruit Caipirinha';
      $recipe = '1 lime juice<br />
                 1 sugar<br />
                 2 Cachaca<br />
                 2 passion fruit juice'
     
      break;
      case 'Seabreeze';
      $recipe = '1 lvodka<br />
                 1 cranberry juice<br />
                 1 grapefruit juice'
                 
      break;
      case 'Lynchburg';
      $recipe = '2 JD Whiskey<br />
                 4 lemonade'
                 
      break;
      case 'Espresso Martini';
      $recipe = '1 espresso<br />           
                 2 vodka'
                
      break;
      case 'Cosmopolitan';
      $recipe = '2 vodka<br />
                 1 lime juice<br />
                 1 cranberry juice'
                 
      break;
      case 'Bellini';
      $recipe = '4 champagne<br />
                 1 peach juice'
                 
      
      break;
      case 'Key West Cooler';
      $recipe = '1 rum <br />
                 2 vodka<br />
                 1 peach schnapps<br />
                 1 cranberry juice'
                 
      break;
      case 'Long Island Iced Tea';
      $recipe = '1 rum<br />
                 1 vodka<br />
                 1 coca cola'
      
      break;
      
      }
      
      
      echo $recipe;
      
   
}
?>

thanks

premiso · December 5, 2008

It helps giving us the error message, but thankfully your code has soo many errors it was not hard:

      case  'Caipirinha': // Should be Colon ( not semi-colon (
      $recipe = '1 lime juice<br />
                 3 sugar<br />
                 2 Cachaca';  // need a semi-colon here.

Rinse and repeat for each case you have.

Sign In

clickable itmes in an array

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information