Unable to access JavaScript variables in ColdFusion tags in script

Question

I was trying to take the selected value from the select tag and pass it to cold fusion tags in jquery as follows.

select tag code:

<select id="selectco">
<cfoutput query="colist">
<option value="#cid#">#coname#</option>
</cfoutput>
</select>

jQuery code:

$(document).ready(function() 
{
    $("#selectco").change(function() 
    {
        var e=document.getElementById("selectco");
        var opt=e.options[e.selectedIndex].value;
         $("#selectst").html("<cfquery name='stlist' datasource='tasks'>
select * from state where cid='"+opt+"'
</cfquery><select id='selectct'><cfoutput query='stlist'><option>#stname#</option></cfoutput>");
    });
});

I was able to take the value to opt variable.But am unable to pass the value to the cfquery tag. Please help me.

Answer 1

CFML is parsed on the ColdFusion server; Javascript runs on the client browser. The two never "exist" in the same space.

I recommend you read my blog article describing how CF participates in a request.

What you need to do is to read up on data binding in ColdFusion (or in general), which is fairly well documented, so there's little point in replicating it here.

Answer 2

Jquery is executed in client/browser side, while ColdFusion is executed server side.

I have done a lot of implementations of that using a CFC. You can try to fire a $.get() request after every select change event.

Lets say I have a component named "myApplication.cfc" saved in mywebsite/cfc.

myApplication.cfc

<cfcomponent>
    <cffunction name="getstateList" access="remote" returntype="string"
        returnformat="plain">
        <cfargument name="cid" required="no" default="" type="string">

        <cfset var stlist = "">

        <cfquery name="stlist" datasource="tasks">
            SELECT  stateCode 
            FROM    state 
            WHERE   cid = <cfqueryparam value="#arguments.cid#" 
                               cfsqltype="cf_sql_varchar">
         </cfquery>


        <cfreturn stlist.stateCode> 
    </cffunction>
</cfcomponent>

Where the $.get('mywebsite/cfc/myApplication.cfc?method=getstateList&cid='+yourParam). So after that you can use the result and populate your select list.