Discussion :

[fayred]

Bonjour,
Comme je débute toujours en ajax, j'aurai encore une question... :
Comment faire pour recharger un div a partir d'un choix dans une liste déroulante? Je sais récupérer le choix fait par l'utilisateur mais c'est la ptite fonction du onchange qu'il me manque...
Il doit surement exister un truc du genre

Code :

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

1
2
 
reload(document.getElementbyID(div));

Mais je ne l'ai pas trouvé dans mes recherches.

Merci de votre aide!

[Jim_Nastiq]

ce tuto est tres claire sur les listes déroulantes liées

j'pense qu'avec ca t udevrais reussir non? si t'as des questions...

[mikaoul]

Salut,

tu peux utiliser INNERHTML

Pour rechercher ta div, tu peux faire:

Code :

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

document.getElementById(id de la div).innerHTML = ce que tu veux y mettre

[fayred]

Coucou, merci pour la doc!
Bon alors je l'ai épluché et voila ou j'en suis : losqu'on change la sélection dans la liste déroulante ça charge bien ma fonction javascript du onchange. Sauf que ça reste bloqué sur "chargement en cours" dans le div que je veux recharger.Elle n'arrive donc pas à recuperer les données je suppose.

Voici mes codes :

principal.php :

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
 
<div id="poleSouhaite">
				<form name="choixProcess" method="post" >								
						 <select name='Choixprocess' id='Choixprocess' tabindex='1' onChange="ajaxMajTab(this.value);">
							 <option value="vide">- - - Choisissez un process - - -</option>
							 <?php
                                                         selectProcess(); ?>
 
						</select>
				</form>							 
 
			</div>
 
				<div id="tabHoraires">
					/* On récupère l'identifiant du process choisi. */
$idProcess = isset($_GET['idProcess']) ? $_GET['idProcess'] : false; 
 
/* Si on a un process, on procède à la requête */
if(false !== $idProcess)
{
		//Code qui fonctionne
}
else
{	
          //blabla
}	
			?>
 
		</table>	
				</div>

Code javascript :

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
 
function ajaxMajTab(idProcess)
{
	if(idProcess == 'vide')
    {
        //document.getElementById('blocPole').innerHTML = '';
    }
    else
    {
        /* À cet endroit précis, on peut faire apparaître un message d'attente */
        var tableau = document.getElementById('tabHoraires');
        tableau.innerHTML = "Traitement en cours, veuillez patienter...";
        /* On crée l'objet XHR */
        creerRequete();
        /* Définition du fichier de traitement */
        var url = 'tabHorairesEssai.php?idProcess='+ idProcess;
        /* 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 */
                    actualiserTableau();
                }
            }
        };
        requete.send(null);
    }
 
}
 
function actualiserTableau()
{
	var tabHoraire = requete.responseText;
	var divTabHoraires = document.getElementById('tabHoraires');
	divTabHoraires.innerHTML = tabHoraire ;
}

Et mon div reste donc bloqué avec ça à l'intérieur :

Code :

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

1
2
 
tableau.innerHTML = "Traitement en cours, veuillez patienter...";

Merci beaucoup !

[mikaoul]

Je pense que ton problème vient du fait que la variable "requete" dans ton code javascript est une variable internet à la fonction "ajaxMajTab" et donc dans la fonction "actualiserTableau()" elle est null.

Tu devrais essayer de faire le responseText et le reste directement dans la fonction "ajaxMajTab" à la place de l'appel à "actualiserTableau()"

[fayred]

Re!
J'ai fait ce que tu as dit mais ça n'a rien changé (ou peut etre que si mais ya toujours un problème ).
A coup de .innerHTML je sais ou ça ne va pas : requete.status n'est jamais == à 200. Pourquoi?
ça ça reste un mystere...

En tout cas merci de votre aide !

[mikaoul]

Essai de mettre un else après le if(==200) et d'afficher (une alerter par exemple) la valeur retourné.

Que fais-tu dans ton fichier "tabHorairesEssai" ?

[fayred]

Ah ben j'ai peut etre trouvé pourquoi!
En fait je travaille en local et sur un forum j'ai trouvé qu'on ne pouvait atteindre status==200 donc j'ai viré la condition (oui je sais c'est un peu barbare mais bon). Alors je saisi pas totalement pourquoi mais bon ça marche quasiment bien!!

Merci encore et bon week end.

[mikaoul]

Bizarre, moi aussi je suis en local et j'ai la condition

Code :

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

if(xhr.readyState == 4 && xhr.status == 200)

qui fonctionne très bien.

Bon week-end