Display Grid based on Listbox item selected

Hi Experts ,
i am really stuck on this one i need anexample urgently.
I have list of projects and their related information.

I need to have the list of project in a listbox and once i select a specific project .., a cfgrid will populate automaticallly the information related on the project selected.

Any help would be very appreciated.


thanks

If you have a cfselect like this:



You can trigger a cfgrid to update based on the selection by setting a bind expression like:



See the CF docs for full and lengthy explanations of how the AJAX controls and binding expressions work.

Hi Kitless,

Thanks for the quick reply. i ll try this one and get back to you. Is there a way to send you direct emails if i need any help ?

thanks a lot

Hi,
Iam still lost with grid trigger expression.are you able to provide me with simple examle. please this is very urgent for me ?

Thanks a lot

Sorry, but I don't have the time to actually write up an example just for you. There are lots of examples of using binding both in the docs and via Google. Probably not describing your exact requirement but it should be enough for you to build off of.

hi kiteless ,
sory to bother still experiencing the same issue here are my codes :

cfc function :

<cffunction name="getProjects" access="remote">
<cfargument name="page" required="yes">
<cfargument name="pageSize" required="yes">
<cfargument name="gridsortcolumn" required="yes">
<cfargument name="gridsortdirection" required="yes">


<cfquery name="q1" datasource="ORA1">
SELECT DISTINCT PROGRAMID,PROGRAMNAME,PROGRAMTYPE FROM PROGRAM
ORDER BY PROGRAMID
</cfquery>
<cfreturn queryconvertforgrid(members,page,pagesize)/>



</cffunction>



and here my cfm file :


<cfform name="form1">

Projects:</b> <cfselect bind="cfc:data1.getProjects()" bindonload="yes" value="PROGRAMID" display="PROGRAMNAME" name="project" /><br/>

<cfgrid format="html" name="grid_Tables" pagesize="7" selectmode="row"
bind="cfc:data1.getProjects({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{projec t})">

<cfgridcolumn name="PROGRAMID" display="yes"/>
<cfgridcolumn name="PROGRAMNAME" header="PROGRAMNAME" >
<cfgridcolumn name="PROGRAMTYPE" header="PROGRAMTYPE" >


</cfgrid>
</cfform>


-----------

i am getting the following error :

You cannot specify more arguments to a CFC function than it declares.

this can change if i remove {project form the cfgrid bing argument.
the how can i trigger the cfgrid from the dropdown ?


thanks

Your getProjects() method does not have an argument for the programId, but you are trying to pass it in from your grid's binding statement.

You need two CFC methods, one to get all the projects (for the list), and one to get just the data for one project (for the grid).

hey hello how are you i will send you the email may you should have it i wana know if its help full to you

Hi , thanks
Iam still stuck as iam using cf mx 7 and it does not have bind syntax
Do you have any alternate options whithout bind
Thanks.

Then you'll have to use something like jQuery to make the AJAX calls and update the client DOM.

Hi Kiteless ,
that what i am trying to do basically. Iwas able to pass the query into a CF array ..now i would like to pass the CF array to a Javascript array.
Any idea how to do this ?

thanks

CF runs on the server, and JavaScript runs on the client. So you can't "pass" anything between CF and JavaScript. You need to make an HTTP request (typically an AJAX request) from the client's browser to the server in order to move any data between the two. You can find numerous examples of using CF and jQuery online, such as this.

Do you actually understand what AJAX is and what jQuery does? If not, you're going to have to read through a book, the jQuery documentation, or go through some of the many online examples. There are entire books written about AJAX, so it isn't something that you're going to get an answer to in a forum post. The breadth of the topic is much to large.

Hi Robert,
thanks for the guidance.
i have basically written the follwing code but not reaaaly working. I am sure this will do what i am expecting to see.


can you double check it please : Actually this code getscfquery into java array and the funcmtion onchange will just pass the JVS variable to the textbox.. not sure what is actually missing in the code ..i am geting my dropdownlist but the corresponding value does not show into textbox..

hre is my code :

[code]


<cfquery name="RecordsetUpdate" datasource="ORA1">
SELECT PROGRAMID,PROGRAMNAME,PROGRAMTYPE
FROM LAYACHMO.PROGRAM
</cfquery>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
<cfoutput>
<script language="JavaScript">

//store array for addresses
var rec_count = #RecordsetUpdate.recordCount#;
var PROGRAMID = new Array(rec_count);
var PROGRAMNAME = new Array(rec_count);
var PROGRAMTYPE = new Array(rec_count);

<cfset count = 0>
<cfloop query="RecordsetUpdate">
PROGRAMID[#count#]= "#PROGRAMID#";
PROGRAMNAME[#count#]= "#PROGRAMNAME#";
PROGRAMTYPE[#count#]= "#PROGRAMTYPE#";

<cfset count = count +1>
</cfloop>

</cfoutput>
//Now the function that is caused by an onchange() from a select box
//JS event:
function changeAddress(obj){
var j = obj.selectedIndex - 1;
with (document.form1)
{
document.form1.PROGRAMID.value = PROGRAMID[j];
document.form1.PROGRAMNAME.value = PROGRAMNAME[j];
document.form1.PROGRAMTYPE.value = PROGRAMTYPE[j] ;
}
}
</script>





<form name="form1" >



<select name="RecordsetUpdate" onchange="changeAddress(this)">
<option value="">Select One ...
<cfif RecordsetUpdate.recordCount gt 0>
<cfoutput query="RecordsetUpdate">
<option value="#PROGRAMID#">#PROGRAMNAME#
</cfoutput>
</cfif>
</select>
<br><br><br><br>

<input type="text" name="PROGRAMTYPE" value="">
<!---<input type="text" name="lastname" value="">--->




</form>


</body>
</html>

Saying it is "not really working" doesn't help at all. What is the actual problem? Have you tried debugging your JavaScript with Firebug to see if there are any errors?

hi ,

The only part i could not test is the following :

function changeAddress(obj){
var j = obj.selectedIndex - 1;
with (document.form1)
{
document.form1.PROGRAMID.value = PROGRAMID[j];
document.form1.PROGRAMNAME.value = PROGRAMNAME[j];
document.form1.PROGRAMTYPE.value = PROGRAMTYPE[j] ;
}


i am not sure how to go through the form1 and pass variables to textfields. it seems not working with var j = obj.selectIndex -1;

thought /?