Copy link to clipboard
Copied
I'm looking for a way to toggle open/close a table row within a search query. I have a table of results and a link to more detailed information. I would like that page to stay within the current page. I have the ColdFusion.navigate working correctly but wondering if there is a way to close it?
Here's some of the code I'm using...
<td><a href="javascript:ColdFusion.navigate('details.cfm?ID=#ID#','detail#q.CurrentRow#')">#q.sln#, #q.sfn#</a></td>
<td><cfdiv id="detail#q.CurrentRow#"></cfdiv>
Message was edited by: Catherine Lesniewski
I figured this one out. I found the answer doing more searching around so maybe I was asking the wrong question at first. It's more so hide/show a table row. So what I found is a JS and some code within the query results table. Here's the solution or for me anyway.
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
var d = (e.style.display == "inline" || e.style.display == e.style.display == "")? "none" : "";
e.style.display = d;
}
</script>
Then add in the pa
...Copy link to clipboard
Copied
Do you mean you wish to toggle the visibility of the link? If so, then use either of the CSS properties, Display or Visibility.
Here is an example:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.visibility == 'hidden')
e.style.visibility = 'visible';
else
e.style.visibility = 'hidden';
}
//-->
</script>
<table>
<cfoutput query="q">
<tr><td id="row#id#"><a href="javascript:ColdFusion.navigate('details.cfm?ID=#ID#','detail#q.CurrentRow#')">#q.sln#, #q.sfn#</a></td><td><a href="##" onClick="javascript:toggle_visibility('row#id#')">Show/Hide</a></td></tr>
</cfoutput>
</table>
Copy link to clipboard
Copied
This helps some but no I don't want to toggle the link. When the user clicks on the link page detail.cfm appears under the link. What I'm trying to do is when the link is clicked again the detail.cfm portion goes away.
Copy link to clipboard
Copied
It is still unclear what you wish to toggle with what. There are a number of processes going on underneath: the open window, its original content, the content - within the window - coming from detail.cfm, and the closed window. It may be impossible to toggle between them.
ColdFusion.navigate() does not create the window. Neither can it open a window. It simply copies output from the page detail.cfm into the already opened window.
You would therefore need, besides ColdFusion.navigate(), two further events. One to open or re-open the window and one to close it. That makes a total of at least 3 events.
Here is an example toggling a shown and a hidden window:
<table>
<cfoutput query="q">
<tr><td><a href="javascript:ColdFusion.navigate('details.cfm?ID=#ID#','detail#q.CurrentRow#')">#q.sl n#, #q.sfn#</a></td><td><a href="javascript:ColdFusion.Window.hide('detail#q.CurrentRow#');">Hide</a> | <a href="javascript:ColdFusion.Window.show('detail#q.CurrentRow#');">Show</a></tr>
</cfoutput>
</table>
Copy link to clipboard
Copied
I figured this one out. I found the answer doing more searching around so maybe I was asking the wrong question at first. It's more so hide/show a table row. So what I found is a JS and some code within the query results table. Here's the solution or for me anyway.
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
var d = (e.style.display == "inline" || e.style.display == e.style.display == "")? "none" : "";
e.style.display = d;
}
</script>
Then add in the parent row this
<tr id="Parent#query.currentrow#" onClick="toggle('Child#query.currentrow#')"></tr>
Then for the row you want to show/hide you wrap with a <tbody> tag and simply put...
<tbody id="Child#query.currentrow#" style="display:none"></tbody>
Here's the link where I found the answer... EasyCFM.COM ColdFusion Forums - Show/Hide Rows