动态输出Bootstrap模式

任何人都可以解释如何我可以构造我的CF 组件/输出页面以动态地使用Bootstrap模态显示？下面的代码工作，但我需要模式窗口到只显示与'cat_ID'有关的输出，在显示所有或某些结果的时刻，但从未只与那些与 'cat_ID的特定迭代有关的输出“ 提前感谢...动态输出Bootstrap模式

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

来源

2014-02-11 Shalinko

终于破解了！我将相同的cfoutput查询放在调用页面的整个模式中，并使用模式ID中的cat_ID来对应每个大拇指的cat_ID。不知道这是否是最好的方式/唯一的方式，但这是我能够实现它的唯一方法。再次感谢您的帮助！

来源

2014-03-03 09:49:21 Shalinko

在你的模式，你有这行代码：<cfoutput query="services">，这将厕所p覆盖服务查询中的所有内容，进一步说，您无法控制何时输出以及何时停止。

如果你有按钮，弹出的模式，你需要通过你感兴趣的cat_id，然后在你的模态可以这样做：

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

来源

2014-02-11 10:13:35 Jarede

好吧，我想尽可能多，我试过data-target =“### cat_ID＃？cat_ID = 1”......这显然打破了它，但不知道我是否应该采取一种全新的方法。谢谢，会尝试通过cat_ID的数字方法... – Shalinko

@Shalinko你可能想看看这个Q + A http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal – Jarede

感谢，对我来说很重要的东西，但期待调整我使用的代码 – Shalinko

你有一个引导依赖关系，所以你不妨利用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单一模式使用以上您的当前模式的代码合并新功能传过来的网址PARAM。

将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应该只包含输出到“模式内容”被注入每自举文档格让你在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”到“莫代尔”因为我们可能不必担心一个在这种情况下唯一的ID。

来源

2014-02-13 00:53:33 Mag

谢谢Mag，但我现在无法让它工作。有没有办法利用从每个cat_ID数据库填充data-id =“3”或data-message =“3”，将其传递到模态，然后用cat_ID查询数据库？我想我必须阅读我的jQuery！ – Shalinko

@Mags经历你的建议，但无法让模式弹开。 modal.cfm的查看源确实显示正确的输出。 modal.cfm调用该函数，然后我在同一页面上输出数据到模态...我是否正确？ – Shalinko

看看我上面的编辑。这应该适合你。 – Mag

动态输出Bootstrap模式

回答

相关问题