How can I use AJAX to update a table

Question

I am trying to get a table to update from my database. I tried to follow the php manual as he thought it would be very similar, but I can make it work.

I have a separate file that receives data and puts it in a table. Then I try to use Javascript to get the file and update 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 tried several parts of javascript and ajax, but did not succeed. Can someone help me create a script to refresh the page.

Answer 1

Try it...

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

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

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

Answer 2

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

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

You can then use the ColdFusion.navigate function to reload or change the URL of this div.

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

Answer 3

You can do this very simply with jQuery load (). load () will make an asynchronous 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 to copy the above to your page.