The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Programming Languages - More
> ColdFusion Development
|
Using JS & CF, 2 select boxes as 2d array to auto-pop text-type input form field
Discuss Using JS & CF, 2 select boxes as 2d array to auto-pop text-type input form field in the ColdFusion Development forum on Dev Shed. Using JS & CF, 2 select boxes as 2d array to auto-pop text-type input form field ColdFusion Development forum discussing CFML coding practices, tips on CFML, and other CFML related topics. Find out why ColdFusion is the tool of choice for many e-commerce developers.
|
|
 |
|
|
|
|

Dev Shed Forums Sponsor:
|
|
|

February 14th, 2013, 01:35 PM
|
|
Registered User
|
|
Join Date: Feb 2013
Posts: 13
Time spent in forums: 3 h 53 m 25 sec
Reputation Power: 0
|
|
|
Using JS & CF, 2 select boxes as 2d array to auto-pop text-type input form field
Hello all,
I'm relatively new to development, and have been working primarily with MSSQL '05 as my DBMS, CF8 for processing and markup. I have a need to fill in a (simple text/input-type) field dynamically when a user sets a certain choice from a drop-down (select) menu. This value comes from a single record in the DB. I found and successfully adapted this code:
http://jsfiddle.net/zunrk/
However this only works for a 1d array...in the context of my application, I need either a 2d array or a sizable block of <cfif> or <cfswitch> code, which would break one of the cardinal rules, D.R.Y. Also, the <cfif> code would not allow for the dynamic change of the field (not that I know of, anyway)
I would prefer a JS solution since I am using it already but would also like pointers on how I might rearrange this code (especially setting the array elements) to make it more compact and readable, I am really not very comfortable w/ JS yet but feel fairly competent in CF.
I believe I've included all relevant parts of my code, but if you wish to see more please let me know in a reply and I will get the rest posted. Thank you in advance, DevShed!
Code:
<cfset session.id = url.id>
<cfset session.cid = url.cid>
<cfoutput>
<form action="alog3jstest.cfm?id=#session.id#&cid=#session.cid#" method="post">
</cfoutput>
<!--- RSF shorthand for recordset:fees --->
<cfquery name="rsf" datasource="test">
SELECT * FROM fees WHERE company = '#trim(rsc.clientname)#'
</cfquery>
<script type="text/javascript">
var LOC = new Array(6);
for (var i=0; i < 6; i++){
LOC[i] = new Array(8);
}
<cfoutput>
LOC[0][0] = "";
LOC[0][1] = "#rsf.pua#";
LOC[0][2] = "#rsf.pba#";
LOC[0][3] = "#rsf.phr#";
LOC[0][4] = "#rsf.pbld#";
LOC[0][5] = "#rsf.pdna#";
LOC[0][6] = "#rsf.ppt#";
LOC[0][7] = "#rsf.pphy#";
LOC[1][0] = "";
LOC[1][1] = "#rsf.pua#";
LOC[1][2] = "#rsf.pba#";
LOC[1][3] = "#rsf.phr#";
LOC[1][4] = "#rsf.pbld#";
LOC[1][5] = "#rsf.pdna#";
LOC[1][6] = "#rsf.ppt#";
LOC[1][7] = "#rsf.pphy#";
LOC[2][0] = "";
LOC[2][1] = "#rsf.pua#";
LOC[2][2] = "#rsf.pba#";
LOC[2][3] = "#rsf.phr#";
LOC[2][4] = "#rsf.pbld#";
LOC[2][5] = "#rsf.pdna#";
LOC[2][6] = "#rsf.ppt#";
LOC[2][7] = "#rsf.pphy#";
LOC[3][0] = "";
LOC[3][1] = "#rsf.pua#";
LOC[3][2] = "#rsf.pba#";
LOC[3][3] = "#rsf.phr#";
LOC[3][4] = "#rsf.pbld#";
LOC[3][5] = "#rsf.pdna#";
LOC[3][6] = "#rsf.ppt#";
LOC[3][7] = "#rsf.pphy#";
LOC[4][0] = "";
LOC[4][1] = "#rsf.mpua#";
LOC[4][2] = "#rsf.mpba#";
LOC[4][3] = "#rsf.mphr#";
LOC[4][4] = "#rsf.mpbld#";
LOC[4][5] = "#rsf.mpdna#";
LOC[4][6] = "#rsf.mppt#";
LOC[4][7] = "#rsf.mpphy#";
LOC[5][0] = "";
LOC[5][1] = "#rsf.cpua#";
LOC[5][2] = "#rsf.cpba#";
LOC[5][3] = "#rsf.cphr#";
LOC[5][4] = "#rsf.cpbld#";
LOC[5][5] = "#rsf.cpdna#";
LOC[5][6] = "#rsf.cppt#";
LOC[5][7] = "#rsf.cpphy#";
</cfoutput>
function loc(){
x = document.getElementById("location");
}
function choice(){
y = document.getElementById("type");
document.getElementById("LOC").value = LOC[x.selectedIndex][y.selectedIndex];
}
</script>
<tr>
<td><br><b>Encounter Information:</b></td>
</tr>
<cfoutput>
<tr><td style="vertical-align:top">
CoC:<input type="text" name="coc" size="10" maxlength="20" value="">
Auth. No.: <input type="text" name="auth" size="10" maxlenght="20" value="">
Reason:<select name="reason" id="reason">
<option value="Pre-Emp">Pre-Employment</option>
<option value="Random">Random</option>
<option value="Post Acc.">Post-Accident</option>
<option value="RTD">RTD(Return-to-Duty)</option>
<option value="Reason. Sus">Reasonable Suspicion</option>
<option value="Personal">Personal</option> </select>
Type:<select name="type" id="type" onChange="choice();">
<option value="0"></option>
<option value="1">UA</option>
<option value="2">BA</option>
<option value="3">Hair</option>
<option value="4">Blood</option>
<option value="5">DNA</option>
<option value="6">Paternity</option>
<option value="7">Physical</option></select><br>
Amt:$<input type="text" id="TP" name="amt">
<form>
<input type="checkbox" name="obs" value="Y"><em>Observed</em>
<input type="checkbox" name="dot" value="Y"><em>DOT</em>
Location:<select name="location" id="location" onChange="loc();">
<option value="0"></option>
<option value="1">Amidon</option>
<option value="2">West</option>
<option value="3">Tyler</option>
<option value="4">Mobile</option>
<option value="5">Callout</option></select>
PS: I suppose I should explain the business logic as well for clarity's sake. The DB was built before I started here and was not designed with indexing the 'location' and 'type' variables in mind. The idea is that, for example, a user is conducting a test of the type 'hair' ([3]) at the locale 'West' ([2]) and wishes to have the 'amt' form-field filled in as soon as they enter those two criteria. So the code should set 'amt' to LOC[2][3] or, directly, #rsf.phr# .
Edit: 1:37p CST by BrandonG Reason: fixed bad 'getElementById' reference...code still not working.
|

