Coldfusion Abfrage zeigen ausblenden div

Question

Ich habe ein Szenario, wo ich eine Schaltfläche zeigen muss, die onclick wird erweitern und zeigen den Rest der Werte. Die Werte stammen aus einer Abfrage. Wenn die Werte beispielsweise mehr als 8 sind, muss die Schaltfläche angezeigt werden. Ich weiß, das klingt ziemlich einfach, ich habe so etwas wie unten versucht, aber gibt es einen besseren Weg (dynamischer), es zu tun?

<cfif getqry.recordCount neq 0> 
     <div id="topics" class="posts margin-bottom-40"> 
      <div class="headline"><h2>News </h2> 
     <cfoutput> 
     <cfloop query="getqry" startrow="1" endrow="8"> 
      <div class="btn-group hover_drop_down"> <a href="/abc.cfm?newsid=#nid#" class="btn" type="button"> #News_item# </a> </div> 
     </cfloop> 

      <cfif getqry.recordCount gt 8> 
      <div id="collapse-news" class="collapse-inline collapse"> 
        <cfloop query="getqry" startrow="9" endrow="#getqry.recordCount#"> 
          <div class="btn-group hover_drop_down"> <a href="abc.cfm?newsid=#nid#" class="btn btn-news dropdown-toggle" type="button"> #news_item# </a> </div> 
       </cfloop> 
      </div> 

     <button class="btn btn-kw-ml MoreLess" data-toggle="collapse" data-target="##collapse-news">See More</button> 
     </cfif> 
     </div> 
     </cfoutput> 
    </cfif> 

<script type="text/javascript"> 
     $('.MoreLess').click(function(){ 
       var $this = $(this); 
       $this.toggleClass('MoreLess'); 
       if($this.hasClass('MoreLess')){ 
        $this.text('See More');     
       } else { 
        $this.text('See Less'); 
       } 
     }); 
</script> 

Answer 1

Ich verwende diesen Ansatz.

In Coldfusion

<cfsavecontent variable = dynamicContent> 
coldfusion and html code goes here 
</cfsavecontent> 

<div id="stuffToToggle"> 
something here, maybe 
</div> 

In Javascript

<cfoutput> 
var #toScript(dynamicContent, "stuffFromColdFusion")# 
</cfoutput> 
function toggleStuff() { 
if (something) 
document.getElementById("stuffToToggle").innerHtml = stuffFromColdFusion; 
else 
document.getElementById("stuffToToggle").innerHtml = somethingElse; 
} 

Die Syntax ist vielleicht nicht perfekt sein. Ich zeige dir nur die allgemeine Idee.

Answer 2

Es gibt keine einzeilige Lösung. Sie könnten jedoch den Code ein Bit vereinfachen, indem Sie die Variable query.currentRow verwenden, um die Generierung des Containers div zu steuern. Außerdem brauchen Sie weder cfloop noch cfoutput.

<cfset hideAtRow = 9> 
... 
<cfoutput query="getQry"> 

     <!--- start container for "show more" ---> 
     <cfif getQry.currentRow eq hideAtRow > 
     <div id="collapse-news" class="collapse-inline collapse"> 
     </cfif> 

     <!--- assign classes based on current row number ---> 
     <cfset btnClass = currentRow gte hideAtRow ? "btn btn-news dropdown-toggle" : "btn"> 
     <div class="btn-group hover_drop_down"> 
     <a href="/abc.cfm?newsid=#nid#" class="#btnClass#" type="button"> #News_item# </a> 
     </div> 

     <!--- on last row, close "show more" container if needed ---> 
     <cfif getQry.currentRow eq getQry.recordCount and getQry.currentRow gte hideAtRow > 
     </div> 
     <button id="testButton" class="btn btn-kw-ml MoreLess" data-toggle="collapse" data-target="##collapse-news">See More</button> 
     </cfif> 

</cfoutput> 
...