[AJAX] Charger des pages en Ajax

Version imprimable

04/09/2007, 21h25
persia

[AJAX] Charger des pages en Ajax

Salut
04/09/2007, 23h57
Anthony.Desvernois

Question 1 : pourquoi deux fonction getXhr ?
Question 2 : quand tu dit que cela ne marche pas, c'est à dit, est ce que l'objet Xhr est crée sous IE ?

Sinon, remet les '' autour du nom de l'ID.
Tu as oublié les balises codes autour du code php :)
05/09/2007, 01h20
persia

Citation:

Envoyé par Anthony.Desvernois

Question 1 : pourquoi deux fonction getXhr ?

Parce qu'avec une fonction Xhr ca ne fonctionne pas.

Citation:

Envoyé par Anthony.Desvernois

Question 2 : quand tu dit que cela ne marche pas, c'est à dit, est ce que l'objet Xhr est crée sous IE ?

Oui il est crée, puisque lorsque je met juste un menu. c-a-d juste un seul Xhr, ca fonctionne bien, mais dés que je met 2 menus (2 xhr )ca ne fonctionne plus, mais avec firefox ca fonctionne très bien

Citation:

Envoyé par Anthony.Desvernois

Sinon, remet les '' autour du nom de l'ID.

C'est ca que j'avais fait au début, mais ca ne fonctionne toujours pas.

Citation:

Envoyé par Anthony.Desvernois

Tu as oublié les balises codes autour du code php :)

Ca n'a pas d'importance pour l'instant car c'est pas là le problème ;)

Citation:

Envoyé par persia

Parce qu'avec une fonction Xhr ca ne fonctionne pas.

dans ce cas il y a un problème dans ton code ;)
Voila ma fonction Xhr (qui ne gère pas les cas navigateurs trop pourri) :
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 function getXhr() { var xhr; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xhr = new XMLHttpRequest(); } return xhr; } // pour l'utiliser ... var Xhr; Xhr = getXhr(); ... // evidement tu l'utilise dans une fonction hein ;) // sinon var Xhr2; Xhr2 = getXhr();
L'intérêt d'une fonction, c'est de pouvoir la réutiliser ;)

Citation:

Oui il est crée, puisque lorsque je met juste un menu. c-a-d juste un seul Xhr, ca fonctionne bien, mais dés que je met 2 menus (2 xhr )ca ne fonctionne plus, mais avec firefox ca fonctionne très bien

alors peut-être touche-t-on au but ? :)

Citation:

C'est ca que j'avais fait au début, mais ca ne fonctionne toujours pas.

C'est pas grave, remets, ce seras une erreur de moins ;)

Citation:

Ca n'a pas d'importance pour l'instant car c'est pas là le problème ;)

Cela en a, cela diminue la lisibilité de ton post, et c'est dans les règles du forum. Et c'est

Code:

[ code ] [ /code ] (sans les espaces)

05/09/2007, 21h19
persia

Salut,

J'ai allégé mon code en suivant tes suggestions, mais le problème persiste toujours avec Internet Explorer, mais ca fonctionne bien sous Firefox et même
sous les autres navigateurs (Safari, Opera).

En fait, dés que je charge ma page pour la première fois sous IE, mes deux menus dans ma page s'affiche correctement, mais dés que je charge ma page pour une deuxième fois, mes menus disparaissent, et je trouve ca très étrange. Maudit Internet Explorer lol.

Voici le nouveau code :

J'ai rien changé pour les autres pages: "page1.php" et "page2.php"

J'ai ajouté la balise [/CODE] :D , il manquait le "\"
05/09/2007, 21h27
Anthony.Desvernois

Citation:

Envoyé par persia

En fait, dés que je charge ma page pour la première fois sous IE, mes deux menus dans ma page s'affiche correctement, mais dés que je charge ma page pour une deuxième fois, mes menus disparaissent, et je trouve ca très étrange.

dès que je charge ma page une deuxième fois ? Je ne comprends pas trop ce que tu entends par "charge ma page" une deuxième fois ?

Sinon tu peux mettre ton appel de fonction dans le bloc script du début (pas de soucis). Tes deux fonctions se ressemblent, en modifiant le code php (et le JS évidemment) tu peux simplifier en ayant une fonction seulement.

Sinon

Code:

document.getElementById('num2').innerHTML=xhr2.responseText;

ne rempliras pas

Code:

<div id="menu2"></div>

Par contre :

Code:

document.getElementById('menu2').innerHTML=xhr2.responseText;

marcheras mieux.
05/09/2007, 22h36
persia

