Clear and reload div with data via AJAX and jQuery

ajax, coldfusion, jquery

Solution

Simply set the html to empty by assigning empty string.

success:function(data) 
{
    $('#picoutput').html("");
}

Problem

I have an ajax call that requests data from a Coldfusion CFC method and displays the data in a div. There is also a link to delete this data which uses the same CFC but a different method to delete. Both methods work independently just fine. What I can't seem to figure out is how to encapsulate the call in a function and refresh the div once the deletion has been successful. Here is the code: ajax call ``` var caseid = <cfoutput>'#URL.ID#'</cfoutput>; var siteurl = <cfoutput>'#APPLICATION.url#'</cfoutput>; var html = ""; function assetsPost() { $.ajax({ cache: false, type:'GET', url:'cfc/cfc_Asset.cfc?method=qAsset&returnformat=json', dataType: "json", data: { assetgrp_id: caseid, }, success:function(data) { if(data) { // DO SOMETHING jQuery.each(data, function(i, val) { $('#picoutputannotation').html(data[i].annotation); var asset_id = data[i].value; var img = siteurl + 'assets/images/thumbs_check2/' + data[i].thumb; var removeimg = siteurl + 'assets/images/remove.png'; var annotation = data[i].annotation; html += "<div class='block-pics'>"; html += "<img src='" + img + "'>"; html += "<div class='note'>"; html += annotation; html += "</div>"; html += "<div class='block-pics-remove'>"; html += "<a class='delete-asset' id='" + asset_id + "'><img src='" + removeimg + "'></a>"; html += "</div>"; html += "<div class='bot'></div>"; html += "</div>"; }); $('#picoutput').html( html ); } else { // DO SOMETHING } } }); } assetsPost(); ``` here is the deletion script: ``` $(document).on("click", ".delete-asset", function() { var del_id = $(this).attr('id'); $.ajax({ type:'GET', url:'cfc/cfc_Asset.cfc?method=DeleteAsset&returnformat=json', dataType: "json", data: { delete_id: del_id, }, success:function(data) { if(data) { // DO SOMETHING $('#picoutput').empty(); {assetsPost()}; $('#picoutput').fadeIn('fast'); } else { // DO SOMETHING } } }); }); ``` here is the html: ``` <div class="grid_6"> <div id="picoutput"></div> </div> </div> ```

Original source