Lancer plusieurs fonctions JavaScript sur même evenement

Version imprimable

j'utilise actuellement AJAX afin de mettre à jour une case d'un tableau après avoir sélectionné un choix dans un menu déroulant.
Je voudrais encore le faire pour une autre case lorsque cette même liste déroulante change. Voici mon code avant le changement:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id='selectSerie'> <select name="selectSerie" class="MDNomSerie" id="selectSerie2" onchange='GetListeNumSeries()'> <option value="" selected></option> <?php if (!isset($flag)){ $res1 = mysql_query("SELECT DISTINCT nomSerie FROM seriedeprix WHERE ID_Entreprise = '".$row_SelectEntAuto['ID_Entreprise']."'"); while($row1 = mysql_fetch_assoc($res1)){ echo "<option value='".$row1["nomSerie"]."'>".$row1["nomSerie"]."</option>"; $flag=1; } }?> </select> </div>
Maintenant pour que les deux cases changent sur le même evenement, j'ai essayé ça:

<select name="selectSerie" class="MDNomSerie" id="selectSerie2" onchange='GetLibelle1();GetListeNumSeries()'>

Mais malheureusement ça ne marche pas, seule GetListeNumSeries() est pris en compte!
(bien sûr j'ai testé GetLibelle1 tout seul et ça fonctionne bien.
Merci de votre aide :)

20/05/2006, 16h34
Kerod

Ca dit pas grand chose...

Pourrais tu mettre le par exemple le code des fonctions ainsi que le code du tableau pour voir s'il y a bien les appels des bons td

Sinon les fonctions font appel à la bdd ?
As tu essayé de mettre un delai entre les 2 fonctions histoire de voir s'il y a pas de problème sur le temps d'execution ou autre ??

Les fonctions JS:

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
var xhr = null; 
 
            function getXhr(){
                if(window.XMLHttpRequest) // Firefox et autres
                   xhr = new XMLHttpRequest(); 
                else if(window.ActiveXObject){ // Internet Explorer 
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur 
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                   xhr = false; 
                } 
            }
 
 
function GetListeNumSeries(){
                getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect1 = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('selectNumSerie').innerHTML = leselect1;
                    }
                }
 
                xhr.open("POST","AjaxNumSerie.php",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
                sel2 = document.getElementById('selectEntreprise');
                entreprise = sel2.options[sel2.selectedIndex].value;
 
                sel3 = document.getElementById('selectSerie2');
                serie = sel3.options[sel3.selectedIndex].value;
 
                xhr.send("serie="+serie+"&entreprise="+entreprise);
            }
 
            function GetLibelle1(){
                getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('Libelle1').innerHTML = leselect;
                    }
                }
 
                xhr.open("POST","AjaxLibelle1.php",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
                sel = document.getElementById('selectSerie2');
                serie = sel.options[sel.selectedIndex].value;
                alert(serie);
                xhr.send("serie="+serie);
            }

Et les balises :

Code:

1
2
3
4
 
<td class="caseSerieNum" id="selectNumSerie" rowspan="2">test</td>
.....
<td class="caseTitreBordureH" id="Libelle1" colspan="5">&nbsp;</td>

Le fichier AjaxLibelle1.php:

Code:

1
2
3
4
5
6
7
8
9
10
 
 
<?php
echo '<td class="caseTitreBordureH" id="Libelle1" colspan="5">';
/*if (($_POST['serie']) != "Travaux de terrassements pour branchements")
{*/
    echo "Etude et gestion de dossier";
//}
echo '</td>';
?>

Le fichier AjaxNumSerie.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<?php
// Connection à la base de données
$hostname_serveur="";
$database_serveur = "***";
$username_serveur = "***";
$password_serveur = "***";
$serveur = mysql_pconnect($hostname_serveur, $username_serveur, $password_serveur) or trigger_error(mysql_error(),E_USER_ERROR); 
mysql_select_db($database_serveur, $serveur);
 
    echo "<td class='caseSerieNum' name='selectNumSerie' id='selectNumSerie' rowspan='2'>";
    if(isset($_POST["serie"])){
 
        $res2 = mysql_query("SELECT serie FROM seriedeprix WHERE ID_Entreprise = '".$_POST["entreprise"]."' AND nomSerie = '".$_POST["serie"]."'");
        $row2 = mysql_fetch_assoc($res2);
        echo $row2['serie'];
    }
 
    echo "</td>";
?>

Sinon je n'ai pas essayé de temporiser je ne sais même pas comment faire :p

21/05/2006, 13h32
Kerod

Pour temporiser essaye avec

Code:

setTimeOut(GetListeNumSeries(),3000);

3000 = 3sec il me semble:roll:
21/05/2006, 17h37
davinout

Très bien merci je vais essayer ca :)
22/05/2006, 19h00
davinout

Oui donc la fonction est:

setTimeout("GetListeNumSeries();",3000);

Sinon ça marche maintenant mais ça me pose un petit problème tout de même!

J ai environ 40 listes déroulantes et quelques autres champs à remplir à l aide d AJAX. J'ai mis un timer de 100, c'est à dire un dixième de seconde, mais ça prend beaucoup de temps, on peut même suivre la mise à jour des listes en direct...
Et le timer de 100 est quelquefois trop court, car certaines de mes listes sont sautées (peut être dû à un lag serveur) et donc ne se remplissent pas.
Y a t'il une fonction qui permettrait de lancer la suivante tant que celle en cours n'est pas terminée?
23/05/2006, 15h49
Thauglor

je vais surement dire une connerie plus grosse que moi, mais pourquoi tu n'appelle pas une fonction a ton evenement qui va elle appele toutes les fonctions dont tu as besoin une par une, orddonnancé comme tu veu et avec els tempo que tu veu...
23/05/2006, 18h05
davinout

Le problème est que si je les lance comme cela:

Fonction1();
Fonction2();
etc...

Ben les fonctions ne sont pas toutes parcourues. Les fonctions se lancent toutes mais ne se terminent pas (à cause du xhr.send je pense)

Je pense qu'il doit exister quelquechose qui contrôle la fin de l'exécution d'une fonction, mais je ne la trouve pas :/

J'ai essayé avec des return, mais sans succès, dès qu'il rentre dans le return il doit arrêter l'execution de xhr.send et donc ma requête n'a pas le tps de s'exécuter!
24/05/2006, 16h43
davinout

Bon et bien j'ai trouvé comment m'y prendre, au lieu de faire un send() pour chaque liste déroulante, je fais un send pour toute ma table qui contient mes listes déroulantes, ça va me demander un peu de temps en plus mais au moins il n'y aura plus de problème de lenteur de chargement ou d'oubli de listes :)
23/07/2010, 17h37
momo10

Salut davinout, tu as placé ou ta fonction "setTimeout" sur ton code ci dessous pour que ça marche, j'ai le même souci que toi et je n'arrive pas à résoudre mon problème à l'aide de cette fonction.

Merci par avance