[QUOTE=Anthony.Desvernois;2471375]dès que je charge ma page une deuxième fois ? Je ne comprends pas trop ce que tu entends par "charge ma page" une deuxième fois ?

[/CODE]

Ce que je veux dire, c'est lorsque je clique par exemple sur un lien de ma page
et je reviens à ma page d'accueil (là ou sont mes menus), les menus disparaissent
05/09/2007, 22h40
Anthony.Desvernois

Tes menus sont uniquement sur la page d'accueil ?
En fait ce serait plus clair si tu avais une version en ligne ?
10/09/2007, 04h05
persia

Citation:

Envoyé par Anthony.Desvernois

En fait ce serait plus clair si tu avais une version en ligne ?

Voilà

http://www.photos.dyndns.info/test/accueil.php

Si tu le test sous firefox ca va fonctionner même si tu fait un refresh de la page, mais si tu le test sous IE, dés que tu fait un premier refresh de la page tu verra que le contenu de la page disparait

Salut, j'ai essayé tes sources chez moi et je suis surpris que cela fonctionne avec firefox pour toi. La partie qui me pose problème est la suivante :

Code:

1
2
3
4
5
6
7
8
9
10
 
<body>
<script type="text/javaScript">
menu1(1)</script>
<div id="menu1"></div>
 
<script type="text/javaScript">
menu2(1)</script>
<div id="menu2"></div>
</body>

Pour moi (et mon browser), les deux div devraient être placés avant l'appel de menu1 et menu, soit un truc du genre :

Code:

1
2
3
4
5
6
7
8
 
<body>
<div id="menu1"></div>
<script type="text/javascript">menu1( 1 );</script>
 
<div id="menu2"></div>
<script type="text/javascript">menu2( 1 );</script>
</body>

Je m'explique : lorsque la page s'affiche et que les appels se font (menu1(1) et menu2(1)), firefox ne trouve pas les éléments d'id menu1 et menu2, car ceux-ci dans ton cas sont placés après l'appel de ces fonctions. Peut être que c'est uniquement chez moi, mais tu peux toujours essayer cette modif.

Bon sinon pour éviter d'avoir 2 fonctions, tu peux n'en faire qu'une avec à la limite un paramètre en plus qui est le numéro de la page, comme par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function menu( page, num )
{
        var xhr = getXhr();
 
        xhr.onreadystatechange = function()
        {
                if( xhr.readyState == 4 && xhr.status == 200 )
                        document.getElementById( 'menu'+page ).innerHTML = xhr.responseText;
        }
        xhr.open( "GET", "page"+page+".php?num="+num, true );
        xhr.send( null );
}

et tes deux pages un peu modifiées elles aussi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<?php
// Page 1
if( isset($_GET['num']) )
{
        echo '<a href="#" onClick="menu( 1, 1 )">Lien 1</a>';
        echo ' <a href="#" onClick="menu( 1, 2 )">Lien 2</a>';
 
        switch( $_GET['num'] )
        {
                case '1' :
                        echo ' Contenu 1 de la page 1';
                break;
                case '2' :
                        echo ' Contenu 2 de la page 1';
                break;
                default :
                        echo '';
        }
}
?>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<?php
// Page 2
if( isset($_GET['num']) )
{
        echo '<a href="#" onClick="menu( 2, 1 )">Lien 1</a>';
        echo ' <a href="#" onClick="menu( 2, 2 )">Lien 2</a>';
 
        switch( $_GET['num'] )
        {
                case '1' :
                        echo ' Contenu 1 de la page 2';
                break;
                case '2' :
                        echo ' Contenu 2 de la page 2';
                break;
                default :
                        echo '';
        }
}
?>

Tu peux les essayer ils doivent fonctionner, mais je ne sais pas si c'est le résultat que tu attends, car le site vers ta version en ligne ne fonctionne pas (probablement que ton pc est éteint).

10/09/2007, 15h43
persia

Citation:

Envoyé par goulmak

car le site vers ta version en ligne ne fonctionne pas (probablement que ton pc est éteint).

Oui en effet, le site était non joignable à cause d'une perte de connection que j'ai eu durant la journée.

Tu peux toujours essayer mon lien, la connection à l'aire fonctionnel pour le moment :) quoique elle est rendu instable ces temps-ci.

Je vais essayer tes modifs, merci

Citation:

Envoyé par goulmak

Code:

1
2
3
4
5
6
7
8
 
<body>
<div id="menu1"></div>
<script type="text/javascript">menu1( 1 );</script>
 
<div id="menu2"></div>
<script type="text/javascript">menu2( 1 );</script>
</body>

Merci, ca fonctionne maintenant