Refresh CFDIV on AJAX success - ajax

Question

I have an AJAX call that adds data to my ColdFusion database.
<!---Script to add dashboard link --->
<cfoutput>
<script>
$(function(){
//Add a new note to a link
$("##add_dashboard_links").submit(function(){
// prevent native form submission here
$.ajax({
type: "POST",
data: $('##add_dashboard_links').serialize(),
url: "actionpages/add_dashboard_link.cfm",
beforeSend: function(){
$('.loader').show();
},
complete: function(){
$('.loader').hide(3000);
},
success: function() {
$("##noteDiv").load( 'templates/dashboard_notes.cfm?techID=#techID#' );
$("##addNoteResponse").html('');
$("##link_description").val('');
$("##link_url").val('');
$("##notes").val('');
$("##addNoteResponse").append( "Link successfully added." );
}
});
return false;
});
});
</script>
</cfoutput>
I also have a CFDIV that binds to some other content
<!---Dashboard Links --->
<div id="noteDiv" bind="url:templates/dashboard_notes.cfm">
</div>
Here is my modal code located on my template page that contains the form that this AJAX script references (This plugin is found here https://github.com/kylefox/jquery-modal):
<!--- Link to open the modal to add a new dasboard link --->
<div id="DashboardLinks" style="display:none;">
<h3>Add a new dashboard link:</h3>
<form id="add_dashboard_links">
<table width="100%" id="dashboard_table" border="0" cellpadding="5">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>Link Description:</td>
<td colspan="2"><input type="text" name="link_description" id="link_description" required="yes" message="Please enter the Link Description"/></td>
</tr>
<tr>
<td>Link URL:</td>
<td colspan="2"><input type="text" name="link_url" id="link_url" required="yes" validate="url" message="Please enter the Link URL with http:// -or- https://"/></td>
</tr>
<tr>
<td>Link Notes:</td>
<td colspan="2"><textarea id="notes" name="notes" cols="" rows=""> </textarea></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="button" id="button" value="Add Link" />
<input type="hidden" name="link_hidden" value="1"><br />
<div class="loader"><img class="loading-image" src="images/loading.gif" /></div>
<div class="response" id="addNoteResponse"></div>
</td>
</tr>
</table>
</form>
</div>
Is there a way to refresh this CFDIV tag once I recieve the AJAX SUCCESS?
Thanks.

Answer 1

Don't use cfdiv (or any other ColdFusion UI functionality). Since you are already using jQuery, stick with that. Use a plain old HTML <div> and keep the same id.
<div id="noteDiv" bind="url:templates/dashboard_notes.cfm"></div>
Then, in your AJAX call, add this to the success block
$("#noteDiv").load( 'templates/dashboard_notes.cfm' );
You will also need to add that line elsewhere to get the content loaded initially.