February 15th, 2013, 04:59 PM
|
|
Moderator
|
|
Join Date: Jun 2002
Location: Raleigh, NC
|
|
|

February 19th, 2013, 01:25 PM
|
|
Registered User
|
|
Join Date: Feb 2013
Posts: 13
Time spent in forums: 3 h 53 m 25 sec
Reputation Power: 0
|
|
Quote: | Originally Posted by kiteless |
Slight issue with this one...I went to the site and created a separate directory under /wwwroot/ (XP Pro test environment) and created 'art.cfc' and 'form.cfm' per the instructions and, after changing 'cfc:art....' to 'url:art...', moved the files to the parent directory (wwwroot/) and several other "fixes," I keep getting the error "CFC cannot be found...use cfdebug..."
a) I don't know how to use cfdebug as a parameter (include it with cfform on 'form.cfm'?) and b) if using URL as opposed to CFC, do I need to put the full path (including the external url? as in:
url:forums.devshed.com/BenFortaExample/art.cfc
Also, the article doesn't seem to specify whether there should be an 'application.cfm' or 'application.cfc' and I'm still failing to see the distinction between the two, though I understand that .CFCs are more conducive to OOP w/ CF. As it stands, my folder with the two aforementioned files have ONLY those two files in it, am I missing something? I'm using CF8 by the way.
At any rate, thank you for pointing me in the right direction and I hope to hear back from you on this post regarding the latest hurdle.
PS: Is there an AJAX for dummies tut/site that I could benefit from? And JSON? I see that referenced a lot on various sites but have yet to understand what "SerializeJSON" actually does.
|

