[AJAX] Rechargement de div

Version imprimable

20/07/2007, 11h29
fayred

[AJAX] Rechargement de div
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:

1 2 reload(document.getElementbyID(div));
Mais je ne l'ai pas trouvé dans mes recherches.

Merci de votre aide!
20/07/2007, 11h42
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...
20/07/2007, 13h23
mikaoul

Salut,

tu peux utiliser INNERHTML

Pour rechercher ta div, tu peux faire:

Code:

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

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:

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:

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:

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

Merci beaucoup !

20/07/2007, 15h12
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()"
20/07/2007, 15h28
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 :lol: ).
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 !
20/07/2007, 15h41
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" ?
20/07/2007, 16h04
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.
20/07/2007, 16h09
mikaoul

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

Code:

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

qui fonctionne très bien.

Bon week-end