How can I use AJAX to refresh a table

I am trying to get a table to update from my database. I have been trying to follow a php guide as it thought it would be quite similar but I can get it to work.

I have a separate file That gets the data and puts it into a table. Then im trying to use Javascript to get the file and refresh it.

This is my main file.

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

This is my 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>

I have Tried a few pieces of javascript and ajax but have had no success. Can anyone help me create the script to refresh the page.

Answers


Try this...

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

setInterval is used to fire our anonymous function every 60 seconds.

The anonymous function uses the jQuery .load() function to get a files HTML from the server and replace the selected elements HTML with it.


Need Your Help

Make a Backbone collection of models with data from a JSON file

javascript json backbone.js handlebars.js

i just got started with Backbone.js and think i've kinda understood the concept of it.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.