ciao a tutti,

innanzitutto chiedo scusa fin da subito, se la cosa può sembrare complicata.

Premessa sto realizzando un catologo interattivo gestibile dall'utente, in esso è presente anche una pagina per la gestione delle immagini con relativo sistema di upload con JQuery e PHP.

Vi dico a che pto sono arrivato

La gestione dell'upload funziona in modo corretto, la pagina è così strutturata:
- form con dati per upload;
- iframe nascosto per la gestione dell'upload;
- div contenente il risultato delle immagini caricate(è realizzato con la funzione $.load() di Jquery, tramite una funzione che viene lanciata, al caricamento della pagina e tutte le volte che l'upload va a buon fine) in questo modo gestisco tutto.

Qui il problema: mi chiama il cliente e vuole che dove vengono listate le immagini siano disponibili due bottoni: save, delete per gestire le immagini. A questo pto non so più dove sbattere la testa.

Ho utilizzato un iframe nascosto, nella pagina che viene richiamata con $.load(), nella quale faccio le relative modifiche. Ma quando devo eliminare una immagine come faccio a ricaricare quella porzione di codice????

Pagina principale:

codice:
<form action="include/ajax/upload.php" id="uploadForm" method="post" enctype="multipart/form-data" target="upload_target">
 <p id="uploadFields"> 
 <label>Seleziona l'immagine da caricare:</label><input id="files" name="file" type="file" />
 <br class="clear" />
 <label>Cambia il nome all'immagine:</label>
 <input id="name" name="nome" type="text" class="text" />
 <br class="clear" />
 <label>Attributo "ALT" dell'immagine:</label>
 <input id="title" name="alt" type="text" class="text" />
 <br class="clear" />
 <label>Rendi disponibile per le News:</label>
 <input id="anews" name="news" type="checkbox" class="check"/>
 <br class="clear" />
 <input type="submit" name="submitBtn" id="uploadbutton" value="Carica Immagine" />
 </p>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #f00;"></iframe>
<p id="loader">Caricamento in corso: Attendere
[img]images/template/loader.gif[/img]</p>
</form>
<div id="listThumb"><div id="loading">Attenzione: caricamento delle thumb in corso...
[img]images/template/loader.gif[/img]</div></div>
Codice per il refresh richiamato dall'iframe quando upload ha successo
codice:
function resfreshImg(){
  $('#loading').show();
  $('#listThumb').load("include/ajax/listofimage.php?m=3",function(){
    $('#loading').hide();
    Shadowbox.init({handleOversize:"drag",modal:true});
  });
}
Codice che lista le immagini coi relativi bottoni
Codice PHP:
//prelevo i dati passati in post e faccio operazioni col db
echo '<iframe id="edit_image" name="edit_image" src="#" style="width:99%;height:100%;border:1px solid #f00;"></iframe>';
//stampo una form per ogni immagine listata del tipo    
$lista .='<form action="include/ajax/editImages.php" enctype="multipart/form-data" method="post" target="edit_image" id="edit'.$v['_id'].'">'."\n";
$lista .='<p class="float opt">[url="'.$v['image'].'"][/url]</p>'."\n";
$lista .='<p class="float testo"><input class="txt" type="text" name="name" readonly="readonly" value="'.$v['name'].'"/></p>'."\n"; 
$lista .='<p class="float testo"><input class="txt" type="text" name="alt" value="'.$v['alt'].'"/></p>'."\n";
$lista .='<p class="float opt"><input class="check" type="checkbox" name="news"'.$check.'/></p>'."\n";
$lista .='<p class="float opt"><button type="submit" name="opts" class="ico save" title="Salva le modifiche" value="s"/></button></p>'."\n";
$lista .='<p class="float opt"><button type="submit" name="optd" class="ico del" title="Cancella l\\'immagine" value="d"></button></p>'."\n";
$lista .='<input type="hidden" name="id" value="'.$v['_id'].'">'."\n";
$lista .='<input type="hidden" name="opt" value="">'."\n"; 
$lista .='</form>'."\n";
$lista .='<br class="clear"/>'."\n";
echo $lista;            
//stampo codice che mi intercetta il bottone premuto save or del
echo '<script type="text/javascript">'."\n";
echo '$(\\'button\\').click(function(){
  var form = $(this).parent().parent();
  var formID = form.attr("id");
  var opt = $(this).val();$("#"+formID+" input[name=opt]").val(opt) })';
echo '</script>'."\n"; 
action="include/ajax/editImages.php"
Codice della Pagina richiamata action="include/ajax/editImages.php" che intercetta opzione
Codice PHP:
//prelevo tutti i dati in post
//procedura per aggiornare il db 
Manca da implementare la cancellazione solo che vorrei fare in modo che all'avvenuta cancellazione il div#listThumb si aggiornasse ma non so come procedere con JS, in php tutto ok in quest'ultimo codice php postato riesco a gestirlo solo che poi per vedere graficamente il risultato devo fare il refresh della pagina

Spero qualcuno riesca ad aiutarmi