Question

我正在尝试从我的数据库中获取表格。我一直在尝试按照PHP指南，因为它认为它会非常相似，但我可以让它工作。

我有一个单独的文件，它获取数据并将其放入表中。然后我尝试使用Javascript来获取文件并刷新它。

这是我的主要档案。

<module template="../includes/header.cfm"  pagetitle = "Jaguar Live Capture">   
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12">
     <h1>Live Capture</h1><br />
     <h2>Pen 1</h2>
     <div id="tableHolder"></div>

    </div><!--/span-->
  </div><!--/row-->

这是我的getData.cfm

    <cfquery name="liveFeed">
SELECT * FROM details LIMIT 0, 10   
</cfquery>

    <style>
    .oddRow{background:#ffffff;}
    .evenRow {background: #DBDBDB;}
    .warn{background:red;}
    </style>

<table cellpadding="2">
<cfoutput query="liveFeed">

     <cfif liveFeed.currentRow mod 2><cfset rowstyle = "oddRow">
    <cfelse><cfset rowstyle = "evenRow">
    </cfif>

    <cfscript>
    if (liveFeed.form_id == "" || liveFeed.first_name =="" || liveFeed.surname =="" || liveFeed.email ==""){ rowstyle = "warn";}
    </cfscript>

    <tr class="#variables.rowstyle#">
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.form_id#</td>
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.title#</td>
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.first_name#</td>
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.surname#</td>
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.email#</td>
    </tr>
</cfoutput>
</table>

我尝试过几段javascript和ajax但没有成功。任何人都可以帮我创建脚本来刷新页面。

Answer 1

试试这个......

<script type="text/javascript">
    window.setInterval(function(){$('#tableHolder').load('/getData.cfm');}, 6000);
</script>

setInterval用于每隔60秒触发一次匿名函数。

匿名函数使用jQuery .load()函数从服务器获取文件HTML，并用它替换选定的元素HTML。

Answer 2

您可以使用cfdiv标记为您管理AJAX请求：

<cfdiv id="tableHolder" bind="url:getData.cfm" />

然后，您可以使用ColdFusion.navigate函数重新加载或更改该div的URL。

ColdFusion.navigate('getData.cfm', 'tableHolder');

Answer 3

使用jQuery load（）可以非常简单地完成此操作。 load（）将向页面发出异步请求，然后将响应加载到指定的元素中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
    $('#tableHolder').load('getData.cfm');
});
</script>

尝试将上述内容复制到您的页面中。

如何使用AJAX刷新表格

3 个答案: