Doppia chiamata ad una stessa funzione

**El Merendero** · 16-08-2015, 22:40

Salve,
in una pagina devo fare una doppia chiamata ad una stessa funzione javascript (con però argomenti diversi). La chiamata deve essere fatta al caricamento della pagina (si tratta di una funzione per la gestione di porzioni AJAX), per cui niente onclick. Sto provando ad usare una cosa del genere:

codice:

<head>

...

<script>

function ajax(id, url) {
    if (window.XMLHttpRequest)
        xmlhttp = new XMLHttpRequest();
        
    else
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    
    xmlhttp.onreadystatechange = function() 
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            document.getElementById(id).innerHTML = xmlhttp.responseText;
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();    
}

</script>

...

</head>

<body>

...

<script type="text/javascript">ajax("A","B");</script>
<div id="A"></div>

...

<script type="text/javascript">ajax("C","D");</script>
<div id="C"></div>

...

</body>

Il problema è che solo l'ultima chiamata funziona. Ho provato a fare un po' di tutto ma alle volte il comportamento sembra essere del tutto imprevedibile. Avete suggerimenti per dirmi cosa sto sbagliando?

**badaze** · 16-08-2015, 22:56

Prova a mettere il richiamo dopo della dichiarazione dei div. Adesso quando esegui la prima volta il div id="A" non è ancora creato.

**El Merendero** · 16-08-2015, 23:10

Ho appena provato ma non funziona purtroppo. Ho anche provato a vedere cosa succede mettendo

codice:

<script type="text/javascript">ajax("A","B");</script>
<div id="A"></div>

al posto di

codice:

<script type="text/javascript">ajax("C","D");</script>
<div id="C"></div>

e viceversa ma ha un comportamento anomalo (in C compare quello che doveva comparire in A). Non vorrei ci fosse qualche problema con la definizione della funzione.

**KillerWorm** · 17-08-2015, 00:24

Ciao, è corretto ciò che ti ha indicato badaze ma probabilmente non si è afferrato bene il concetto principale.

Cerco di chiarire.

Gli elementi del DOM (cioè i tuoi div, così come tutto il resto della pagina) vengono creati, e sono quindi manipolabili via script, man mano che la pagina si carica. Tali elementi sono creati nell'ordine in cui sono scritti. Devi assicurarti, quindi, che gli elementi interpellati nello script, siano stati creati e siano quindi disponibili.

Ora prendiamo questa parte:

codice:

<script type="text/javascript">ajax("A","B");</script>
<div id="A"></div>

Quando chiami la tua funzione ajax(), al cui interno usi getElementById() per riferirti al div A, è prevedibile che tale div non sia ancora presente nel DOM perché è posto dopo il richiamo della funzione stessa.

Devi quindi richiamare la funzione dopo che il div è creato.

Puoi fare in diversi modi. Puoi ad esempio usare un evento onload per lanciare il tuo script quando tutta la pagina è caricata, ma in questo caso la cosa più semplice è spostare il tag script dopo il div (come indicato da badaze):

codice:

<div id="A"></div>
<script type="text/javascript">ajax("A","B");</script>

Questo è il concetto principale e da qui non si sfugge.

Detto questo c'è comunque da considerare che getElementById() viene richiamato dall'evento di risposta Ajax (onreadystatechange). Tale evento (essendo "asincrono" per definizione) normalmente NON viene eseguito all'istante, ma si verificherà (a grandi linee) dopo la risposta del server.
In tal caso è anche possibile che la pagina abbia continuato a caricarsi e che il div in questione sia stato creato e sia disponibile, ma questo non deve comunque essere un pretesto per "eludere" il concetto menzionato sopra. Infatti potrebbe anche essere che, per una questione di cache o per qualsiasi altro motivo, l'evento di risposta Ajax si verifichi prima che siano effettivamente creati gli elementi da manipolare via script, dando quindi dei risultati imprevedibili.

Ora, sei sicuro di aver fatto quanto ti è stato indicato?
Incontri ancora problemi?

EDIT:
un altro grande errore che ho visto solo ora.
Quando dichiari la variabile xmlhttp, dovrebbe essere una variabile locale (cioè visibile solo dentro la funzione), mentre invece è una variabile globale, per cui l'oggetto Ajax che gli stai attribuendo, viene sovrascritto con quello creato nelle successive chiamate della stessa funzione.
Per definire variabili locali devi usare var:

codice:

function ajax(id, url) {
   var xmlhttp;
    if (window.XMLHttpRequest)
        xmlhttp = new XMLHttpRequest();
        
    else
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

Per tale motivo riscontri il problema che hai indicato:

in C compare quello che doveva comparire in A)

**El Merendero** · 17-08-2015, 11:26

ommiodio, siete stati gentilissimi.
Ora sembra funzionare tutto alla perfezione. Se ci fossero altri problemi mi farò ovviamente risentire

Discussione: Doppia chiamata ad una stessa funzione

Strumenti discussione

Ricerca discussione

Visualizza

Doppia chiamata ad una stessa funzione

Permessi di invio