Chained Selects in modal window

**Andy Sandoval** · 01-16-2013, 02:39 AM

Hello everyone/anyone,

I am trying to put chained selects menu within a modal window. I have succeeded in doing this, but the problem is, the page I'm trying to implement them on has 4 different modal windows, each with it's own separate chained menu.

I have the page linked to the .js file:

HTML Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script language="javascript" src="chainedselects.js"></script>
<script language="javascript" src="exampleconfig.js"></script>

I have the body onLoad function, which I believe is correct:

HTML Code:

<body onLoad="initListGroup('headtorx', document.forms[0].make, document.forms[0].type, document.forms[0].model, document.forms[0].measurement, document.forms[0].SizeDrive);
initListGroup('headhex', document.forms[0].make1, document.forms[0].type1, document.forms[0].model1, document.forms[0].measurement1, document.forms[0].SizeDrive1);">

(listing is only for 2 lists)

and in the config.js file, these are the starts, as the whole code is rather extensive:

Code:

addListGroup("headtorx", "head-type");

addList("head-type", "Select a head type", "", "dummy-type", 1);
addList("head-type", "Button Head", "Button Head", "Button Head");
addList("head-type", "Flat Head", "Flat Head", "Flat Head");

and:

Code:

addListGroup("headhex", "hexhead-type");

addList("hexhead-type", "Select a head type", "", "dummy-type", 1);
addList("hexhead-type", "Button Head", "Button Head", "hexButton Head");
addList("hexhead-type", "Flat Head", "Flat Head", "hexFlat Head");

I initially had the config.js files separate, as they were used on different pages just to test.
They were named config_torx and config_hex.

Now, I need to put them on the same page as separate modal windows.

The Torx menu works, but the Hex does not. It only shows a blank window.

Can anyone help.

Thanks in advance.

Andy

**ajfmrf** · 01-16-2013, 11:50 PM

It usually is best to paste the url of the problem code .It may contain things that may affect what you want to do.

**Andy Sandoval** · 01-17-2013, 01:46 AM

The site isn't officially live yet, but I put the page in question up here:
http://specialtyscrewsmfg.com/security_screws.php

The

Code:

<script language="javascript" src="exampleconfig.js"></script>

is not what I had normally had working on it, but I was trying new options and put the code into the one .js file.

Thanks for responding

Here is the code for Chained Selects I'm using: http://www.dynamicdrive.com/dynamici...ects/index.htm

**jscheuer1** · 01-20-2013, 06:43 PM

OK, let's see. I was able to get the two of them to work sort of. There appears to also be an error in the config, but it's not being reported. What it causes is that the hex screw gets just the 'Select a head type' and (then if that's chosen) the 'Select screw material' drop downs. Selecting from 'Select screw material' doesn't populate the next field.

Here's what I did, using a text only editor like NotePad, I edited the chainedselects.js file at line 87, adding the highlighted:

Code:

  if (menu.items[sidx] && menu.items[sidx].type==cs_M && idx<content.lists.length-1) {

You should do the same, save that and use that version. Then in the exampleconfig.js file I changed at the very beginning:

Code:

var hide_empty_list=true;

to:

Code:

var hide_empty_list=false;

Finally I saw the cookies were not working and noticed a hyphen in the cookie name as configured in the body onload. Knowing that hyphens can sometimes be interpreted as minus signs, I got rid of them and the cookies started working:

HTML Code:

<body onLoad="initListGroup('headtorx', document.forms[0].make, document.forms[0].type, document.forms[0].model, document.forms[0].measurement, document.forms[0].SizeDrive,'cookieA');
initListGroup('headhex', document.forms[1].make, document.forms[1].type, document.forms[1].model, document.forms[1].measurement, document.forms[1].SizeDrive,'cookieB');">

'cookie-A' became 'cookieA' and 'cookie-B' became 'cookieB'.

As for the error in the exampleconfig.js file that's preventing the other three fields of the hex screws from populating sequentially, as I say I'm not sure what's causing that. Either the script isn't capable of modularity at that depth, or there's some sort of syntax error in the code, one that doesn't throw an error but that nonetheless prevents those last three fields from populating. Something that tells the script to do one thing that;s legal, but that doesn't show up anywhere, while you're thinking it's telling it to populate those fields. It's such a huge file, it may be very difficult to spot.

One other possibility is that the change I made to the chainedselects.js file is a part of this issue somehow. But without that change, only the first screw works.

But most likely its a syntax error/typo in the exampleconfig.js file. I tried commenting out everything relating to the first screw, so there could be no conflict and the hex screw still couldn't get past that second field. So it's probably something in the exampleconfig.js file.

I'll play around with it a bit more to see if I can narrow things down. Meanwhile, you could look to see if there is an inconsistency in the exampleconfig.js that could be preventing the hex screw from going past the second field.

Edit: Added Later:

I got the bright idea of throwing out the hex screws and substituting the cars from the demo page. That worked perfectly. So it's almost 100% sure that the only problem now is that there's some syntax error and/or typo in the hex screws portion of the exampleconfig.js file.

**Andy Sandoval** · 01-23-2013, 05:23 PM

Thank you, jscheuer1.

You are a life saver!

I went through the code and made some adjustments on the exampleconfig.js file and now the torx and hex work nicely. The only issue now seems to be that only 2 of the menu dropdowns occur on load, rather than all 5. They didn't do that before. Any ideas?

Does this mean that I can plug in the code for the Spanner and One way as well, or is there another adjustment to make for this to work?

Thank you, sincerely, for your help,

Andy

**jscheuer1** · 01-23-2013, 11:02 PM

You haven't updated the live page, so it's hard to say. There's a way to do the syntax of the config file so that there are defaults for all fields (the cars example does that). If that's done, all fields show up with their defaults. You're not doing that. An alternative is to set at the beginning of the config file:

Code:

var hide_empty_list=false;

In my last post I told you to change that to false from true. Perhaps you missed that. However, playing around with it since then I see that if there are no defaults set, having that as false can give rise to odd situations if you deselect something in the middle. Look in the demo's config file for the use of the number 1. I think that denotes the default. Just make sure there's a default for each drop down, even if its just the "Select a" whatever choice.

So basically I'm telling you that I'm not 100% familiar with this script, but have noticed some things. If you want more help, please update the live page or give us a new link to the latest version.

Another important thing to keep in mind is to keep backups. If what you have now is working fairly well, make a backup of it before proceeding.

**Andy Sandoval** · 01-24-2013, 01:33 AM

Thanks again for replying.

I had switched the value to "false" and saved it, but for some reason, the file reverted. So I changed it again, saved it, then backed it up. That aspect works fine now.
Now I just can't seem to make the Spanner work, and I can foresee the same thing happen when I put in the one way as well.