Link to home
Start Free TrialLog in
Avatar of J C
J CFlag for United States of America

asked on

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

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!
Avatar of Coast Line
Coast Line
Flag of Canada image

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
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.
Avatar of J C

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of _agx_
_agx_
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of J C

ASKER

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

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.
> 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....
Avatar of J C

ASKER

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.