ColdFusion Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed ForumsProgramming Languages - MoreColdFusion Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 14th, 2013, 01:35 PM
BrandonG BrandonG is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Feb 2013
Posts: 13 BrandonG User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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.:&nbsp;<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>    
    &nbsp;&nbsp;&nbsp;&nbsp;    
    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.

Reply With Quote
  #2  
Old February 15th, 2013, 04:59 PM
kiteless kiteless is offline
Moderator
Dev Shed God (5000 - 5499 posts)
 
Join Date: Jun 2002
Location: Raleigh, NC
Posts: 5,091 kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level) 
Time spent in forums: 2 Weeks 5 Days 2 h 53 m 27 sec
Reputation Power: 966
By far the easiest way to do something like this is via AJAX. When the first select box changes, you make an AJAX call to populate the second one. Something like this: http://forta.com/blog/index.cfm/200...Related-Selects

Reply With Quote
  #3  
Old February 19th, 2013, 01:25 PM
BrandonG BrandonG is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Feb 2013
Posts: 13 BrandonG User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 53 m 25 sec
Reputation Power: 0
Quote:
Originally Posted by kiteless
By far the easiest way to do something like this is via AJAX. When the first select box changes, you make an AJAX call to populate the second one. Something like this: http://forta.com/blog/index.cfm/200...Related-Selects


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.

Reply With Quote
  #4  
Old February 19th, 2013, 02:13 PM
kiteless kiteless is offline
Moderator
Dev Shed God (5000 - 5499 posts)
 
Join Date: Jun 2002
Location: Raleigh, NC
Posts: 5,091 kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level) 
Time spent in forums: 2 Weeks 5 Days 2 h 53 m 27 sec
Reputation Power: 966
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.

Reply With Quote
  #5  
Old February 20th, 2013, 08:13 AM
BrandonG BrandonG is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Feb 2013
Posts: 13 BrandonG User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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.

Reply With Quote
  #6  
Old February 25th, 2013, 04:11 PM
BrandonG BrandonG is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Feb 2013
Posts: 13 BrandonG User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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!

Reply With Quote
  #7  
Old February 25th, 2013, 06:01 PM
kiteless kiteless is offline
Moderator
Dev Shed God (5000 - 5499 posts)
 
Join Date: Jun 2002
Location: Raleigh, NC
Posts: 5,091 kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level) 
Time spent in forums: 2 Weeks 5 Days 2 h 53 m 27 sec
Reputation Power: 966
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.

Reply With Quote
  #8  
Old February 25th, 2013, 10:58 PM
BrandonG BrandonG is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Feb 2013
Posts: 13 BrandonG User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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?

Reply With Quote
  #9  
Old February 26th, 2013, 12:52 AM
kiteless kiteless is offline
Moderator
Dev Shed God (5000 - 5499 posts)
 
Join Date: Jun 2002
Location: Raleigh, NC
Posts: 5,091 kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level)kiteless User rank is General (90000 - 100000 Reputation Level) 
Time spent in forums: 2 Weeks 5 Days 2 h 53 m 27 sec
Reputation Power: 966
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#"

Reply With Quote
Reply

Viewing: Dev Shed ForumsProgramming Languages - MoreColdFusion Development > Using JS & CF, 2 select boxes as 2d array to auto-pop text-type input form field

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap