Question

任何人都可以解释我如何构建我的CF 使用Bootstrap模式的组件/输出页面动态显示？下面的代码有效但我需要模态窗口仅显示与'cat_ID'相关的输出它显示所有或一些结果的那一刻，但从来没有只是那些与特定迭代相关的那些 'CAT_ID' 非常感谢...

<!---invoke services.cfc ---> 
<cfinvoke component="components.services" method="getServices" returnvariable="services"> 
</cfinvoke> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 
transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <!-- Bootstrap core CSS --> 
    <link href="dist/css/bootstrap.css" rel="stylesheet"> 
    <http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Services</title> 
  </head> 

  <body> 
    <div class="container"> 
      <!-- Example thumbnail + text --> 
      <cfoutput query="services" group="cat_ID" groupcasesensitive="no"> 
        <div class="col-md-3"> 
          <div class="thumbnail"> 
            <img src="images/some.jpg"> 
            <div class="caption"> 
              <h4>#cat_ID#</h4> 
              <p>#type_en#</p> 
              <p><button class="btn btn-default" data-
 toggle="modal" data-target="###cat_ID#">View Details »</button></p> 
            </div> 
          </div> 
        </div> 
      </cfoutput> 

      <!-- Modal --> 
      <cfoutput query="services"> 
        <div class="modal fade" id="#cat_ID#" tabindex="-1" role="dialog" aria-labelledby="One" aria-hidden="true"> 
          <div class="modal-dialog"> 
            <div class="modal-content"> 
              <div class="modal-header"> 
                <button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button> 
                <h4 class="modal-title" id="myModalLabel">#title_en#</h4> 
              </div> 
              <cfoutput>        
                <div class="modal-body">        
                  #company# <br /> 
                  #title_en# 
                  #Replace(desc_en, chr(13), '<br>','ALL')#<br />       

                </div> 
              </cfoutput> 
            </div><!-- /.modal-content --> 
          </div><!-- /.modal-dialog --> 
        </div><!-- /.modal --> 
      </cfoutput>       
    </div> 
    <!-- Bootstrap core JavaScript 
         ================================================== 
    --> 
    <!-- Placed at the end of the document so the pages 
         load faster --> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="dist/js/bootstrap.min.js"></script> 
  </body> 
</html>

'services.cfc'组件：

<cfcomponent displayname="Services" hint="ColdFusion Component for showing services">
<!--- This function retrieves all services from the database ---> 
  <cffunction name="getServices" hint="Gets services from the database" returntype="query"> 
    <cfquery name="services">   
      SELECT * 
        FROM dbo.services 
    ORDER BY cat_ID      
    </cfquery> 
    <cfreturn services> 
  </cffunction> 
</cfcomponent>

Answer 1

在你的模态中你有这行代码：<cfoutput query="services">，这将循环遍历服务查询中的所有内容，进一步说明你无法控制何时输出以及何时停止。

如果你有按钮来调出模态，你需要通过你感兴趣的cat_id，然后在模态中你可以做类似的事情：

<cfoutput query="services">
  <cfif cat_id eq url.cat_id>
    <!--- display information relating to the cat --->
    <cfbreak>
  </cfif>
</cfoutput>

Answer 2

你有一个Bootstrap依赖项，所以你也可以利用Ajax。向CFC添加第二个函数以获取单个cat_id记录。

<cffunction name="getServices" hint="Gets services from the database" returntype="query"> 
  <cfargument name="cat_ID" required="yes">
  <cfquery name="service">   
    SELECT * 
      FROM dbo.services
      WHERE cat_ID=#arguments.cat_ID#    
  </cfquery> 
  <cfreturn services> 
</cffunction>

创建一个新文件并将其命名为modal.cfm，并使用上面的新函数结合当前模态代码，使用传入的cat_ID作为URL参数生成单个模态。

将Bootstrap Modal的href属性添加到第一个循环中的按钮（这会自动调用Jquery的Ajax Load）并将cat_id包含为通过URL参数将cat_ID传递给上面函数的查询参数。动态生成单个模态。您应该可以使用任何ID独立于调用页面测试此页面。

<button class="btn btn-default" data-toggle="modal" href="modal.cfm?catid=#cat_ID#" data-target="##modal">View Details »</button>

这也会增加您的初始页面加载性能。不要忘记清理你的URL参数！

编辑：根据您的评论，用以下内容替换第一个CFML页面中的整个模态块：

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="One" aria-hidden="true">
    <div class="modal-dialog"> 
        <div class="modal-content">
        </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div>

modal.cfm应该只包含要注入每个Boostrap文档的“modal-content”div的输出，因此modal.cfm中的代码应该类似于：

<cfoutput query="services">
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title" id="myModalLabel">#title_en#</h4> 
</div>       
<div class="modal-body">        
    #company# <br /> 
    #title_en# 
    #Replace(desc_en, chr(13), '<br>','ALL')#<br />       
</div> 
</cfoutput>

请注意，我们从modal.cfm中删除了无关的cfoutput，并且我们已将模式div ID从“cat_ID”更改为“modal”，因为我们可能不必担心此方案中的唯一ID。

Answer 3

终于破解了！我在调用页面的整个模态周围放置相同的cfoutput查询，并使用模态id中的cat_ID与每个拇指的cat_ID对应。不确定这是否是最好的方式/唯一方式，但这是我能够让它工作的唯一方法。再次感谢您的帮助！

动态输出Bootstrap模态

3 个答案: