Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4

    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
  2. #2
  3. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,265
    Rep Power
    968
    If you have a cfselect like this:

    Code:
    <b>Projects:</b> <cfselect bind="cfc:projectService.getProjects()" bindonload="true" value="projectid" display="projectname" name="project" />
    You can trigger a cfgrid to update based on the selection by setting a bind expression like:

    Code:
    bind="cfc:projectService.getProjectData( {cfgridpage}, {cfgridpagesize}, {cfgridsortcolumn}, {cfgridsortdirection}, {project} )"
    See the CF docs for full and lengthy explanations of how the AJAX controls and binding expressions work.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    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


    Originally Posted by kiteless
    If you have a cfselect like this:

    Code:
    <b>Projects:</b> <cfselect bind="cfc:projectService.getProjects()" bindonload="true" value="projectid" display="projectname" name="project" />
    You can trigger a cfgrid to update based on the selection by setting a bind expression like:

    Code:
    bind="cfc:projectService.getProjectData( {cfgridpage}, {cfgridpagesize}, {cfgridsortcolumn}, {cfgridsortdirection}, {project} )"
    See the CF docs for full and lengthy explanations of how the AJAX controls and binding expressions work.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    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
  8. #5
  9. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,265
    Rep Power
    968
    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.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    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},{ project})">

    <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
  12. #7
  13. No Profile Picture
    Moderator

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

    Join Date
    Jun 2011
    Posts
    1
    Rep Power
    0

    hey


    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
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    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.


    Originally Posted by Diyroberts
    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
  18. #10
  19. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,265
    Rep Power
    968
    Then you'll have to use something like jQuery to make the AJAX calls and update the client DOM.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    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


    Originally Posted by kiteless
    Then you'll have to use something like jQuery to make the AJAX calls and update the client DOM.
  22. #12
  23. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,265
    Rep Power
    968
    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.
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    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>
  26. #14
  27. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,265
    Rep Power
    968
    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?
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    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 /?

    Originally Posted by kiteless
    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?
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo