Cancella e ricarica div con dati tramite AJAX e jQuery

Question

Ho una chiamata ajax che richiede dati da un metodo CFC Coldfusion e visualizza i dati in un div. C'è anche un link per cancellare questi dati che usano lo stesso CFC ma un metodo diverso da eliminare. Entrambi i metodi funzionano indipendentemente bene. Quello che non riesco a capire è come incapsulare la chiamata in una funzione e aggiornare il div dopo che la cancellazione ha avuto successo. Ecco il codice:

ajax chiamata

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(); 

Ecco lo script eliminazione:

$(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 
     } 
    } 
    }); 
}); 

qui è il codice HTML:

<div class="grid_6"> 
       <div id="picoutput"></div> 
      </div> 
    </div> 

Answer 1

Basta impostare lo html su vuoto assegnando una stringa vuota.

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

Answer 2

È possibile indirizzare l'attività (foto) forse dargli una classe e poi rimuoverlo dal DOM in questo modo:

success:function(data) { 
    $('.assets-picture').remove(); 
} 

Spero che questo aiuto.

Answer 3

Ecco i passaggi di risoluzione dei problemi avrei preso:

1. nella tua sezione di eliminazione sostituire $('#picoutput').html(""); con $('#picoutput').empty();
2. come commento {//assetsPost()}; nello script di eliminazione. Verificare che il contenuto si stia eliminando correttamente
3. Ripristina la riga commentata. Inserire un avviso qui (o un punto di interruzione se è possibile).

function assetsPost() { 
    alert("Assets Post"); 
    $.ajax({ 
    }); 
} 

Verifica Questa funzione è solo essere chiamato una sola volta.

• Inserire un avviso (breakpoint) qui, in fondo alla quale si aggiunge il codice html

alert(html) 
$('#picoutput').html(html); 

Verificare che il codice HTML viene restituito dalla chiamata CFC contiene quello che pensi lo fa.