PDA

View Full Version : Help with Dropdown Menu Javascript



OneCrispy
06-19-2009, 06:27 PM
Hi,

I am trying to create a PHP/Javascript dropdown menu that gets its results from a My SQL Table. Basiclly its three dropdown menus, the user selects their reigion in the first one, this then searches the My SQL table and finds the reigons, after the user has selected their reigon the second drop down box displays the Gardens/Shows based upon the first results, the third then shows the dates of that event based upon what Garden/Shows the user picks.

The problem that I am having is the fact that it does not seem to display the data from the table, all of the PHP/ My SQL is fine.

The code for it is as follows:


<script language="javascript" src="update.php"></script>
<form name="drop_list" action="sucess.php" method="post"><select name="Main" onchange="SelectCat();">
<option value="">Reigon</option></select>&nbsp;<select id="Category" name="Category" onchange="SelectSubCat();">
<option value="">Garden/Show</option></select><select id="SubCat" name="SubCat">
<option value="">When/Where</option></select></form>

The code for the update.php:



<?php

require "Connection.php";
echo "

function fillCategory(){

";
$q1=mysql_query("select * from `group`");
echo mysql_error();
while($nt1=mysql_fetch_array($q1)){
echo "addOption(document.drop_list.Main, '$nt1[group]', '$nt1[group]');";
}
?>
}

function SelectCat(){

removeAllOptions(document.drop_list.Category);
addOption(document.drop_list.Category, "", "Category", "");

<?

$q2=mysql_query("select distinct(`group`) from category");

while($nt2=mysql_fetch_array($q2)){

echo "if(document.drop_list.Main.value == '$nt2[group]'){";
$q3=mysql_query("select category from category where `group`='$nt2[group]'");
while($nt3=mysql_fetch_array($q3)){
echo "addOption(document.drop_list.Category,'$nt3[category]', '$nt3[category]');";

}
echo "}";
}
?>
}



The code for sucess.php:


function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
selectbox.remove(i);
}
}