February 19th, 2013, 02:13 PM
|
|
Moderator
|
|
Join Date: Jun 2002
Location: Raleigh, NC
|
|
If you're binding to a CFC, use "cfc:", not "url:". URL is for making requests to things like .cfm templates. http://livedocs.adobe.com/coldfusio..._5.html#1126812
Application.cfm is a file that runs before each request. This is the old/outdated option.
Application.cfc is a CFC that has methods invoked on each request. As always, the docs have full details: http://livedocs.adobe.com/coldfusio...01.html#1101532
There are various options and libraries for doing AJAX , so any tutorials will be fairly specific to the library being used. (jQuery, ExtJS, etc.)
JSON is a data serialization approach that works well with JavaScript and is less verbose than XML.
|

February 20th, 2013, 08:13 AM
|
|
Registered User
|
|
Join Date: Feb 2013
Posts: 13
Time spent in forums: 3 h 53 m 25 sec
Reputation Power: 0
|
|
Sounds good, Kiteless, I will check those out. I appreciate you pointing me in the right direction. 
|

February 25th, 2013, 04:11 PM
|
|
Registered User
|
|
Join Date: Feb 2013
Posts: 13
Time spent in forums: 3 h 53 m 25 sec
Reputation Power: 0
|
|
Don't know if this is considered 'closed' at this point or not but here goes:
I added the following files (which I adapted from Ben Forta's site -- http://forta.com/blog/index.cfm/2007/6/4/ColdFusion-Ajax-Tutorial-4-Partial-Page-Updates ) and when I go to form.cfm, I get a select box with (appropriately) the "company names" listed, but the cfdiv is not populating correctly. The result is a gray box with "[object Object]" in it. I'm not quite understanding what it is that I'm doing wrong but I'm pretty certain it is something to do w/ my alog.cfc. Here are both:
Code:
<!--- FORM.CFM --->
<cfquery datasource="test" name="companies">
SELECT clientname,clientid FROM clients ORDER BY clientname
</cfquery>
<cfform>
<cfselect name="companyname" query="companies" display="clientname" value="clientname" />
</cfform>
<cfdiv bind="cfc:alog.getFees({companyname})" style="background-color:grey;color:white;height:100;width:200" />
<!--- ALOG.CFC --->
<cfcomponent output="false">
<cfset this.dsn="test">
<cffunction name="getFees" access="remote" returnType="any">
<cfargument name="companyname" type="any">
<cfset var data = "">
<cfset result = structNew()>
<cfquery name="data" datasource="#this.dsn#">
SELECT * FROM fees WHERE company = '#trim(arguments.companyname)#'
</cfquery>
<cfif data.RecordCount IS 1>
<cfset result.pua=data.pua>
<cfset result.pba=data.pba>
<cfset result.phr=data.phr>
</cfif>
<cfreturn result>
</cffunction>
</cfcomponent>
Any thoughts? I'm new to OOP, and web development for that matter. I can provide more (relevant/non-test) code if necessary. Thanks in advance, all!
|

February 25th, 2013, 06:01 PM
|
|
Moderator
|
|
Join Date: Jun 2002
Location: Raleigh, NC
|
|
|
Your CFC is returning an object (a CF structure), which is converted into a JavaScript object on the client. And that object is what you're seeing as [Object object]. If you want to populate a div, just return a string from the CFC method.
|

February 25th, 2013, 10:58 PM
|
|
Registered User
|
|
Join Date: Feb 2013
Posts: 13
Time spent in forums: 3 h 53 m 25 sec
Reputation Power: 0
|
|
|
I'm not at my dev box right now but I take it you mean replace:
<cfreturn result>
with:
<cfreturn result.pua>
<cfreturn result.pba> and so on?
|

February 26th, 2013, 12:52 AM
|
|
Moderator
|
|
Join Date: Jun 2002
Location: Raleigh, NC
|
|
|
Right, a div can only contain content, which has to be a string. So your CFC would need to return a string. Some of the other cfform UI components (like a grid, combo box, etc.) can accept arrays of objects, but not a div.
So you can either return just one of your values, or turn them into a string and return that (e.g. return "pua: #data.pua# pba: #data.pba# phr: #data.phr#"
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|