Load Data into a Div

[TheScarecrow]

I have a list of names and I want the user to click on the name and it will reveal the DIV and load the appropriate data into it.  How can I do this and can I do it withouth the page refreshing?

[duncancumming]

You can simply do that with some javascript.  It might help if you post some code here.  Where is your list of names and data coming from for instance (e.g. are you hardcoding them, is it in a cfquery, etc?)

[duncancumming]

Here's some code that works for me.

<cfset data = queryNew('id,name,text')>

<cfset queryAddRow(data, 4)>

<cfset querySetCell(data, 'id', '100', 1)>

<cfset querySetCell(data, 'name', 'Item 1', 1)>

<cfset querySetCell(data, 'text', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 1)>

<cfset querySetCell(data, 'id', '101', 2)>

<cfset querySetCell(data, 'name', 'Item 2', 2)>

<cfset querySetCell(data, 'text', 'Pellentesque luctus ligula id neque pellentesque, vel rutrum libero hendrerit.', 2)>

<cfset querySetCell(data, 'id', '102', 3)>

<cfset querySetCell(data, 'name', 'Item 3', 3)>

<cfset querySetCell(data, 'text', 'Donec vestibulum faucibus orci, at fermentum dolor dapibus nec.', 3)>

<cfset querySetCell(data, 'id', '103', 4)>

<cfset querySetCell(data, 'name', 'Item 4', 4)>

<cfset querySetCell(data, 'text', 'Fusce laoreet lectus eget sodales sollicitudin.', 4)>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

    var myData = [];

    <cfoutput query="data">

        myData[#data.currentRow-1#] = {

            intId:        #data.id#,

            strName:    "#data.name#",

            strText:    "#data.text#"

        };

    </cfoutput>

    function handleClicks(iRow) {

        $('#content').html(myData[iRow].intId + ' ' + myData[iRow].strName + ', ' + myData[iRow].strText);

        return false;

    }

</script>

<cfoutput query="data">

    <a href="##" onclick="handleClicks(#data.currentRow-1#)">#data.name#</a><br>

</cfoutput>

<div id="content"></div>

[TheScarecrow]

The data in the table is their name and answres to ten questions. ( name, q1, q2, ,,etc) so I have ran the query and I have it listing their names  in like a list.  WHen the user clicks on the name the div will display the question and their answers to the questions.    So will this code work that way?

[duncancumming]

yes, sure.  If you post your actual code here I can probably tailor my answer to fit.

[TheScarecrow]

Alright here goes.

How is this so far?

<cfset myObj = createObject("component","cfc.agcomm") />

  <cfset queryObj = myObj.agcommalumni()>

<cfset data = queryNew('ID,Name,Job_title,YOG,q1,q2,q3,q4,q5,q6,q7,q8,q9,q10')>

<cfset queryAddRow(data, 4)>

<cfset querySetCell(data, 'id', '#queryObj.ID#', 1)>

<cfset querySetCell(data, 'name', '#queryObj.Name#', 1)>

<cfset querySetCell(data, 'job', '#queryObj.Job_title#', 1)>

<cfset querySetCell(data, 'yog', '#queryObj.YOG#', 1)>

<cfset querySetCell(data, 'question1', '#queryObj.q1#', 1)>

<cfset querySetCell(data, 'question2', '#queryObj.q2#', 1)>

<cfset querySetCell(data, 'question3', '#queryObj.q3#', 1)>

<cfset querySetCell(data, 'question4', '#queryObj.q4#', 1)>

<cfset querySetCell(data, 'question5', '#queryObj.q5#', 1)>

<cfset querySetCell(data, 'question6', '#queryObj.q6#', 1)>

<cfset querySetCell(data, 'question7', '#queryObj.q7#', 1)>

<cfset querySetCell(data, 'question8', '#queryObj.q8#', 1)>

<cfset querySetCell(data, 'question9', '#queryObj.q9#', 1)>

<cfset querySetCell(data, 'question10', '#queryObj.q10#', 1)>