Created
May 31, 2019 21:59
-
-
Save trycf/7821ba728fdd91e0ea014b83bc7895e5 to your computer and use it in GitHub Desktop.
TryCF Gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<cfscript> | |
// SETUP | |
trips = queryNew( | |
"REC_ID, NAME, STATUS, TYPE, YEAR", | |
"varchar, varchar, varchar, integer, integer", | |
[ | |
{"REC_ID":"01", "NAME":"PARIS", "STATUS":"Approved", "TYPE":1, "YEAR":2019}, | |
{"REC_ID":"06", "NAME":"AUSTIN", "STATUS":"Inactive", "TYPE":3, "YEAR":2017}, | |
{"REC_ID":"48", "NAME":"LONDON", "STATUS":"Approved", "TYPE":2, "YEAR":2018}, | |
{"REC_ID":"43", "NAME":"ROME", "STATUS":"Inactive", "TYPE":5, "YEAR":2019}, | |
{"REC_ID":"61", "NAME":"DUBLIN", "STATUS":"Inactive", "TYPE":4, "YEAR":2019} | |
] | |
); | |
// Function to get data. Returns struct. Could easily just use original query object. | |
private Struct function getData(){ | |
// Query | |
var q = QueryExecute(("SELECT * FROM trips ORDER BY REC_ID"),{},{dbtype="query"}) ; | |
// Build the final array in a format you want. | |
var finArr = [] ; | |
for (var r in q) { | |
arrayAppend(finArr,r); | |
} | |
//writeDump(finArr); | |
return { "numRecords": q.recordcount , "finArr":finArr } ; | |
} | |
local.retDataObj = getData() ; | |
//writeDump( serializeJSON(local.retDataObj.finArr) ); | |
</cfscript> | |
My Data Has <a href="#" id="recnum"><cfoutput>#local.retDataObj.numRecords#</cfoutput></a> records. <br><br> | |
<div id="showme1"> <!--- Container for links. ---> | |
<!---- We loop over the query output and build links for each row of results. Then use HTML data- attributes to pass a serialized JSON object to our JS. ---> | |
<cfoutput> | |
<cfloop from="1" to="#arrayLen(local.retDataObj.finArr)#" index="i"> | |
<a href="##" id="idx#i#" class="gd" data-arr='[#serializeJSON(local.retDataObj.finArr[i])#]'>Show Record #i#</a> <br> | |
</cfloop> | |
</cfoutput> | |
</div> | |
<br><br> | |
<div id="showme2"> <!--- Container for results. ---> | |
REC_ID: <span id="REC_ID"></span> <br> | |
NAME: <span id="NAME"></span> <br> | |
STATUS: <span id="STATUS"></span> <br> | |
TYPE: <span id="TYPE"></span> <br> | |
YEAR: <span id="YEAR"></span> | |
</div> | |
<br><br><br> | |
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> | |
<script type="text/javascript"> | |
$(function(){ | |
$('#showme1, #showme2').hide(); // Hide results on page load. | |
// Show links when you click recordcount. | |
$('#recnum').on('click',function() { | |
$('#showme1').show(); | |
} ) ; | |
// Populate and show results when you click applicable link. Data passed from data-arr attribute. | |
$(".gd").on('click',function(){ | |
$("#showme2").show(); | |
$("#REC_ID").html( $(this).data("arr")[0]["REC_ID"] ); | |
$("#NAME").html( $(this).data("arr")[0]["NAME"] ); | |
$("#STATUS").html( $(this).data("arr")[0]["STATUS"] ); | |
$("#TYPE").html( $(this).data("arr")[0]["TYPE"] ); | |
$("#YEAR").html( $(this).data("arr")[0]["YEAR"] ); | |
}); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment