5 Replies Latest reply on Aug 2, 2013 8:42 AM by TheScarecrow

    Load Data into a Div

    TheScarecrow Level 1

      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?

        • 1. Re: Load Data into a Div
          duncancumming Level 3

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

          • 2. Re: Load Data into a Div
            duncancumming Level 3

            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>

            • 3. Re: Load Data into a Div
              TheScarecrow Level 1

              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?

              • 4. Re: Load Data into a Div
                duncancumming Level 3

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

                • 5. Re: Load Data into a Div
                  TheScarecrow Level 1

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