how can I query a database and put the set of results into a javascript array

@damon2003Apr 05.2005

Hi,

I want to create two drop down menus with javascript attached to them so that they can dynamically change. However I want the results to come from a database (mysql) so that stuff can be added to it. How can the queries be added to a javascript array? I am not sure how to do this,

thanks a lot for any replies

to post a comment

PHP

6 Comments(s) _↴

@solomonApr 05.2005 — #It sounds like a fairly easy job but... when you say 'with javascript attached to them so that they can dynamically change' what exactly are you meaning? Using php to put database results in the menus means they will dynamically change. Or do you mean the javascript will make it even more dynamic?

Do you have an example of the menu script with the javascript - and how you would like it to extend?

@damon2003authorApr 05.2005 — #thanks for reply,

yea I would like to use javascript so that the menus dont have to access the server every time a change is made. I want to have two menus - when an option in the first menu is selected this will determine the selected index of the second menu, when the first menu is changed again a new selected index will appear in the second and so on. So the second is dependent on the first. I have some javascript as follows but have not played around with it enough to know if it is suitable yet:

<script type="text/javascript">



</script>

<form>

<p><select name="cats" size="1"

onchange="return setOptions(cats, opts);">

<option value="0">[pick category]</option>

<option value="1">fruits</option>

<option value="2">vegetables</option>

</select>

   

<select name="opts" size="1">

<option value="0"><---------</option>

</select>

</p>

</form>

thanks a lot

@solomonApr 05.2005 — #That seems easy enough - I assume you know a little about connecting to your DB and writing queries and stuff?

@damon2003authorApr 05.2005 — #yea I am familiar with connecting to dbs and querying them, not an expert yet but can do it

@solomonApr 05.2005 — #OK, here we go. Basically you want to be chopping out two chunks of that javascript - one at the top that creates the js optList array. Then you need to change the bit near the bottom that creates the second drop down menu.

Unfortunately, I don't know my javascript really and although the source code generated by this script is pretty much identical to the code you posted, there's an error on the page. Perhaps someone else around here could help explain why? ?

[code=php]<?
 // YOU CREATE AN ARRAY CALLED $cat FROM YOUR DB
 // WHICH CONTAINS ALL YOUR CATEGORIES
 //
 // YOU ALSO CREATE SECONDARY ARRAYS (ONE FOR EACH CATEGORY, $cat)
 // AND IN EACH OF THESE ARRAYS YOU HAVE THE SUBMENUS. THEY ARE CALLED
 // $subcat[$cat[0]], $subcat[$cat[1]], $subcat[$cat[2]] etc.
 //
 // THE ARRAYS DEFINED BELOW ILLUSTRATE HOW TO ARRANGE
 // YOUR DATABASE GENERATED ARRAYS. I JUST COULDN'T BE BOTHERED
 // WRITING ALL THE QUERIES :)
 
 $cat = array('fruits','vegetables');
 $subcat['fruits'] = array('apples', 'bananas', 'cantaloupe');
 $subcat['vegetables'] = array('carrots','aubergine','celery');
 ?>
 <script type="text/javascript">
 <!--//
 var optList = new Array();
 optList[0] = new Array('<---------');
 <?
 foreach($cat as $catvar => $catval) {
 echo "optlist[" . ($catvar + 1) . "] = new Array('Make a selection'"; 

 foreach($subcat[$catval] as $subcatvar => $subcatval) {
 echo ",'" . $subcatval . "'";
 }
 echo ");n";
 }
 ?>
 //
 function setOptions(cat, opt) {
 var x, y, len = opt.options.length;
 for (y=len-1; y>0; y--) {
 opt.options[y] = null;
 }
 opt.options[0].text = optList[0][0];
 len = cat.options.length;
 for (x=1; x<len; x++) {
 if (cat.options[x].selected) break;
 }
 if (x < len) {
 len = optList[x].length;
 for (y=0; y<len; y++) {
 if (opt.options[y]) {
 opt.options[y].text = optList[x][y];
 opt.options[y].value = y;
 } else {
 opt.options[y] = new Option(optList[x][y], y, false, false);
 }
 }
 }
 return true;
 }
 //-->
 </script>
 
 <form>
 <p><select name="cats" size="1"
 onchange="return setOptions(cats, opts);">
 <option value="0">[pick category]</option>
 <?
 foreach($cat as $catvar => $catval) {
 echo "<option value="" . ($catvar + 1) . "">" . $catval . "</option>n";
 }
 ?>
 </select>
 &nbsp;&nbsp;&nbsp;
 <select name="opts" size="1">
 <option value="0"><---------</option>
 </select>
 </p>
 </form>[/code]

You can see it in action [URL=http://www.thrutch.co.uk/code/webdeveloper/javascript_menu/]here[/URL].

Like I said, it doesn't actually work yet because there's a small javascript bug on the page that I can't seem to track down - maybe someone else can intervene at this point - however the php should be pretty solid and you can see the generated source code so js debugging. Sorry I couldn't give the complete answer :rolleyes:

@solomonApr 05.2005 — #Ah... found it! The problem is with the lack of a capital 'L' ! So the top bit of php in the script I posted should read:

[code=php]
 <?
 foreach($cat as $catvar => $catval) {
 echo "optList[" . ($catvar + 1) . "] = new Array('Make a selection'"; 

 foreach($subcat[$catval] as $subcatvar => $subcatval) {
 echo ",'" . $subcatval . "'";
 }
 echo ");n";
 }
 ?>
 [/code]

Also in #PHP _↴

[RESOLVED] Finding a data in 4 tables please Php I/o

Success!

Help @damon2003 spread the word by sharing this article on Twitter...

Tweet This

how can I query a database and put the set of results into a javascript array

6 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

how can I query a database and put the set of results into a javascript array

6 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #PHP _↴