Jump to content

clickable items in an array


freddyw

Recommended Posts

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

Link to comment
Share on other sites

freddyw,

 

Before you continue any further, you should step back and plan this out.  Do not disregard this step as it is invaluable to development, small and large.  So far you have a result in mind:

[Left side, clickable drink menu] [recipe of clicked drink, dynamically loaded]

 

Now what about the process?

Here are some thoughts to consider:

-Storing text data in files is slow and usually troublesome.  Have you considered using a free database, such as MySQL?

-Your current drink list would create problems.  How would I know what text file to include for which drink?  If I named the file the same.. it might work.. but what if something changed, or what if two drinks had the same names?

 

Suggestions:

-Don't use tables in your design.  CSS is a much more flexible alternative.

-Consider using a database if applicable, otherwise you will have to decide on a file naming convention to avoid conflicts.

-Read up on basic Ajax examples: http://www.w3schools.com/Ajax/ajax_example_suggest.asp

 

Answers:

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?

<?php
    foreach($cocktails as $drink) {
      echo "<li><a href='#'>$drink</a></li>";
    }
?>

 

Before you can jump in and Ajax away, take time to decide how you're going to do it.

Link to comment
Share on other sites

Hi xtopolis. and thankyou for that little bit of code. its made all the difference. I've scripted some ajax into a JS file that is linked into my html on my php file. Id no how to make this work if my otems were not in an array within the php. if they were in html i would

 

<div onclick="show('recipe1.txt');"> Appletini </div>

 

however as u know my items are stored in an array and then drawn into a list from php. I do want to learn php thats why im showing you as much as i can. I want you to know i am trying and not relying on yourself or orthers to do this for me. I just need steering in the right direction as im new to this language and want to master it.

 

Thanks if you take the time to help me[/code]

Link to comment
Share on other sites

So if you were to stick to the method you are using now, you could do something like this:

 

Make the array an associative array (names=>values), in this case being name=>recipefile.

<?php

  $cocktails = array(
    "Appletini"=>"appletini.txt",
    "Mojito"=>"mojito.txt",
    "Fruit Caipirinha"=>"fruit_caipirinha.txt",
    "Seabreeze"=>"seabreeze.txt"
  );


foreach($cocktails as $key=>$value){
  echo '<div onclick="show(\''.$value.'\');"> '.$key.' </div>';
}

?>

 

I only did the first few as an example, but this is a simple way to accomplish what you want.  However, as I said, it is one of many possible options.  Let us know if you need anymore help.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.