[AJAX] intégrer multiple onload

**Fabinounours** · 08/09/2009, 15h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="init();">

avec en javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function init()
{
    fonction1();
    fonction2();
}

ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...)

**DoubleU** · 08/09/2009, 15h37

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.

**Fabinounours** · 08/09/2009, 15h50

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

Sur ma page principale

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**DoubleU** · 08/09/2009, 16h21

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Fabinounours** · 08/09/2009, 16h36

Envoyé par DoubleU

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**DoubleU** · 08/09/2009, 16h42

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ca devrait marcher.

**Fabinounours** · 08/09/2009, 16h50

Envoyé par DoubleU

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**DoubleU** · 08/09/2009, 17h07

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.

**Fabinounours** · 08/09/2009, 21h40

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

; par exemple

**Bovino** · 09/09/2009, 06h56

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**Fabinounours** · 09/09/2009, 08h57

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

**Fabinounours** · 09/09/2009, 17h19

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Fabinounours** · 10/09/2009, 15h42

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

[AJAX] intégrer multiple onload

AJAX

Discussions similaires

Partager

Partager