Funzione "pagina completata" AJAX? Lo sto facendo bene?

3

Questo potrebbe farmi macellare, poiché sono abbastanza sicuro che sia una cattiva pratica di codifica, quindi ecco qui:

Ho un sito guidato da AJAX che carica sia contenuto che javascript in una volta sola usando Mootools ' Request.HTML .

Poiché ho degli script di inizializzazione che devono essere eseguiti per completare "l'impostazione" del modello, includo quelli in una funzione chiamata pageComplete() , su ogni pagina

Se si visita una pagina in un'altra, la precedente funzione pageComplete() non viene più applicata, poiché ne viene definita una nuova.

La funzione javascript che carica le pagine chiama dinamicamente pageComplete() alla cieca quando la chiamata AJAX è completata e viene caricata nella pagina:

function loadPage(page, params) {
    // page is a string, params is a javascript object
    if (pageRequest && pageRequest.isRunning) pageRequest.cancel();
    pageRequest = new Request.HTML({
        url: '<?=APPLICATION_LINK?>' + page,
        evalScripts: true,
        onSuccess: function(tree, elements, html) {
            // Empty previous content and insert new content
            $('content').empty();
            $('content').innerHTML = html;
            pageComplete();
            pageRequest = null;
        }
    }).send('params='+JSON.encode(params));
}

Quindi sì, se pageComplete() non è definito in una delle pagine, viene chiamato il vecchio pageComplete() , che potrebbe essere potenzialmente disastroso, ma al momento ogni singola pagina ha pageComplete() definito, anche se è vuoto.

Buona idea, cattiva idea?

    
posta Julian H. Lam 14.10.2011 - 15:55
fonte

3 risposte

1

Potresti inserire una riga come

pageComplete=function(){};

da qualche parte nel codice per assicurarsi che la vecchia funzione non venga chiamata per la nuova pagina. I posti possibili potrebbero essere:

  • Prima riga di loadPage

  • Prima riga di onSuccess

  • dopo la chiamata pageComplete();

Detto questo, ha ancora un odore.

    
risposta data 11.05.2012 - 20:24
fonte
0

È necessario un modo per loadPage() per sapere quando l'utente ha intrapreso qualche azione che dovrebbe effettivamente annullare il caricamento della prima pagina. Ad esempio, se fanno clic su un pulsante "pagina 1" e chiami loadPage() e fanno clic su "pagina 2" mentre le risorse remote stanno ancora caricando, loadPage() deve sapere che ciò si è verificato.

Un modo semplice per farlo sarebbe quello di controllare il gestore onsuccess se una variabile globale pageName ha ancora lo stesso valore di quando è stata attivata la richiesta, o forse Mootools offre un modo per annullare qualsiasi in sospeso richieste http che puoi invocare quando cambi le pagine.

    
risposta data 14.10.2011 - 16:32
fonte
0

Non vedo alcuno scopo per pageComplete() nel tuo esempio. Hai già evalScripts impostato su true.

  • Dubito che questo concetto possa funzionare anche perché è improbabile che il browser abbia analizzato html e inserito il nuovo codice HTML dalla riga successiva, dove viene chiamato pageComplete() .
  • Sia Prototype che (sono abbastanza sicuro) jQuery hanno una chiamata AJAX alternativa che fa .innerHTML = html per te. Sarei molto sorpreso se mootools non lo facesse.

Considera questo modello, che assomiglia a qualcosa di simile a ciò che html conterrebbe:

<div id='content1'>Stuff is here</div>
<script type='text/javascript'>
   function pageComplete() {
      console.log('foo');
   }
</script>

Rilascia la definizione della funzione e non chiamare pageComplete() . Questo dovrebbe funzionare molto meglio:

<div id='content1'>Stuff is here</div>
<script type='text/javascript'>
   console.log('foo');
</script>

evalScripts dovrebbe eseguire quel javascript dopo il caricamento di AJAX, senza che tu debba giocherellare con la ridefinizione di qualsiasi funzione.

    
risposta data 11.05.2012 - 20:43
fonte

Leggi altre domande sui tag