Problema Jquery UI Dialog

[spyker]

Ciao a tutti, verrò subito al sodo. ho un problema con l'utilizzo delle dialog dell'API jQuery UI. Spiego brevemente il problema: all'interno del mio sito ho un piccolo box all'interno del quale vengono visualizzate delle informazioni prelevate da un database mySql (non è nient'altro che un piccolo box di visualizzazione delle news del sito).

All'interno di questo pannello, per gli amministratori del sito, sono presenti tre input di tipo button al click dei quali si dovrebbe aprire una dialog all'interno della quale vi saranno dei form per la modifica/eliminazione/aggiunta di news.

Le dialog vengono inizializzate in questo modo:

// definizione box conteniore dei pulsanti di apertura dialog per operazioni sulle news
                newsManagementButtons = $( '#news-management' );
                
                // definizione contenitore dialog e creazione nodi dialog news
                dialogContainer = $( '#dialog-container' );
                
                // se non sono state già create e inizializzate le dialog, le creo (prevengo la creazione di doppi box con gli stessi id, al momento del refresh del solo modulo delle news )
                if( !$( '#add-news-dialog' ).exists() ) {
                    dialogContainer.append( '<div id="add-news-dialog"></div>' );
                    dialogContainer.append( '<div id="delete-news-dialog"></div>' );
                    dialogContainer.append( '<div id="edit-news-dialog"></div>' );
                    
                    // definizione contenitori dialog per le operazioni sulle news
                    addNewsDialog = $( '#add-news-dialog' );
                    deleteNewsDialog = $( '#delete-news-dialog' );
                    editNewsDialog = $( '#edit-news-dialog' );
                
                    // inizializzazione dialog di creazione news
                    addNewsDialog.dialog( {
                        
                        closeText: 'X',
                        title: 'Aggiungi una news',
                        autoOpen: false,
                        resizable: false,
                        width: 400,
                        height: 300,
                        modal: true,			
                        closeOnEscape: true,		
                        appendTo: '#dialog-container',
                        draggable: false,
                        show: {
                            
                            duration: 250
                            
                        }, hide: {
                            
                            duration: 250
                            
                        },
                        
                        close: function() {
                            
                            dialogContainer.attr( 'style', 'display: none' );
                            
                        }
                        
                    } )
                    .load( '/modules/index/news-management.php?op=add' )
                    .dialog( 'widget' )
                    .find( '.ui-dialog-titlebar-close' )
                    .attr( 'title', 'Chiudi' );

ho inserito soltanto il codice di inizializzazione di una sola dialog, dato che sono tutte uguali, cambia solo il modulo caricato all'interno del div.

dopo averle inizializzate, utilizzo l'evento .on per intercettare il click sul pulsante di creazione, modifica o eliminazione di una news:

// apertura della dialog di creazione, modifica o eliminazione news al click sui pulsanti
                newsManagementButtons.on(  'click', '#add-news-button, #edit-news-button, #delete-news-button', function() {
                      
                    buttonPressed = ( $( this ).attr( 'id' ) ).split( '-' );
                    buttonPressed =  buttonPressed[0];				 
                    
                    switch( buttonPressed ) {
                    
                        case 'add':
                            dialogToOpen = addNewsDialog;
                        break;
                        
                        case 'edit':
                            dialogToOpen = editNewsDialog;
                        break;
                        
                        case 'delete':
                            dialogToOpen = deleteNewsDialog;
                        break;
                        
                    }
                    
                    dialogContainer.removeAttr( 'style' );
                    dialogToOpen.dialog( 'open' );					
                      
                } );

a questo punto, utilizzo il form che appare per effettuare una delle operazioni di cui sopra. Alla pressione del pulsante di accetazione delle modifiche, effettuo una richiesta ajax tramite la sintassi messa a disposizione da jQuery ed al termine della richiesta (parte success: ) effettuo una semplice chiusura della dialog

addNewsDialog.dialog( 'close' );

Il problema è il seguente: quando che elimino o modifico una o più news all'interno delle dialog editNewsDialog o deleteNewsDialog, le operazioni vengono effettuate con successo (difatti il database viene modificato correttamente), la dialog viene chiusa correttamente ma...il contenuto, giustamente, non si aggiorna. Va da se che quando riaprirò la stessa dialog di eliminazione o modifica delle news, dato che NON ho refreshato la pagina e non ho quindi dato la possibilità alle dialog di aggiornare il proprio contenuto, troverò che tutti i dati che avevo modificato o eliminato, sono ancora lì, come se non avessi eseguito alcuna operazione. Per meglio rendere l'idea, farò un esempio specifico: apro la finestra di eliminazione delle news, all'interno della quale vi sono una serie di checkbox con, accanto, il testo della news che voglio eliminare. Seleziono le checkbox corrispondenti alle news con ID da 1 a 5 e premo il tasto elimina. La dialog si chiude dopo aver richiesto in maniera asincrona l'eliminazione delle news con id da 1 a 5 nel database. Apro nuovamente la dialog di eliminazione delle news e trovo che le news da 1 a 5 sono ancora lì, sebbene non esistano più nel database.

Per ovviare a questo problema ho provato diverse cose ma non sono riuscito ad ottenere il risultato sperato.

Ho provato a distruggere la dialog alla sua chiusura ed a rimuovere il nodo che la conteneva (tramite dialog( 'destroy' ).remove() ) per poi reinizializzarle daccapo ricaricandone il contenuto.

Ho provato a svuotare semplicemente il div della dialog tramite empty() e a ricaricarne il contenuto con load...il risultato è sempre stato il medesimo, ossia: la prima volta il form funziona egregiamente, viene fatta 1 sola richiesta ajax. Quando però riapro la finestra ed eseguo l'operazione, vengono fatte ben 2 richieste ajax (difatti nel pannello di firebug vedo ben due chiamate al file ajax/news.php ). Non so se mi sono spiegato bene, è un problema abbastanza difficile da spiegare.