AJAX not populating dropdown in ColdFusion

[jimhintz]

Hello geniuses,

I have inherited a ColdFusion application which uses four lines of AJAX in order to populate a drop-down based upon the
selection made in a previous drop-down. The first drop-down is a list of car "makes", for example: Ford, Chevrolet, etc. The second drop-down is to be populated with "models" based upon the selected "make".

However, the AJAX code appears to be no-longer working as the "models" drop-down is not being populated. We recently had to move the code to a new server, and it seems like, from that point forward, the AJAX is not populating the "models"
drop-down.

Here is the code:
<SCRIPT LANGUAGE="JavaScript" SRC="prototype.js"></script>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function doIt(){
makename = document.addvehicle.MAKE.value;
var url = '

https://fisnet.wvu.edu/secure/_listmodels.cfm';

var pars = 'make='+makename+'&edit=0';
var myAjax = new Ajax.Updater('models', url, { method: 'get',

parameters: pars });
}

</SCRIPT>

Now, one change which had to be made was to update the URL variable from being only HTTP to HTTPS because this application
is now behind that level of security. Other than that, the code is exactly the same now as it used to be.

One more thing, this code works differently based on the browser used. To explain, while the code is no-longer populating the drop-down, in FireFox it makes the "models" drop-down disappear completely, as though it's trying to update it, but something is failing. In IE 9 the drop-down remains, it just does not get populated. For IE 8 and Chrome there is a
JavaScript error earlier in the application which prevents it from working, so I don't know how this AJAX code works in those browsers.

I do not know AJAX or JavaScript, I have never worked with them before, I am a ColdFusion developer with intermediate skill. I hope to be able to follow along with any suggestions or comments, I will try my best to do so. Please let me know if I can provide you with any additional information.

Thank you very much,
Jim

 

[feherke]

Hi

First of all, are you sure that URL is working ?


Feherke.
feherke.github.io

 

[jimhintz]

Hi Feherke,

Thank you for taking the time to ask me a question and for trying to help me, I really appreciate it.

Well, that's a brilliant question to ask! I THOUGHT it was working, and it is working, but the problem is that you have to be logged into the application first in order for that URL to work. See, this application, which is called FISNET, has a login on it. If you hit that URL, it first asks you to login. Once you login, if you hit that URL again, it does work.

But that right there is the rub, you have to login first, AJAX doesn't know that, it can't login for me, thus it's getting stopped and it not returning any data is totally correct.

The problem, then, is occurring because I am working in a development environment which uses a different URL! If I update the URL to use the developement URL, it works without a login because I've already logged in, the drop-down is accessible.

Man, who would have thought? I need a development URL for it to work in development, and a production URL for it to work in production. That's the other thing, FISNET used to be just HTTP, but now it's HTTPS, thus the URL is different, in fact, the HTTP FISNET doesn't work anymore.

Thank you so much for getting me to track that down! Are there points or anything I can assign to you, other than extreme thanks and well-wishes from me?

Please accept my sincere thanks and best wishes to you! Have a great Friday and weekend!
Jim

 

[feherke]

Hi

Hmm... Does that happen in FireFox ? Are all URLs changed into https ? Because in FireFox 23 was added something Mixed Content Blocking. ( No idea whether applies in your case, just remembered seeing this recently. )

Regarding the development vs production URL. When you change, are all URLs changed ? Because if not, the AJAX response may be rejected due to Same origin policy. In this case you will have to add [tt]Access-Control-Allow-Origin[/tt] HTTP response header to _listmodels.cfm's output, according to Cross-Origin Resource Sharing.

Feherke.
feherke.github.io

 

[gk53]

run your page in firefox with firebud and chaeck what response you have from ajax call

 

[LyndonOHRC]

Hi
I have the same problem. I've looked at return results in firebug and the json look ok to me. I get an empty suggest list, the suggest list row count matched the array length but all the rows are empty?
json array:

[{"RanchZip":"73110"},{"RanchZip":"73111"},{"RanchZip":"73112"},{"RanchZip":"73114"},{"RanchZip":"73115"},{"RanchZip":"73116"},{"RanchZip":"73118"}]

