Skip to main content
Known Participant
August 1, 2013
Question

Load Data into a Div

  • August 1, 2013
  • 1 reply
  • 1010 views

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?

    This topic has been closed for replies.

    1 reply

    Participating Frequently
    August 1, 2013

    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?)

    Participating Frequently
    August 1, 2013

    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>