CODEWITHSUNDEEP
javascriptjqueryajaxcoldfusioncoldfusion-9
Will
Will

Reputation: 3044

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.

Upvotes: 4

Views: 3363

Answers (3)

Jack Traynor
Jack Traynor

Reputation: 149

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.

Upvotes: 3

Jason Dean
Jason Dean

Reputation: 9615

You can do this very simply with jQuery load(). load() will make an async request to the page and then load the response into the specified element. 

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

Trying copying the above into your page.

Upvotes: 2

Dan Short
Dan Short

Reputation: 9616

You could use the cfdiv tag to manage the AJAX request for you:

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

You could then use the ColdFusion.navigate function to reload or change the URL of that div.

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

Upvotes: 2

Related Questions