Problema Jquery UI Dialog

spyker

Nuovo Utente
22 Mag 2013
1
0
0
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:

Codice:
// 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:

Codice:
// 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
Codice:
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
T problema con select dinamica con jquery Javascript 0
L Problema jQuery validation AJAX (PHP 7) PHP 6
X Problema con jquery e ajax jQuery 2
F [Javascript] Problema funzione jquery con elementi css esterni Javascript 1
P immagine responsive problema con script jquery jQuery 0
B Problema di visualizzazione di uno Slider in jquery jQuery 4
L Problema phpmailer,jquery e smtp PHP 1
I problema con swipetouch in jquery Sviluppo app per iOS 0
V Problema con tabella jQuery jQuery 9
M Problema load jquery jQuery 1
D Problema con jQuery.timeago() jQuery 2
R Problema con slider jQuery HTML e CSS 1
F Problema Jquery.load() e tweenLite.to() con Chorme Javascript 0
L problema jquery easyui window jQuery 4
S Gallery con Tag foto: problema doppia chiamata ajax con JQuery jQuery 2
J problema jquery add/removeclass jQuery 1
Emix Problema nel concatenare jquery ed ajax nella stessa pagina Javascript 15
E [Menu JQuery]: problema click quando il sottomenu si apre sopra un iframe... jQuery 0
Antonio De Grezia Problema jquery con chrome!! :( Javascript 3
S Autocompletamente con jQuery, PHP e MySQL - Problema con le query PHP 7
P Problema caricamento/sostituzione immagini galleria php-jquery jQuery 2
S Problema con toggle jquery jQuery 1
P problema validazione form con ajax e jquery Ajax 0
A galleria jquery: problema nel caricamento di una immagine da un'anteprima HTML e CSS 10
T Problema con Jquery ajax jQuery 4
E Problema con jquery-1.7.2.min jQuery 3
D Problema nella validazione di un form con JQUERY ed AjAX jQuery 4
M Problema .load JQuery jQuery 1
F Problema select dinamiche con php e jquery jQuery 1
L problema richiesta asincrona con jquery jQuery 1
A problema con jquery.nivo.slider.js Javascript 0
novello88 Problema con jQuery: $ is not defined jQuery 1
M problema "Ordine del carico jquery librerie deve essere cambiato" jQuery 0
P problema jQuery/ajax Ajax 4
F Problema variabile in uno script jquery jQuery 2
G problema con plugin validazione form jquery jQuery 0
emanuelevt piccolo problema jquery jQuery 4
G problema caricamento effetti jquery jQuery 0
S problema con div a scomparsa jquery jQuery 0
M problema con select jquery e php PHP 0
R Problema posizionamento menu orizzontale in jquery HTML e CSS 11
B problema slider jquery in iframe jQuery 3
B problema slider jquery jQuery 0
E Problema pulizia codice jquery jQuery 0
C problema seo + cerco esperto SEO e Posizionamento 1
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8

Discussioni simili