[AJAX] intégrer multiple onload

Version imprimable

bonjour, j'ai un problème sur le chargement de ma page.

je veux faire appel à plusieurs fonctions lors du chargement de ma page.
Seulement il n'y a qu'une seule fonction qui est chargée.

J'ai vu plusieurs solutions du style :

Code:

<body onload="fonction1(); fonction2();">

ou encore

Code:

<body onload="init();">

avec en javascript
Code:

1 2 3 4 5 function init() { fonction1(); fonction2(); }
ou encore
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function addEvent(obj_, event_, fct_) { if(obj_.addEventListener) { obj_.addEventListener(event_, fct_, true); } else if(obj_.attachEvent) { if(/this\./g.test(fct_.valueOf())){ obj_['on' + event_] = fct_; } else { obj_.attachEvent('on' + event_, fct_); } } } function startAll() { addEvent(window, "load", fonction1); addEvent(window, "load", fonction2); }
Rien de tout celà marche.
Est-ce que celà vient du fait que les fonctions que j'appelle vont faire appel à de l'ajax?

(ces fonctions me permettent d'afficher des listes déroulantes dynamiquement.)

Quelqu'un aurait-il une solution?
merci de votre aide.
(Désolé si je n'ai pas posté au bon endroit...)

08/09/2009, 15h37
DoubleU

Qu'est-ce que tu as fait, et qu'est-ce qui ne marche pas?

Car tout ce que tu as écrit me semble correct, l'erreur doit être ailleurs.

A l'heure actuelle, j'ai ça :

Sur ma page principale

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script type="text/javascript" src="js/recherche.js" charset="iso_8859-1"></script>
<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%" onload="startAll();" >
 
Puis dans mon formulaire, 
<tr>
                            <td><select name="servergrouplist" id="servergrouplist">
                                <option value="--">- - - Choisissez un groupe de serveurs - - -</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><select name="servicegrouplist" id="servicegrouplist">
                                <option value="--">- - - Choisissez un groupe de services - - -</option>
                                </select>
                            </td>
                        </tr>

Dans mon script recherche.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 function addEvent(obj_, event_, fct_) {
    if(obj_.addEventListener) {
        obj_.addEventListener(event_, fct_, true);    
    }
    else if(obj_.attachEvent) {
        if(/this\./g.test(fct_.valueOf())){
            obj_['on' + event_] = fct_;
        }
        else {
            obj_.attachEvent('on' + event_, fct_);
        }
    }
}
 
function startAll()
{
    addEvent(window, "load", getServerGroupList);
    addEvent(window, "load", getServiceGroupList);
 
(avec dans le code mes fonctions getServerGroupList et getServiceGroupList)
Si je prends les fonctions une à une. Cela fonctionne.
}

Si l'erreur n'est pas la dedans, je vais voir de revoir mes fonctions, mais pourquoi les fonctions marcheraient quand elles sont appelées indépendemment.

08/09/2009, 16h21
DoubleU
Code:

1 2 3 4 5 function startAll() { getServerGroupList() getServiceGroupList() }
Au moment ou startAll est exécutée, tu es déja dans ton evenement onload, donc c'est ici que tu dois exécuter tes fonctions.
08/09/2009, 16h36
Fabinounours
Citation:
Envoyé par DoubleU

Code:

1 2 3 4 5 function startAll() { getServerGroupList() getServiceGroupList() }

Au moment ou startAll est exécutée, tu es déja dans ton evenement onload, donc c'est ici que tu dois exécuter tes fonctions.
Ben... Je les appelles ici, ce n'est pas pareil ? (Désolé, je ne suis pas développeur. ah ah la bonne réponse de l'admin réseau...(ok je me tais))

Ici en fait, (sous IE, il ne m'affiche que le contenu du résultat de ma fonction
getServiceGroupList) pour le moment.
Sous firefox, il m'affiche dans toutes mes listes déroulantes le résultat du contenu de ma fonction getServiceGroupList.
08/09/2009, 16h42
DoubleU
Code:

addEvent(window, "load", getServerGroupList);

Quand tu écris ca, tu dis juste a l'interpréteur javascript d'exécuter la fonction getServerGroupList quand un evenement du type onload sera déclenché sur l'objet window. Or comme au moment ou tu exécutes ce code, tu es déja dans l'evenement onload de l'objet window, ben tes fonctions ne seront jamais exécutées.

Si tu mets juste ca:

Code:

<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%" onload="startAll();" >

et
Code:

1 2 3 4 5 function startAll() { getServerGroupList() getServiceGroupList() }
ca devrait marcher.

Citation:

Envoyé par DoubleU

Code:

addEvent(window, "load", getServerGroupList);

Quand tu écris ca, tu dis juste a l'interpréteur javascript d'exécuter la fonction getServerGroupList quand un evenement du type onload sera déclenché sur l'objet window. Or comme au moment ou tu exécutes ce code, tu es déja dans l'evenement onload de l'objet window, ben tes fonctions ne seront jamais exécutées.

Si tu mets juste ca:

Code:

<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%" onload="startAll();" >

Code:

1
2
3
4
5
function startAll()
{
   getServerGroupList()
   getServiceGroupList()
}

ca devrait marcher.

Merci pour l'explication :)

Mais c'est ce que je te disais dans mon message précédent :
Avec le dernier code que tu m'as passé,
J'ai le résultat de getServiceGroupList() qui s'affiche, mais pas celui de getServiceGroupList().

Le problème vient peut être de la façon dont j'ai codé les fonctions....

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
var requete = null;
/**
 * Fonction privée qui va créer un objet XHR.
 * Cette fonction initialisera la valeur dans la variable globale définie
 * ci-dessus.
 */
function creerRequete()
{
    try
    {
        /* On tente de créer un objet XmlHTTPRequest */
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
        /* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
            /* La première méthode a échoué, on en teste une seconde */
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
                /* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour ;) */
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
}
 
 
function getServerGroupList()
{
    /* À cet endroit précis, on peut faire apparaître un message d'attente */
    var messagebloc = document.getElementById('messagebloc');
    messagebloc.innerHTML = 'Traitement en cours, veuillez patienter...';
 
    /* On crée l'objet XHR */
    creerRequete();
 
    /* Définition du fichier de traitement */
    var url = 'fonctions.php?f=3';
 
    /* Envoi de la requête à la page de traitement */
    requete.open('GET', url, true);
 
    /* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
    requete.onreadystatechange = function()
    {
        /* Lorsque l'état est à 4 */
        if(requete.readyState == 4)
        {
            /* Si on a un statut à 200 */
            if(requete.status == 200)
            {
                /* Mise à jour de l'affichage, on appelle la fonction apropriée */
                var GrouplisteServers = requete.responseText;
                document.getElementById('servergrouplist').parentNode.innerHTML = '<select id="servergrouplist" id="servergrouplist"><option value="--">- - - Choisissez un groupe de serveurs - - -</option>' + GrouplisteServers + '</select>';
                messagebloc.innerHTML = ''; 
            }
        }
    };
 
    requete.send(null);
 
    messagebloc.innerHTML = ''; 
}

la variable var url = 'fonctions.php?f=3'; fait appel à un switch (d'ou le f=3) qui me récupère le contenu de la liste déroulante

C'est le même code pour l'autre fonction avec le nom des variables et des champs modifiés.

08/09/2009, 17h07
DoubleU

A mon avis, ton erreur se situe dans ta facon de créer ton objet xhr.

Tu déclares un objet global (var requete = null) qui va contenir ton objet xhr.

Tu l'initialises dans ton appel à getServerGroupList(). Jusque la tout va bien, la requete est lancée. Comme tes requetes sont asynchrones (requete.open('GET', url, true)), leur exécution va se passer dans un autre processus, c'est à dire que messagebloc.innerHTML = '' est exécuté juste apres requete.send(null).

Jusque la tout va bien, sauf que juste apres, tu appelles getServiceGroupList() qui va réinitialiser ton objet requete alors que celui ci est utilisé par ta requete précédente qui n'est toujours pas terminée. Du coup, problème.

Ce que tu devrais faire au lieu de déclarer ton objet requete globalement, c'est de le déclarer localement à la fonction creerRequete(), de façon à ce que chacune de tes fonction de création de liste possède sa propre instance.
08/09/2009, 21h40
Fabinounours

Citation:

Envoyé par DoubleU

A mon avis, ton erreur se situe dans ta facon de créer ton objet xhr.

Tu déclares un objet global (var requete = null) qui va contenir ton objet xhr.

Tu l'initialises dans ton appel à getServerGroupList(). Jusque la tout va bien, la requete est lancée. Comme tes requetes sont asynchrones (requete.open('GET', url, true)), leur exécution va se passer dans un autre processus, c'est à dire que messagebloc.innerHTML = '' est exécuté juste apres requete.send(null).

Jusque la tout va bien, sauf que juste apres, tu appelles getServiceGroupList() qui va réinitialiser ton objet requete alors que celui ci est utilisé par ta requete précédente qui n'est toujours pas terminée. Du coup, problème.

Ce que tu devrais faire au lieu de déclarer ton objet requete globalement, c'est de le déclarer localement à la fonction creerRequete(), de façon à ce que chacune de tes fonction de création de liste possède sa propre instance.

Si je déclare l'objet requête localement la valeur est indéfinie quand je l'appelle dans mes autres fonctions. (et donc une erreur est générée)

Code:

requete.open('GET', url, true)

; par exemple

Ben c'est sûr que si tu la transmets pas, ta variable ne va pas être accessible :roll:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function creerRequete()
{
    var requete;
    try
    {
        /* On tente de créer un objet XmlHTTPRequest */
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
        /* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
            /* La première méthode a échoué, on en teste une seconde */
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
                /* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour ;) */
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
    return requete;
}

09/09/2009, 08h57
Fabinounours

J'ai fait la modification, ça ne change rien...
J'ai toujours le même problème. :(

Bon...
Mon problème vient bien de ma fonction creerRequete().

J'ai essayé en créant une fonction creerRequete2().
Là ça fonctionne (mais qu'est-ce que c'est lourd coté code...)

Avec ce code, j'ai toujours un problème "variable requete indéfini"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function creerRequete()
{
    var requete;
    try
    {
        /* On tente de créer un objet XmlHTTPRequest */
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
        /* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
            /* La première méthode a échoué, on en teste une seconde */
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
                /* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour ;) */
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
    return requete; 
}

Pas d'idée? Ou de solution (mis à part créer 3 fois la fonction requête sous différents noms.

Merci pour votre aide.

10/09/2009, 15h42
Fabinounours

bon, j'ai trouvé une solution.
J'ai mis la variable requête en local dans créer requête

et dans mes autres fonctions, je fais un test pour voir si requête est null ou non.
Là, ça marche :)