Skip to main content
C
cfnew
Known Participant
February 24, 2011
Question

how to pass value from select box to cfc to get data back from cfc

  • February 24, 2011
  • 2 replies
  • 2312 views
select Box
1234
4567
8976
5677
4536

Hi I nee help for one of my issue i am trying to solve

here  is the scenario on top figure, i had a selct box on left side and when  page loads i need to show information for example for 1234 on right  side.

when user selects any item on select box then i have to pass that id to CFC to get data depending up on this selected id.

I am using CF8 and cfform type ="flash"

any ideas or examples on this that will help .

Thanks

    This topic has been closed for replies.

    2 replies

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    February 26, 2011

    Here is something along the same lines:

    testPage.cfm

    <cfset variables.selectedOption = 0>

    <cfset variables.lastname = "">

    <cfif isDefined("form.hidden_id")>

        <cfset selectedOption = form.hidden_id>

        <cfset obj = createobject("component","TestComponent")>

        <cfset variables.lastname = obj.getEmployeeFromId(form.hidden_id)>

    </cfif>

    <cfform format="flash">

    <cfselect name="id" width="80" style="text-align:right" label="User ID">

    <option value="1" <cfif variables.selectedOption EQ 1>selected</cfif>>1234</option>

    <option value="2" <cfif variables.selectedOption EQ 2>selected</cfif>>4567</option>

    <option value="3" <cfif variables.selectedOption EQ 3>selected</cfif>>8976</option>

    <option value="4" <cfif variables.selectedOption EQ 4>selected</cfif>>5677</option>

    <option value="5" <cfif variables.selectedOption EQ 5>selected</cfif>>4536</option>

    </cfselect>

    <cfinput label="lastname" type="text" width="100" name="lastname" value="#variables.lastname#" >

    <cfinput type="hidden" name="hidden_id" bind="{id.value}" >

    <cfinput type="submit" name="sbmt" value="Get employee" >

    </cfform>


    TestComponent.cfc

    <cfcomponent output="false">

    <cffunction name="getEmployeeFromId" access="remote" returntype="string" output="false">
            <cfargument name="id" required="true">
            <cfset var getEmployee = queryNew("","")>
        <cfset var lastname = "">
            <cfquery name="getEmployee" datasource="cfdocexamples">
                SELECT lastname
            FROM employees
                WHERE emp_id = <cfqueryparam value="#arguments.id#" cfsqltype="cf_sql_numeric">
            </cfquery>
        <cfif getEmployee.recordcount GT 0>
            <cfset lastname = getEmployee.lastname>
        </cfif>    
            <cfreturn lastname>
    </cffunction>

    </cfcomponent>

    D
    Dan_Bracuk
    Inspiring
    February 26, 2011

    I didn't try it, but I don't see that working without submitting the form.  This approach looks more promising.

    http://www.asfusion.com/blog/entry/calling-a-cfc-from-flash-form-part1

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    February 27, 2011

    No problemo, Dan. We can add CFC Flash Remoting and a submit button, like this:

    <cfset variables.selectedOption = 0>
    <cfif isDefined("form.id")>
        <cfdump var="#form#" label="Form variables">
    </cfif>

    <cfform format="flash">
    <cfselect name="id" width="80" style="text-align:right" label="User ID">
    <option value="1" <cfif variables.selectedOption EQ 1>selected</cfif>>1234</option>
    <option value="2" <cfif variables.selectedOption EQ 2>selected</cfif>>4567</option>
    <option value="3" <cfif variables.selectedOption EQ 3>selected</cfif>>8976</option>
    <option value="4" <cfif variables.selectedOption EQ 4>selected</cfif>>5677</option>
    <option value="5" <cfif variables.selectedOption EQ 5>selected</cfif>>4536</option>
    </cfselect>
    <cfformitem type="script">
    <cfsavecontent variable="getEmployee">
    //create connection
    var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection("http://127.0.0.1:8500/flashservices/gateway/");

    //declare service
    var myService:mx.remoting.NetServiceProxy;

    // the form controls
    var id = id.value;
    var lastname = lastname;

    //an object to handle the response
    var responseHandler = {};

    //function that receives the response
    responseHandler.onResult = function( results: Object ):Void {
    //the results received, to be displayed as text
    lastname.text = results;
    }

    //function handles any error that occurs during the call
    responseHandler.onStatus = function( stat: Object ):Void {
    alert("Error while calling cfc:" + stat.description);
    }

    /* Get CFC service. First parameter is component path (in dotted notation, from ColdFusion webroot) */

    /*That is, the component is in the same directory as this CFM page, and its path is: C:\ColdFusion9\wwwroot\testDir\bindingInFlashFormExample\TestComponent.cfc */
    myService = connection.getService("testDir.bindingInFlashFormExample.TestComponent", responseHandler );

    //make call to component, passing id parameter
    myService.getEmployeeFromId(id);

    </cfsavecontent>
    </cfformitem>
    <cfinput label="lastname" type="text" width="100" name="lastname"> 
    <cfinput type="button" name="btn" value="Get Employee" onClick="#GetEmployee#" >
    <cfinput type="submit" name="sbmt" value="Send">
    </cfform>

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    February 26, 2011

    testPage.cfm

    <cfform format="flash">
    <cfselect name="id" width="80" style="text-align:right" label="User ID">
    <option value="1234">1234</option>
    <option value="4567">4567</option>
    <option value="8976">8976</option>
    <option value="5677">5677</option>
    <option value="4536">4536</option>
    </cfselect>

    <cfinput label="Username" type="text" name="username" bind="cfc:TestComponent.getUserFromId({id})" >
    </cfform>

    TestComponent.cfc


    <cffunction name="getUserFromId" access="remote" returntype="string" output="false">
            <cfargument name="id" required="true">
            <cfset var getUser = queryNew("","")>
        <cfset var username = "">

            <cfquery name="getUser" datasource="myDatasourceName">
                SELECT username
            FROM myTable
                WHERE userID = <cfqueryparam value="#arguments.id#" cfsqltype="cf_sql_varchar">
            </cfquery>
        <cfif getUser.recordcount GT 0>
            <cfset username = getUser.username>
        </cfif>     

            <cfreturn username>
    </cffunction>

    1) Use the width attribute(number in pixels) to restrict the width.

    2) Use the text-align style property to align the options

    3) The bind attribute invokes the component automatically. Here, the CFM page and the CFC are in the same directory.

    D
    Dan_Bracuk
    Inspiring
    February 26, 2011

    In the Getting Started forum, somebody mentioned that binding will not work with Flash Forms.  Then I read this answer and ran a simplified version of BKBK's code.

    That other person was correct.

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    February 26, 2011

    Thanks, Dan. My bad. I haven't been into flash forms for a while.

    The kind of bind I apply above is AJAX, hence Javascript, hence valid for HTML but not for Flash forms.  For Flash forms, you will need actionscript. Let me see if I can come up with something to compensate.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices