×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

AJAX not populating dropdown in ColdFusion

AJAX not populating dropdown in ColdFusion

AJAX not populating dropdown in ColdFusion

(OP)
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

RE: AJAX not populating dropdown in ColdFusion

Hi

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

Feherke.
feherke.github.io

RE: AJAX not populating dropdown in ColdFusion

(OP)
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

RE: AJAX not populating dropdown in ColdFusion

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 Access-Control-Allow-Origin HTTP response header to _listmodels.cfm's output, according to Cross-Origin Resource Sharing.

Feherke.
feherke.github.io

RE: AJAX not populating dropdown in ColdFusion

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

RE: AJAX not populating dropdown in ColdFusion

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:

CODE

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

CODE

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
		<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> </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

RE: AJAX not populating dropdown in ColdFusion

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:

CODE

["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.

CODE

<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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close