code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">[/URL]
		<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>[/URL]
		<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>[/URL]
		<script>
			$(document).ready(function(){
				var getDocumentBackgroundColor='WhiteSmoke';
				$("#RanchNameDataInput, #OwnerLastNameDataInput").hide();
				$("#menuRow").css("background-color",getDocumentBackgroundColor); 
				$("#ZipCode").css("background-color","yellow"); 
				$("#ZipCode, #RanchName, #OwnerLastName").css({
					"text-decoration": "none", 
					"color": "DodgerBlue", 
					"font-weight": "Bold",
					"font-family": "Verdana",
					"font-size": "12px", 
					"padding": "2px",
					"vertical-align": "center"
			    });
				
				$(".menuTable").css({
					"margin":"4px",
					"display": "inline-block",
					"padding":"2px",
					"border-style":"solid",
					"border-color":"DodgerBlue",
					"border-width":"1px",
					"border-collapse":"collapse",
				});
				
				$(".menuHeading").css({
					"text-decoration":"none", 
					"color": "DarkBlue", 
					"font-weight": "Bold",
					"font-family": "Verdana",
					"font-size": "10px", 
					"padding": "2px",
					"padding-bottom": "5px",
					"vertical-align": "center"
			    });
				
				$(".menuOptions").css({"margin":"2px"});
			
			  $("#ZipCode").click(function(){
				$("#ZipCode, #RanchName, #OwnerLastName").css("background-color",getDocumentBackgroundColor); 
				$("#ZipCode").css("background-color","yellow"); 
				$("#RanchNameDataInput, #OwnerLastNameDataInput").hide();
				$("#ZipCodeDataInput").show();
				$('#ZipCodeSearchString').focus();
			  });
				$("#RanchName").click(function(){
				$("#ZipCode, #RanchName, #OwnerLastName").css("background-color",getDocumentBackgroundColor);  
				$("#RanchName").css("background-color","yellow"); 
				$("#OwnerLastNameDataInput, #ZipCodeDataInput").hide();
				$("#RanchNameDataInput").show();
				$('#RanchNameSearchString').focus();
			  });
				$("#OwnerLastName").click(function(){
				$("#ZipCode, #RanchName, #OwnerLastName").css("background-color",getDocumentBackgroundColor);  
				$("#OwnerLastName").css("background-color","yellow"); 
				$("#RanchNameDataInput, #ZipCodeDataInput").hide();
				$("#OwnerLastNameDataInput").show();
				$("#OwnerLastNameSearchString").focus();
			  });
			});
			$(function() {
				$("#ZipCodeSearchString").autocomplete({ 
					source: "NoMenu/RanchZipCodeSearchResults.cfm", 
					minLength: 2, 
					select: function(event, ui) { 
						$('#ZipCodeSearchString').val(ui.item.RanchZip); 
					}
				});
			});
		</script>
	</head>
	<body>
		<div>&nbsp;</div>
		<div class="menuTable">
			<div class="menuHeading">
				Select a Search Criteria
			</div>
			<div class="menuOptions">
				<span id="ZipCode" title="Select to Search by Zip Code">
					Zip
				</span>
				<span id="RanchName" title="Select to Search by Ranch Name">
					Ranch
				</span>
				<span id="OwnerLastName" title="Select to Search by Owner Last Name">
					Owner
				</span>
			</div>
		</div>
		<div></div>
		<div class="menuTable">
			<div id="ZipCodeDataInput">
				<label for="OwnerLastNameSearchString" class="dataDisplay">
					Zip Code:
				</label>
				<input 
					type="text" 
					id="ZipCodeSearchString" 
					name="ZipCodeSearchString" 
					size="25" 
					maxlength="25" 
					autofocus 
					title="Enter All or Part of a Zip Code" 
					autocomplete="off"
				/>
				<div class="dataDisplay">
					Zip Code Data
					<div id="ZipCodeDataTable">
						Table of Data
					</div>
				</div>
			</div>
			<div id="RanchNameDataInput">
				<label for="RanchNameSearchString" class="dataDisplay">
					Ranch Name:
				</label>
				<input 
					type="text" 
					id="RanchNameSearchString" 
					name="RanchNameSearchString" 
					size="25" 
					maxlength="25" 
					title="Enter All or Part of a Ranch Name" 
					autocomplete="off"
				/>
				<div class="dataDisplay">
					Ranch Name Data
					<div id="RanchNameDataTable">
						Table of data
					</div>
				</div>
			</div>
			<div id="OwnerLastNameDataInput">
				<label for="RanchNameSearchString" class="dataDisplay">
					Owner Last Name:
				</label>
				<input 
					type="text" 
					id="OwnerLastNameSearchString" 
					name="OwnerLastNameSearchString" 
					size="25" 
					maxlength="25" 
					title="Enter All or Part of an Owner Last Name" 
					autocomplete="off"
				/>
				<div class="dataDisplay">
					Owner Last Name Data
					<div id="OwnerLastNameDataTable">
						Table of data
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[LyndonOHRC]

OK, I kept plugging away and solved myself. the example I was relying on was weak. Once I got my server side request to return the data like this:

["73110",  "73111",  "73112",  "73114",  "73115",  "73116",  "73118" ]

Of course it worked great. In my previous post the json data I was returning needs to be converted somehow I guess... I just did it myself on server side.
If your server side is coldfusion then you may be interested in the server side code I used.

<cfquery name="qryZip" dataSource="registry" maxrows="250"> 
	Select Distinct RanchZip
	From Form200 
	Where RanchZip Is Not NULL
	And RanchZip like <cfqueryparam value="%#URL.term#%" cfsqltype="cf_sql_varchar">
	Order By RanchZip
</cfquery> 
<!---
Scratch this part of example, the serializeJSON return data doesn't seem to work???'
<cfset returnArray = ArrayNew(1) />
<cfloop query="qryZip">
	<cfif Trim(RanchZip) gt ''> 
		<cfset zipStruct = StructNew() /> 
		<cfset zipStruct["RanchZip"] = RanchZip /> 
		<cfset ArrayAppend(returnArray,zipStruct) />
	</cfif> 
</cfloop> 
<cfoutput>
	#serializeJSON(returnArray)#
</cfoutput>

the following works great by building the data set jquery UI expects...
--->
[
<cfoutput query="qryZip"> 
	 "#qryZip.RanchZip#"<cfif qryZip.CurrentRow lt qryZip.RecordCount>,</cfif>
</cfoutput>
]

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey