Come impedire che una modale venga disegnata più di una volta?

Question

Questo è un po 'più astratto delle solite domande che conosco va contro lo spirito delle cose, ma spero che possa ancora ottenere una buona risposta.

Ecco il problema. Abbiamo un'applicazione web abbastanza complessa scritta in PHP. Lo scopo è relativamente insignificante, ma in poche parole: stiamo utilizzando Comet/AJAX/JSON/JavaScript/PHP/MySQL (NESSUN jQuery, tuttavia, solo JavaScript nativo) per eseguire il rendering di controlli che visualizzano i dati in tempo reale. In questa applicazione stiamo eseguendo il rendering delle modalità popup usando lo nativo JavaScript. È una logica abbastanza complessa che verifica l'esistenza di una modale con lo stesso nome sulla pagina e impedisce di creare nuove versioni della stessa e, naturalmente, una volta creato un livello viene creato per impedire l'interazione con i collegamenti sottostanti.

Il problema è che abbiamo almeno un modal che può essere chiamato più volte prima che venga reso sulla pagina a causa del tempo richiesto dalla chiamata AJAX per raccogliere dati dal database e assemblarlo per la presentazione. Se un utente dovesse "fare doppio clic" su detto link, verrebbe presentato con due modali, uno sopra l'altro. Sono stato in grado di renderizzare effettivamente 8-10 di questi. Interagire con il modale più in alto sembra essere interrotto perché l'utente sta effettivamente effettuando intestazioni comprimibili nella modale più in basso. Una volta che inizi a chiudere le finestre di dialogo e vai in fondo puoi vedere dove hai fatto clic.

Quindi, il mio problema è questo: qual è il modo migliore per prevenire questo comportamento?

Ho considerato semplicemente l'aggiunta di una funzione all'evento onClick che rimuoverebbe l'attributo onClick dal collegamento dopo il primo clic con un timeout minore (ad esempio 500ms). Ho anche preso in considerazione l'idea di implementare una logica di test di bit che contasse i clic e in realtà solo prima l'evento dopo il primo clic e reimpostato quando la modale è chiusa.

Quello che mi chiedo è se qualcuno ha qualche idea o suggerimento o addirittura ha affrontato un problema simile e ha alcune informazioni sulle migliori pratiche per raggiungere il mio obiettivo in questa istanza.

Grazie mille.

Answer 1

In questo caso, ho trovato la soluzione più semplice per essere la migliore, ma mi piacerebbe comunque sentire altri feedback se è là fuori.

In questo caso ho trovato che l'ordine delle operazioni era il problema. Stavo aspettando la risposta AJAX per generare il corpo html per questa modale. Ho cambiato l'ordine per creare invece il modale immediatamente usando <p>Loading...</p> all'interno del corpo del modale. Poi, quando l'AJAX è stato completato e ho avuto il mio nuovo corpo di testo, l'ho appena inserito nell'area del contenuto del modale con un pezzetto di codice e Bob's your Uncle, avevamo il jackpot.

Answer 2

È possibile annullare la registrazione del gestore di clic una volta sparò:

var element = ..., 
myClickHandler = function(event) { 
    // ... 
    element.removeEventListener('click', myClickHandler, false); 
    // ... 
} 

element.addEventListener('click', myClickHandler, false);