Skip navigation
Currently Being Moderated

Bind in form works with cfinput, how to with cfselect and a href

Jul 1, 2012 11:46 AM

Hi all

This code workks binding a cfinput in an HTML cfform:

Name:<cfinput type="text" name="FIRSTNAME" label="Name" required="yes" width="150" bind="{UsersGrid.FIRSTNAME}" >

 

However this href doesn't seem to bind correctly:

<a  href="http://www.google.com/search?hl=en&output=search&sclient=psy-ab&q={Use rsGrid.COMPANY}&btnK=" bind="{UsersGrid.COMPANY}">Google.com</a>

 

This cfselect doesn't either:
Department: <cfselect name="DEPARTMENT1" width="100" size="1" label="Department" required="yes" bind="UsersGrid.DEPARTMENT1">
<option></option><cfoutput query="dNames"><option value="#DEPARTMENTIDS#">#DEPARTMENTNOM#</option></cfoutput>
</cfselect> 

 

How can I make them both work? Thank you

 
Replies
  • Currently Being Moderated
    Jul 1, 2012 8:13 PM   in reply to goodychurro1

    goodychurro1 wrote:

     

    [...]

    this href doesn't seem to bind correctly:
    [...]

    This cfselect doesn't either:

    [...]

    How can I make them both work? Thank you

     

    Hi goodychurro1,

     

    The tag you're looking for is cfajaxproxy.  Here is a example to get you started (if you're on CF9, just remove the 3rd attribute from the queryNew() and then populate the query using a queryAddRow() and three querySetCell()s):

     

    <cfset q = queryNew("myID,myString", "integer,varchar", [[1,"one"],[2,"two"],[3,"three"]]) />

    <cfajaxproxy bind="javascript:myHandler({myGrid.myID})" />

    <script type="text/javascript">

      function myHandler(myID) {

          //update the link's href

          document.getElementById('myLink').href = 'http://www.coldfusion.com?q=' + myID;

          //update the select's selected

          var theField = document.getElementById('mySelect');

          for(var i=0; i<theField.options.length; i++) {

              if(theField.options[i].value==myID) {

                  theField.options[i].selected = true;

              } else {

                  theField.options[i].selected = false;

              }

          }

      }

    </script>

    <cfform>

      <cfgrid name="myGrid" format="html" width="200" query="q">

        <cfgridcolumn name="myID" />

        <cfgridcolumn name="myString" />

      </cfgrid>

      <cfselect name="mySelect" query="q" display="myString" value="myID" />

    </cfform>

    <a href="" id="myLink" target="_blank">text</a>

     

    Selecting a row in the grid changes the link's href and the select's selected option.

     

    References:

    - cfaxaxproxy

    - Binding data to form fields

    - a blog post that might be of help

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 1, 2012 9:16 PM   in reply to goodychurro1

    goodychurro1 wrote:

     

    <cfajaxproxy bind="javascript:myHandler({UsersGrid.myID})" />

    [...]

    I then added this code in the cfform, but the link is shown as http://www.coldfusion.com?q=undefined - why is this? Thanks:

    Hi goodychurro1,

     

    In the {UsersGrid.myID}, the 'myID' corresponds to <cfgridcolumn name="myID" />.

     

    Meaning, you should change the 'myID' to be the same name as one of your grid columns.  If you currently don't have a grid column w/ the name 'myID', then the href's resultant URL would end w/ 'undefined'.

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 1, 2012 9:33 PM   in reply to goodychurro1

    goodychurro1 wrote:

     

    I changed it to my cfgrid column name, COMPANY but it is still showing "undefined" and none of the other fields bind anymore :

     

    Hi goodychurro1,

     

    Did you try changing {UsersGrid.myID} to {UsersGrid.COMPANY} ?

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 10:44 AM   in reply to goodychurro1

    Hi goodychurro1,

     

    Regarding the href (we'll discuss the cfselect next), could you please try this:

     

    <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY})" />

    <script type="text/javascript">

      function myHandler(COMPANY) {

          //update the link's href

          document.getElementById('myLink').href = 'http://www.coldfusion.com?q=' + COMPANY;

      }

    </script>

    <a href="" id="myLink" target="_blank">text</a>

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 11:20 AM   in reply to goodychurro1

    Excellent!  Now we'll try adding the cfselect.  Could you try this?

     

    <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1})" />

    <script type="text/javascript">

      function myHandler(COMPANY,SECTORS1) {

          //update the link's href

          document.getElementById('myLink').href = 'http://www.coldfusion.com?q=' + COMPANY;

          //update SECTORS1's selected

          var theField = document.getElementById('SECTORS1');

          for(var i=0; i<theField.options.length; i++) {

              if(theField.options[i].value==SECTORS1) {

                  theField.options[i].selected = true;

              } else {

                  theField.options[i].selected = false;

              }

          }

      }

    </script>

    Sector:<cfselect class="input" name="SECTORS1" size="1" label="Sector" required="yes">

    <option></option><cfoutput query="industries"><option value="#SECTORSIDS#">#SECTORSNOM#</option></cfoutput></cfselect>

    <a href="" id="myLink" target="_blank">text</a>

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 12:37 PM   in reply to goodychurro1

    Hi goodychurro1,

     

    Excellent that it is working!  For additional cfselects, just be sure to also add those grid column names to the cfajaxproxy and the myHandler function.  Like so:

     

    change <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1})" /> to <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT1})" />

     

    and change

     

    function myHandler(COMPANY,SECTORS1) to function myHandler(COMPANY,SECTORS1,DEPARTMENT1)

     

    B/c cfajaxproxy needs to know about those grid column names, so it can pass the values of each to myHandler().  And myHandler() itself needs to know about the values, so that it can use them.

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 1:53 PM   in reply to goodychurro1

    Hi goodychurro1,

     

    The issue was created when copying/pasting the '//update SECTORS1's selected' section of code.  The myHandler()'s closing '}' was selected during the copy.  And the copied code was pasted outside of the myHandler() function.  Please try this:

     

    <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{ UsersGrid.DEPARTMENT1})" />

    <script type="text/javascript">

      function myHandler(COMPANY,SECTORS1,DEPARTMENT1) {

          //update the link's href

          document.getElementById('myLink').href = 'http://www.google.com/search?q=' + COMPANY;

          document.getElementById('Linkedin').href = 'http://www.google.com/search?q=linkedin+' + COMPANY;

          //update SECTORS1's selected

          var theField = document.getElementById('SECTORS1');

          for(var i=0; i<theField.options.length; i++) {

              if(theField.options[i].value==SECTORS1) {

                  theField.options[i].selected = true;

              } else {

                  theField.options[i].selected = false;

              }

          }

          //update DEPARTMENT1's selected

          var theField = document.getElementById('DEPARTMENT1');

          for(var i=0; i<theField.options.length; i++) {

              if(theField.options[i].value==DEPARTMENT1) {

                  theField.options[i].selected = true;

              } else {

                  theField.options[i].selected = false;

              }

          }

      }

    </script>

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 2:57 PM   in reply to goodychurro1

    goodychurro1 wrote:

     

    <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{ UsersGrid.DEPARTMENTNOM})"/>

    [...]

    <cfgridcolumn name="DEPARTMENTNOM" width="150" header="Department">

    [..]

    <cfselect class="input" name="DEPARTMENT1" size="1" label="Department" required="yes">

    <option></option><cfoutput query="dNames"><option value="#DEPARTMENTIDS#">#DEPARTMENTNOM#</option></cfoutput></cfselect >

     

    Hi goodychurro1,

     

    Please see that I've made DEPARTMENTNOM and DEPARTMENTIDS bold.  When selecting a row in the UsersGrid, the grid's DEPARTMENTNOM column value must match one of the DEPARTMENT1's option values.

     

    Question 1: Does <cfgridcolumn name="DEPARTMENTNOM" grid column display a department name in each grid row, or does it display a department ID in each grid row?

    Question 2: Does the DEPARTMENT1 cfselect have a single ID for each option's value, or something else for each option's value?

    Question 3: Are there any matches between what the grid's DEPARTMENTNOM column is displaying and any of the select's option values?

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 3:55 PM   in reply to goodychurro1

    goodychurro1 wrote:

     

    <cfquery name="qNames" datasource="salesdb">

    [...]

    and division.DEPARTMENTIDS = company.DEPARTMENT1

    [...]

    </cfquery>

    In the cfflash form the bind happened with:

    [...]

    onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'DEPARTMENT1', DEPARTMENT1.selectedItem.data);"

     

    Hi goodychurro1,

     

    It sounds like you actually want to bind the cfselect to the grid's DEPARTMENT1 column.  In that case, could you please change the cfaxaxproxy to this:

     

    <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{ UsersGrid.DEPARTMENT1})"/>

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 5:39 PM   in reply to goodychurro1

    Hi goodychurro1,

     

    Does the cfgrid tag use the qNames query you posted above? (ex: <cfgrid query="qNames")

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 10:01 PM   in reply to goodychurro1

    Hi goodychurro1,

     

    If you can post the entire .cfm for this, I can try to help further.  I have your database tables setup per your other thread here: http://forums.adobe.com/thread/1031327

     

    Thanks!,

    -Aaron

     

    Message was edited by: itisdesign

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 11:58 PM   in reply to goodychurro1

    Hi goodychurro1,

     

    Just add this grid column: <cfgridcolumn name="DEPARTMENT1" display="no">.  Then the bind will work w/ this:

     

    <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{ UsersGrid.DEPARTMENT1})"/>

    <script type="text/javascript">

      function myHandler(COMPANY,SECTORS1,DEPARTMENT1) {

          //update the link's href

          document.getElementById('myLink').href = 'http://www.google.com/search?q=' + COMPANY;

          document.getElementById('Linkedin').href = 'http://www.google.com/search?q=linkedin' + COMPANY;

     

          //update SECTORS1's selected

          var theField = document.getElementById('SECTORS1');

          for(var i=0; i<theField.options.length; i++) {

              if(theField.options[i].value==SECTORS1) {

                  theField.options[i].selected = true;

              } else {

                  theField.options[i].selected = false;

              }

          }

         

          //update DEPARTMENT1's selected

          var theField = document.getElementById('DEPARTMENT1');

          for(var i=0; i<theField.options.length; i++) {

              if(theField.options[i].value==DEPARTMENT1) {

                  theField.options[i].selected = true;

              } else {

                  theField.options[i].selected = false;

              }

          }

      }

    </script>

     

    Basically, a bind needs matching values.  The grid's new DEPARTMENT1 column contains the numeric values that match up to the DEPARTMENT1 cfselect's values.  The reason the DEPARTMENTNOM grid column isn't a good candidate for the bind, is b/c it contains the string values of the department names.

     

    Thanks,

    -Aaron

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 5:29 PM   in reply to goodychurro1

    goodychurro1 wrote:

     

    Thanks aaron!

    You're welcome!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points