function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}
[


Hope you can help, Thanks

Jesdisciple
06-20-2009, 01:19 AM
I'm not able to write any code right now, but I suggest that you try to debug the JavaScript from wthin a static copy of the page rather than developing PHP and JS together.

However, you might want to try placing this at the PHP's start, just to make sure...
error_reporting(E_ALL | E_STRICT);
ini_set('display_errors', 1);

OneCrispy
06-20-2009, 09:32 AM
Thank-You for replying Jesdisciple,

I have tryed your suggestion about the error reporting and it does not report any errors.

I am not desperate for the code yet, so if you could it would be greatfully appreciated.

Thanks again

Jesdisciple
06-20-2009, 05:40 PM
What does update.php look like after the PHP is run? I really don't think it's a good idea to echo an error into JS.

OneCrispy
06-21-2009, 08:39 AM
The Update.php looks like this:


function fillCategory(){ addOption(document.drop_list.Main, 'Scotland', 'Scotland');addOption(document.drop_list.Main, 'North East', 'North East');addOption(document.drop_list.Main, 'North West', 'North West');addOption(document.drop_list.Main, 'Yorkshire', 'Yorkshire');addOption(document.drop_list.Main, 'Wales', 'Wales');addOption(document.drop_list.Main, 'West Midlands', 'West Midlands');addOption(document.drop_list.Main, 'East Midlands', 'East Midlands');addOption(document.drop_list.Main, 'South West', 'South West');addOption(document.drop_list.Main, 'South East', 'South East');} function SelectCat(){ removeAllOptions(document.drop_list.Category); addOption(document.drop_list.Category, "", "Category", ""); if(document.drop_list.Main.value == 'Scotland'){addOption(document.drop_list.Category,'Gardening Scotland Show', 'Gardening Scotland Show');addOption(document.drop_list.Category,'Royal Botanic Gardens Edinburugh', 'Royal Botanic Gardens Edinburugh');}if(document.drop_list.Main.value == 'North East'){addOption(document.drop_list.Category,'Crook Hall Gardens', 'Crook Hall Gardens');addOption(document.drop_list.Category,'Lancoshire Show', 'Lancoshire Show');}if(document.drop_list.Main.value == 'North West'){addOption(document.drop_list.Category,'RHS Show Tatton Park', 'RHS Show Tatton Park');addOption(document.drop_list.Category,'Knowsley Flower Show', 'Knowsley Flower Show');addOption(document.drop_list.Category,'Fletcher Moss Botanical Gardens', 'Fletcher Moss Botanical Gardens');}if(document.drop_list.Main.value == 'Yorkshire'){addOption(document.drop_list.Category,'RHS Harlow Carr', 'RHS Harlow Carr');addOption(document.drop_list.Category,'Harrogate Autumn Flower Show', 'Harrogate Autumn Flower Show');}if(document.drop_list.Main.value == 'Wales'){addOption(document.drop_list.Category,'RHS Spring Show Cardiff', 'RHS Spring Show Cardiff');addOption(document.drop_list.Category,'National Botanic Gardens of Wales', 'National Botanic Gardens of Wales');}if(document.drop_list.Main.value == 'West Midlands'){addOption(document.drop_list.Category,'BBC Gardeners World Live', 'BBC Gardeners World Live');addOption(document.drop_list.Category,'Charlecote Park', 'Charlecote Park');addOption(document.drop_list.Category,'Birmingham Botanical Gardens', 'Birmingham Botanical Gardens');}if(document.drop_list.Main.value == 'East Midlands'){addOption(document.drop_list.Category,'Linconshire Show', 'Linconshire Show');addOption(document.drop_list.Category,'Renishaw Hall', 'Renishaw Hall');addOption(document.drop_list.Category,'Chatsworth Derbyshire', 'Chatsworth Derbyshire');}if(document.drop_list.Main.value == 'South West'){addOption(document.drop_list.Category,'RHS Garden Rosemoor', 'RHS Garden Rosemoor');addOption(document.drop_list.Category,'Killerton House and Gardens', 'Killerton House and Gardens');addOption(document.drop_list.Category,'Eden Project Cornwall', 'Eden Project Cornwall');}if(document.drop_list.Main.value == 'South East'){addOption(document.drop_list.Category,'RHS London Harvest Show', 'RHS London Harvest Show');addOption(document.drop_list.Category,'Royal Botanic Gardens Kew', 'Royal Botanic Gardens Kew');addOption(document.drop_list.Category,'RHS Hampton Court Palace Flower Show', 'RHS Hampton Court Palace Flower Show');}}

Jesdisciple
06-22-2009, 04:28 AM
=\ I use PHP to generate dynamic JS (and CSS) myself, but PHP shouldn't get in the way of debugging the JavaScript. In fact, I'm curious whether you're actually gaining anything by doing that, as no variables seem to be passed to the PHP to influence its output.

So, in the interest of looking at everything after PHP, can you give a URL which demonstrates the problem? (This is actually standard practice on DD, but I guess I'm still learning why.) I won't be looking at anything until I can avoid the PHP.

OneCrispy
06-22-2009, 04:04 PM
Dear Jesciple,

Here is the URL of the drop down menu: http://amateur-gardeners.co.uk/Gardens-and-Shows.php

As you can see nothing is shown in the drop down menus.

Thanks again

Jesdisciple
06-22-2009, 05:41 PM
There's a syntax error on the very last line of this script:
syntax error
http://amateur-gardeners.co.uk/sucess.php
Line 22The line reads (\n is a real newline in the file):
[\n

OneCrispy
06-22-2009, 06:45 PM
How would I fix this error?

Thanks

Jesdisciple
06-22-2009, 07:03 PM
Just remove the line... It's invalid because you start an array and never finish it.

OneCrispy
06-22-2009, 07:12 PM
I cant find the line with the [\n on?

Jesdisciple
06-22-2009, 07:30 PM
Weird... The error is gone. Anyway, try removing the first two lines from sucess.php. If some PHP actually executes on that script, you could move the lines inside the PHP tags.

EDIT: BTW, why is a script set as your form's action?
error_reporting(E_ALL | E_STRICT);
ini_set('display_errors', 1);

function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
selectbox.remove(i);
}
}

function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}

OneCrispy
06-22-2009, 07:39 PM
I'm not sure why it is set as my forms action, I got this off a tutorial and so do not know about why everything is there.

Tutorial URL: http://teamtutorials.com/web-development-tutorials/pulling-drop-down-values-from-a-database-using-javascript-and-php

Jesdisciple
06-22-2009, 07:58 PM
What is sucess.php intended to do? Somehow I don't think it should be printing JavaScript.

Did the tutorial also give you the addthis_widget.js script? Look what I found (http://drupal.org/node/364078) about that.

I was looking into the AddThis script because it registers a window.onload handler. The script is condensed to one line so I can't set breakpoints in Firebug. What happens if you don't link to that script?

Jesdisciple
06-22-2009, 08:34 PM
I built the application from the tutorial, and I think I found your problem. I do still want to know why you're using AddThis.

Change update.php to this, and erase everything from sucess.php.
<?php
header('Content-type:text/javascript');
require "connection.php";
echo "

function fillCategory(){

";
$q1=mysql_query("select * from `group`");
echo mysql_error();
while($nt1=mysql_fetch_array($q1)){
echo "addOption(document.drop_list.Main, '$nt1[group]', '$nt1[group]');";
}
?>
}
function SelectCat(){

removeAllOptions(document.drop_list.Category);
addOption(document.drop_list.Category, "", "Category", "");

<?
$q2=mysql_query("select distinct(`group`) from category");

while($nt2=mysql_fetch_array($q2)){

echo "if(document.drop_list.Main.value == '$nt2[group]'){";
$q3=mysql_query("select category from category where `group`='$nt2[group]'");
while($nt3=mysql_fetch_array($q3)){
echo "addOption(document.drop_list.Category,'$nt3[category]', '$nt3[category]');";

}
echo "}";
}
?>
}
function SelectSubCat(){

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

<?

$q4=mysql_query("select distinct(`category`) from subcategory");

while($nt4=mysql_fetch_array($q4)){

echo "if(document.drop_list.Category.value == '$nt4[category]'){";
$q5=mysql_query("select subcategory from subcategory where `category`='$nt4[category]'");
while($nt5=mysql_fetch_array($q5)){
echo "addOption(document.drop_list.SubCat,'$nt5[subcategory]', '$nt5[subcategory]');";

}
echo "}";
}
?>
}
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
selectbox.remove(i);
}
}

