#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    19
    Rep 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.
  2. #2
  3. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,263
    Rep Power
    968
    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/2007...elated-Selects
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    19
    Rep Power
    0
    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/2007...elated-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.
  6. #4
  7. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,263
    Rep Power
    968
    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/coldfusion...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/coldfusion...1.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.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    19
    Rep Power
    0
    Sounds good, Kiteless, I will check those out. I appreciate you pointing me in the right direction.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    19
    Rep 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!
  12. #7
  13. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,263
    Rep Power
    968
    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.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    19
    Rep 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?
  16. #9
  17. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,263
    Rep Power
    968
    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#"

IMN logo majestic logo threadwatch logo seochat tools logo