We help IT Professionals succeed at work.

Coldfusion site: Cascading lists don't work in Chrome and Firefox

401 Views
Last Modified: 2014-05-06
I have a coldfusion site that I've inherited that was developed several years ago. It is still mostly functional but for some of the pages within the site...The search/filter function does not work as expected. I have cascading lists that work as expected in IE but when I select for example the Project as the first drop-down list value the second list that is filtered on the first does not populate any options for my users.

Can anyone think of why this might be? Do I need to post some code or maybe someone else who has developed in coldfusion will know how this could occur?

Thanks for any feedback!
Comment
Watch Question

CERTIFIED EXPERT

Commented:
Is there any java script associated with the search Functionality.

If yes, is it using the document.all property which is only supported by IE, show you search code and let's see how things are going

The above may be one issue, i am just guessing as i have not sen any code so i cannot suggest, how it will work
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Do I need to post some code

Yes. From It sounds like it might be a javascript issue, rather than CF, but we'd need to see the relevant code to offer specifics.
J C

Author

Commented:
As mentioned by myselfrandhawa the document.all function is being used. How can I tweak this so it will work in all browsers?

function setLots(){
		with(document.srchFrm){
			Search.disabled = true;
			document.all("123").innerText = 'Please Wait : Loading Lots ...';
			var Current = Phase.selectedIndex;
    		Phase.options[Current].text = 'Please Wait : Loading Lots ...';
			flag.value = 0;
			submit();
		}
	}

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
J C

Author

Commented:
More code...Not sure where to assign the ID. The element used the onchange event to trigger the setLots function. What method should I use?

Thanks!

		<tr>
																			<td class="content">
																				<strong>Project:</strong></td>
																			<td class="content">
																				<select name="ProjID" style="width:475px;" onchange="setLots();">
																					<option value="-1"<cfif REQUEST.projID EQ -1> selected</cfif>>All Projects</option>
																					<option value=""><cfloop from="1" to="75" index="VARIABLES.index">-</cfloop></option>
																					<cfloop query="getProjects">
																						<option value="<cfoutput>#getProjects.ProjID#</cfoutput>"<cfif REQUEST.projID EQ getProjects.ProjID> selected</cfif>><cfoutput>#getProjects.Name2#</cfoutput></option>
																					</cfloop>
																				</select>&nbsp;</td>
																		</tr>
																		<cfquery name="getLots" datasource="MYDS">
																			SELECT 	ProjID, Phase
																			FROM 		lot_view
																			WHERE		ProjID = '#REQUEST.projID#'
																			ORDER BY Phase
																		</cfquery>
																		<tr>
																			<td class="content">
																				<strong>Lot:</strong></td>
																			<td class="content">
																				<select name="Phase" style="width:275px;">
																					<cfif REQUEST.projID GT 0>
																						<option value="-1"<cfif getLots.phase EQ -1> SELECTED</cfif>>All Lots</option>
																						<cfloop query="getLots">
																							<option value="<cfoutput>#getLots.Phase#</cfoutput>"<cfif getLots.phase EQ REQUEST.phase> SELECTED</cfif>><cfoutput>#getLots.Phase#</cfoutput></option>
																						</cfloop>
																					<cfelse>
																						<option value="">None (Choose a Project Above)</option>
																					</cfif>
																				</select>&nbsp;</td>
																		</tr>
																		<tr>
																			<td class="content" nowrap>
																				<strong>Enter PO Number:</strong></td>
																			<td class="content" width="100%">
																				<input type="text" name="srch_RuleID" value="<cfoutput>#REQUEST.srch_RuleID#</cfoutput>" style="width:30px;">&nbsp;<strong>&ndash;</strong>&nbsp;<input type="text" name="srch_PONo" value="<cfoutput>#REQUEST.srch_PONo#</cfoutput>" style="width:79px;"></td>
																		</tr>
																		<tr>

Open in new window

CERTIFIED EXPERT

Commented:
Try this:

//document.all("123").innerText = 'Please Wait : Loading Lots ...';
			document.getElementById('ProjID').textContent = 'Please Wait : Loading Lots ...';

<select name="ProjID" id="ProjID" style="width:475px;" onchange="setLots();">

Open in new window


Let me know what output you get, try putting alerts after each line on your java-script code.
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
> document.all("123").innerText

@jleecole  - I don't see an element named "123" in the last code snippet. Search your page script for "123". Look for an html element with that name or ID. The presence of "innerText" probably means it's a <div> or some other text element <p>,<span>, etc....
J C

Author

Commented:
As you mentioned it had an ID of 123 already. All I had to do to make it work was replace document.all with document.getElementById and the cascading drop-downs worked as expected. Thanks for all of your help.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.