function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}

OneCrispy
06-23-2009, 04:17 PM
Dear Jesdisciple,

The Addthis is a widget which I have on the sidebar of my site for RSS. Should I get rid of it?

Also should I get rid of the line which refers to the sucess.php?

Many thanks for your help

Jesdisciple
06-23-2009, 05:48 PM
Based on that Drupal bug report, I would think your users would appreciate the move. In case you want to notify them of the issue or delete your own cookie, see this article (http://www.ghacks.net/2008/07/30/delete-flash-cookies/). Relevant "Shared Objects" that I found were from bin.clearspring.com and (possibly) widgets.clearspring.com, based on the Drupal report.

No, don't get rid of the reference to sucess.php, nor delete the file. You'll need to put a page in it instead of the JS that was there. The tutorial mentioned sucess.php around the same place as update.php, but no code was provided for sucess.php. You need to write some PHP and HTML in it to handle the form submission.

OneCrispy
06-23-2009, 06:32 PM
Could you help me write some code for sucess.php?

Thanks again

Jesdisciple
06-23-2009, 10:27 PM
I'd be glad to help, but I want you to try first. I'm not completely consistent about this, but I try to put only as much effort into helping as you put into trying. That lightens my load in the short term and (hopefully) the whole online help culture's in the long term. More importantly, it makes you learn instead of just ask for help.

Do you know what you want to do when the form is submited?

OneCrispy
06-24-2009, 03:40 PM
Well I want the form to show what is in the table
Would this be possible?

Thanks again

Jesdisciple
06-24-2009, 11:09 PM
Sorry, forgot to check my email till now.

I'm sure that's possible, so long as you can find the table from the selected values. I can't say much beyond that because I don't know how your database is structured.

Once you manage to show the table on sucess.php, you might be able to transfer the logic so the page doesn't need to reload.

However, something just occured to me... This JS solution is very obtrusive, i.e. users without JS enabled can't use the page. The best way I can think of to solve this is a three-step form submission. Each submission adds a GET variable to the URL and replaces the current menu with the next one.

OneCrispy
06-25-2009, 07:04 PM
This sounds like a good idea. How would I do this?

Thanks

Jesdisciple
06-26-2009, 12:52 AM
Well, I can tell from looking at his code that it involves a complete overhaul of the script. But can you ask a more specific question please?

OneCrispy
06-26-2009, 04:06 PM
Well if the new script is quite complicated then I might just stick to the original version.
Could you please help me with the sucess.php as I am not particulary good at PHP or Javascript?

Thanks again

Jesdisciple
06-26-2009, 05:33 PM
I'm really not a good teacher, so if you would ask questions it would really help me out. In case you don't know yet, here's the official documentation for JavaScript/JScript:
https://developer.mozilla.org/En/JavaScript
https://developer.mozilla.org/en/Gecko_DOM_Reference
http://msdn.microsoft.com/en-us/library/yek4tbz0(VS.85).aspx
http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx
ECMA-262 (http://javascript.wikia.com/wiki/ECMA-262), the ECMAScript specification, which governs JavaScript/JScript.

and PHP:
http://php.net/manual/en/

And wikis for the same, both of which can be expanded or corrected by you:
http://javascript.wikia.com/wiki/ (I administrate this one.)
http://php.wikia.com/wiki/

Now, here's an unobtrusive PHP solution. I wanted to get you to build it, but I had too much fun on my own and got carried away. =P Unlike the original solution, it's scalable, i.e. it will work with any number of dropdowns without significant alterations (just another array value). Note that it's incomplete because after the last option it tries to keep going (see the comment in the middle). It's also not JS-enabled yet.


<?php
require "connection.php";

$tables = array('Main' => 'group', 'Category' => 'category', 'SubCat' => 'subcategory');
$gets = array_keys($tables);
$hidden = array();
for($i = 0; $i < count($gets) && isset($_GET[$gets[$i]]); $i++) // Find the most specific GET value.
$hidden[$gets[$i]] = $_GET[$gets[$i]]; // Transfer all GET values to hidden fields.

if($i == count($gets)){
// We're done... Show the results and prevent the form PHP/HTML from executing.
}

$selection = '';
if($i > 1)
$selection = "`{$tables[$gets[$i - 1]]}`, ";
$selection .= "`{$tables[$gets[$i]]}`";

$query = mysql_query("select $selection from `{$tables[$gets[$i]]}`");
echo mysql_error();
$options = array();
while($result = mysql_fetch_array($query))
array_push($options, $result[$tables[$gets[$i]]]);
?>
<html>
<head>
<title>Javascript Form Updater</title>
</head>
<body>
<form name="drop_list" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
<?
foreach($hidden as $name => $value)
echo "<input type=\"hidden\" name=\"$name\" value=\"$value\">";
?>
<select name="<?php echo $gets[$i]; ?>">
<option value=""><?php echo $gets[$i]; ?></option>
<?
foreach($options as $option)
echo "<option value=\"$option\">$option</option>";
?>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>

OneCrispy
06-27-2009, 08:07 AM
Thanks Jesdisciple,

How would I enable the javascript and finish off the code? As I really need it by the beginning/middle of July.

Thank You in advance of your reply

Jesdisciple
06-27-2009, 03:26 PM
... Given the context (free online help), your attitude seems kind of arrogant. I don't owe this to you, and I certainly don't have the duty to meet your deadline.

Whenever I help someone with programming, I expect that person to learn about the language and/or techniques used. Your scholarship (will to learn) is my payment, but in this case I don't see it coming.

I have a Catch-22: I can tell you to forget it, you're not getting the rest of the code; it's already written so I don't really want to do that. Or I can give it to you and encourage your attitude...

This admittedly feels weird to me so I hope I'm not being arrogant myself, but those are my ethics. I don't know how to teach except by answering questions, and I don't know how to get questions from you except by explaining my perspective.

Please ask questions, about the PHP already given or about the other problems.

OneCrispy
06-28-2009, 09:41 AM
Sorry Jesdisciple I will try and ask questions about things that I recive along the way.
One error that I seem to be encounting with this script is: Parse error: syntax error, unexpected T_STRING, Is this because I need to finish off the code?

Many thanks again,

OneCrispy

Jesdisciple
06-28-2009, 06:44 PM
What line number comes with the error? (Always give the whole error, not just the message.)

What about the actual logic? Is there anything in that PHP that you don't understand, or you don't understand why I used it?

If you "get" the PHP, what part of the rest of the problem/solution do you not?

OneCrispy
06-29-2009, 03:49 PM
This is the specific error: Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /home/amateurg/public_html/Gardens-and-Shows.php on line 144

Thanks again

Jesdisciple
06-29-2009, 04:17 PM
My script doesn't have a line 144; unless you pasted my script into another, I don't think that's my fault. Even if you are doing that, you must be using an outdated PHP version because I don't get that error at all. Can you post the entire PHP from that page?

You've been skipping over my programming questions the entire thread, so I have to wonder... How much PHP or JavaScript have you learned so far? Do you have any other languages under your belt?

By the way, most of the folks who help here probably wouldn't have responded very long. I have a habit of responding to the 0-response threads and trying to teach forum etiquette, but I do take note of the askers who aren't interested in learning. If you don't put any effort into learning to program and solving your own problems before/during your next thread, you'll end up on that list. (EDIT: To make it more explicit, I'll deliberately not respond to the folks on that list.)

OneCrispy
06-29-2009, 04:37 PM
Thank You Jesdisciple it Works!!!

The only problem that I am having is I want the specific reigons to show the specific show to that reigon and the date.

How would I do this?

Thank-You so much again

Jesdisciple
06-30-2009, 03:14 AM
I don't even know what the details of your code are, so I have no clue.

I was going to give you the finished implementation, but you're not even willing to admit you haven't learned programming yet. This makes it obvious that you didn't learn anything about forum etiquette either.

Bye... until you learn to work for your own answers.

OneCrispy
06-30-2009, 04:19 PM
Dear Jesdisciple,

I fail to see what big problems I have caused, I have asked questions fairly specific to the problem and tryed my best at learning a new code. I don't always have the time to learn a completly new code in full as I only do my website part-time in the evenings. But I would like to take the time to say thank-you for all the work and help you have given me so far on this project.

If you could still help me out on this project then the code for it so far is:


<?php
require "connection.php";

$tables = array('group' => 'group', 'category' => 'category', 'subcat' => 'subcategory');
$gets = array_keys($tables);
$hidden = array();
for($i = 0; $i < count($gets) && isset($_GET[$gets[$i]]); $i++) // Find the most specific GET value.
$hidden[$gets[$i]] = $_GET[$gets[$i]]; // Transfer all GET values to hidden fields.

if($i == count($gets)){
// We're done... Show the results and prevent the form PHP/HTML from executing.
}

$selection = '';
if($i > 1)
$selection = "`{$tables[$gets[$i - 1]]}`, ";
$selection .= "`{$tables[$gets[$i]]}`";

$query = mysql_query("select $selection from `{$tables[$gets[$i]]}`");
echo mysql_error();
$options = array();
while($result = mysql_fetch_array($query))
array_push($options, $result[$tables[$gets[$i]]]);
?>
<html>
<head>
<title>Javascript Form Updater</title>
</head>
<body>
<form name="drop_list" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
<?
foreach($hidden as $name => $value)
echo "<input type=\"hidden\" name=\"$name\" value=\"$value\">";
?>
<select name="<?php echo $gets[$i]; ?>">
<option value=""><?php echo $gets[$i]; ?></option>
<?
foreach($options as $option)
echo "<option value=\"$option\">$option</option>";
?>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>

Thank-You again for all the help you have given me over the past few posts.

OneCrispy

Jesdisciple
06-30-2009, 04:50 PM
Agh... It's so hard to read people over the net, so I need to give you the benefit of the doubt. However, can you please explain why you've skipped all my pointed questions - even the one in bold?

By the way, it's not exactly that you've caused problems, but that you seem to be mooching... Too many people do that in free forums, so I try to detect it. I'm not the most socially apt person in reality, let alone online. And I really hate playing the meanie...

Anyway, here is the full implementation: PHP (http://php.wikia.com/wiki/Layered_database_dropdowns) JavaScript (http://javascript.wikia.com/wiki/LayeredDbSelects.js) Note that the JavaScript needs to be in a .php file (I suggest layeredDbSelects.js.php).

As for your question, the result page goes at the bottom of index.php. I don't know how you have to use the result table... How is it structured?

OneCrispy
06-30-2009, 05:33 PM
Dear Jesdisciple,

Thank-You for taking the time to publish and adapt the code from the tutorial, it is of great help. However how would I get it so that when the user selects an option from the first dropdown the second one populates based on the selection of the first and the same for the third.
My database is structured like the one in the tutorial http://teamtutorials.com/web-development-tutorials/pulling-drop-down-values-from-a-database-using-javascript-and-php/

As for your question, I did look at the documentation etc breifly but I didn't think that it was too relevant to my problem and I learn more by copying code and adapting it for my own uses.

Thank-You very much again for publishing the code and I hope you can help me out with my problem.

OneCrispy

Jesdisciple
06-30-2009, 10:04 PM
However how would I get it so that when the user selects an option from the first dropdown the second one populates based on the selection of the first and the same for the third.
JSON is not defined
http://amateur-gardeners.co.uk/layeredDbSelects.js.php
Line 3That's because you need this script (http://www.json.org/json2.js); I tried to get the link into the PHP article in time, but that was only 17 minutes before your post.

EDIT: Also, please replace the first PHP code block in the JavaScript with this one, so no browsers will be confused about what's in the file:
<?php
header('Content-type:text/javascript');
require 'layers.php'
?>


As for your question, I did look at the documentation etc breifly but I didn't think that it was too relevant to my problem and I learn more by copying code and adapting it for my own uses.Erm... That's what I mean by mooching, although I give you credit that you apparently don't think of it that way, which would mean you were very unlikely to even consider changing. The techie jargon for that is "code monkey," and I'm trying to get you out of that phase. (And I don't think "learn" is an appropriate term for that activity.)

I don't care for thanks nearly as much as you writing your own code. That is my ultimate success for this venture.


As for your question, I did look at the documentation etc breifly but I didn't think that it was too relevant to my problem and I learn more by copying code and adapting it for my own uses.Heh, that wasn't the question I meant. I meant the questions I asked regarding where you are in your learning. You seemed to be deliberately avoiding them, which was one of my main reasons for calling you out.

OneCrispy
07-03-2009, 05:10 PM
Jesdisciple,

The form only now populates only the first dropdown feild and not the others? What is the cause of this problem? http://amateur-gardeners.co.uk/Gardens-and-Shows.php

Thanks again,

OneCrispy

Jesdisciple
07-03-2009, 05:21 PM
Oops... I was using a library of mine that wasn't working right, so I removed the only reference to it that I recalled. I apparently missed one; change line 50 from
element.registerEventListener('change', displayOptions);to
element.onchange = displayOptions;

In this case it wouldn't have helped much, but note that your browser (I'm guessing Internet Explorer?) has a way for you to view errors. In IE it's the yellow warning-sign icon at bottom-left; in Firefox it's Tools->Error Console. In this case the error was:
element.registerEventListener is not a function
http://amateur-gardeners.co.uk/layeredDbSelects.js.php
Line 50

OneCrispy
07-04-2009, 05:48 PM
Thank-You for this update Jesdisciple it now works!

How could I change the titles of the three columns to: Reigon, Garden/Show, When/Where

Thank-You so much again for your help across all of the posts and a good result overall!

OneCrispy

Jesdisciple
07-04-2009, 05:57 PM
The dropdown names and titles are both determined by the keys in this array, in connection.php:
$tables = array('Main' => 'group', 'Category' => 'category', 'SubCat' => 'subcategory');The table names are the values.

EDIT: Also, I really should have mentioned this earlier, and had intended to several times but kept forgetting... The license on each file in the application is the GNU GPL, which means your application is required to use the same license. Interpretations vary in the web context, but the strictest and safest is to release your site's logic (not passwords or anything like that) as plaintext on a special section of the site, and place a link on every page to this section.

You can read the GPL by following the link on either wiki.

OneCrispy
07-04-2009, 07:14 PM
Thank-You Jesdiciple it now works with the titles I wanted.

I will take into account your GNU licence and declare the thread resolved.

Thank-You very much again for your help,

OneCrispy

OneCrispy
07-05-2009, 11:44 AM
Dear Jesdiciple,

After trying the dropdown menu on IE (as I normally use Firefox) I was confronted with this error:

Message: Object required
Line: 31
Char: 4
Code: 0
URI: http://www.amateur-gardeners.co.uk/layeredDbSelects.js.php

Also it only seems to show 1 dropdown box? It must be because of the error.

Sorry for the hasstle as it works fine on firefox but as the greater population have yet to be converted to the wonder of Firefox I only thought it right to make it work!

Thanks again,

OneCrispy

Jesdisciple
07-05-2009, 09:05 PM
Well, I can't help with this just yet because I'm on Linux and ies4linux isn't giving me an address bar. But this is line 31, and I don't see any problem:
if(element.tagName.toLowerCase() == ('select') && element.name == keys[i0]){Three tabs precede the 'if' so char 4 should be the 'i'... Why would IE expect an object there? ...*shrug*

If the Ubuntu/Wine gurus can figure out how to get IE running, I'll post again.

Jesdisciple
07-06-2009, 05:18 PM
Are you using IE 7 or 8?

As I don't think IE 7 is going to work (and IE 8 isn't available), I got some insight from IE 6:


Line: 32
Char: 4
Error: 'tagName' is null or not an object
Code: 0
URI: http://www.amateur-gardeners.co.uk/javascript.php

While I was typing this message, IE locked my computer so you'll have to complete the testing. The problem line is in a loop, so I don't advise alerting anything. Instead, install Firebug Lite (http://getfirebug.com/lite.html) on the page and find line 30 or 31 (whichever it is) and change it to this (the first line is already there):

var element = form.elements[i1];
console.log(element);

Run the page and tell me what shows up in the console. (If you don't find a console, take a screenshot and maybe I can.)

Jesdisciple
07-07-2009, 10:59 PM
Alright, a guru just got IE 7 running for me, so here's the IE-compatible JS:
<?php
header('Content-type:text/javascript');
require 'layers.php'
?>

(function(){
var levels = JSON.parse('<?php echo json_encode($levels) ?>');
var keys = JSON.parse('<?php echo json_encode($keys) ?>');

var _GET = (function(){
var query = window.location.search;
if(query.length == 0 || query.charAt(0) != '?')
return {};
var array = query.substring(1).split(/&/);
var _GET = {};
for(var i = 0; i < array.length; i++){//> My editor thinks that less-than is HTML...
var assign = array[i].indexOf('=');
if(assign == -1)
_GET[array[i]] = true;//if no value, treat as boolean
else
_GET[array[i].substring(0, assign)] = array[i].substring(assign + 1);
}
return _GET;
})();

for(var i0 = 0; i0 < keys.length && typeof _GET[keys[i0]] != 'undefined'; i0++)//> Find the most specific GET value.
levels[keys[i0]] = undefined; // We don't need these data.

window.onload = function(){
var form = document.forms.namedItem('drop_list');
var after;
for(var i1 = 0; i1 < form.elements.length; i1++){//>
var element = form.elements[i1];
if(element.tagName.toLowerCase() == 'select' && element.name == keys[i0]){
after = element.nextSibling;
break;
}
}
for(var i1 = i0 + 1; i1 < keys.length; i1++){//>
var select = document.createElement('select');
select.name = keys[i1];

//Display the menu's name.
var option = document.createElement('option');
select.appendChild(option);
option.value = '';
option.appendChild(document.createTextNode(keys[i1]));
form.insertBefore(select, after);
}
for(var i1 = 0; i1 < form.elements.length; i1++){//>
var element = form.elements[i1];
if(element.tagName.toLowerCase() == 'select' && element.name == keys[i0++])
element.onchange = displayOptions;
}

function displayOptions(change){
var element = change.target;
var index = keys.indexOf(element.name);
if(index == -1 || index == keys.length - 1)// We're done.
return true;

var select = element.form[keys[index + 1]];
for(var i = 1; i < select.length; i++)//> Out with the old...
select.remove(i);

var values = levels[keys[index]][element.value];
for(var i in values){// In with the new.
var option = document.createElement('option');
option.value = i;
option.appendChild(document.createTextNode(i));
select.add(option, null);
}
}
};
})();

OneCrispy
07-08-2009, 03:15 PM
Jesdiciple,

Many thanks for this new code but unfortunatly it still dosent work as I recive this error:

Message: 'target' is null or not an object
Line: 53
Char: 4
Code: 0
URI: http://amateur-gardeners.co.uk/layeredDbSelects.js.php

I hope you can help and many thanks for your patience through this long thread.

Jesdisciple
07-08-2009, 03:29 PM
Weird... I don't get any errors at all; are you using IE 8 (the latest)? I think that's an ancient problem; I don't know why it would be in 8 but not 7.

I hope this will fix it, but I can't tell for sure: http://javascript.wikia.com/wiki/LayeredDbSelects.js#Source_code

EDIT: BTW, the fix is to use change.element || change.srcElement. IE supposedly supports the second but not the first. If the first evaluates to false (null, undefined, 0, false, an empty array, or (maybe) and empty object), the second is used. A non-existent property has a value of undefined. It works the same as with Boolean values (true and false).

OneCrispy
07-08-2009, 03:32 PM
I'm using IE 8 and unfortunatly it comes up with the same error but only after you select from first dropdown

Thanks Again

OneCrispy
07-08-2009, 03:37 PM
Jesdisciple,
Could you give me the old code that was in place there as then I can replace it with correct one.

Jesdisciple
07-08-2009, 04:36 PM
I didn't realize you were getting the error while using the menus; I was only testing the page's loading. I should have thought of that, but it's always a good idea to give the steps to reproduce a problem. (If you ever formally report a bug, not doing this can get it rejected.)

Anyway, I finally managed to get all the menus working. My changes are here (http://javascript.wikia.com/index.php?title=LayeredDbSelects.js&diff=4394&oldid=4391).

I'm going to ask about best practice for the hack I commented on in the code...

EDIT: What do you mean in your last post? I got very confused.

OneCrispy
07-08-2009, 05:47 PM
Dear Jesdiciple,

Many thanks for your help it now works on IE!!!

One question: How do I mark the thread resolved?

Thanks again,

OneCrispy

Jesdisciple
07-09-2009, 02:21 AM
Editing "[RESOLVED]" into the original post's title might work, but this forum doesn't have the simplified feature of Thread Tools > Mark thread as resolved.