Discussion :

[manu_css]

Bonjour,

J'utilise ajax pour afficher une image en grand dans un paragraphe lors du clic sur une vignette

Les états obtenus avec readyState passent de 1 à 4 et lorsque le statut est 4, je remplace l'image. Le problème, c'est que onreadystatechange détecte un changement, readyState repasse à 1 (je ne sais pas pourquoi ?) et l'image de départ est réaffichée. C'est comme s'il n'y avait eu finallement aucun changement dans la page.

Le site n'est pas en ligne.

**************************************

Voici les fonctions javascript que j'utilise :

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
 
function getXhr()
{
    if(window.XMLHttpRequest) {xhr = new XMLHttpRequest();}
    else if(window.ActiveXObject)
    {
        try 
        { xhr = new ActiveXObject("Msxml2.XMLHTTP"); }
        catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
    }
    else
    {
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, veuillez le mettre à jour");
        xhr = false; }
}
 
 
function changerPhoto1(idPhoto)
{
    getXhr();
 
   xhr.onreadystatechange = function()
                             {
 
                                if(xhr.readyState == 4 && xhr.status == 200)
                                { // Nous remplacons le contenu du p#photo par le retour de "ajax/ax_nouvellePhoto.php" 
                                    document.getElementById('photo').innerHTML = xhr.responseText;
 
                                }
 
                             }
 
    xhr.open("POST",'ajax/ax_nouvellePhoto.php',true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send("id_img="+idPhoto); //ce qui est envoyé par POST
 
}

*****************************************
Voici le code de la page ax_nouvellePhoto.php

Code :

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

1
2
 
echo 'coucou';

Mon problème est donc :
Pourquoi l'état readyState change après avoir été 4 ? Du coup, ONreadyStateChange est appelée,et c'est pour cela que l'image n'est plus remplacée.

Merci de m'aider car je ne vois vraiment pas pourquoi ça fait ça. J'ai même essayé d'autres scripts qui m'ont donnés la même chose .

Remarque : j'utilise firefox avec la barre web développeur. Lorsque j'ai testé sur IE, bizarrement je retourne à la page initiale (sans aucune modif)

Merci

[Bovino]

Tu interprètes mal ce que tu vois je pense...
Même si le readystate repassait à 1, il ne se passerait rien puisqu'aucun traitement ne lui est associé... En revanche, ton Ajax est-il déclenché sur le click d'un lien ou d'un submit ? Auquel cas, la page est susceptible de se rechargé si tu ne lui dis pas de ne pas le faire, donc retour à la petite image...

[manu_css]

Merci pour ta réponse,

effectivement il s'agit d'un lien afin de permettre l'accessibilité via la tabulation.

En quoi cela est-il important ?

[Bovino]

Si tu fais par exemple :

Code :

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

<a href="" onclick="maFonction()">

Ta fonction va se lancer, puis après le href, qui ici recharge la page...
Donc, dans ce cas, il faut rajouter :

Code :

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

<a href="" onclick="maFonction();return false">

qui inhibe l'action du href.

[manu_css]

Merci beaucoup, c'était bien à cause de cela

J'étais pas prêt de trouver du coté du code.

[Bovino]

De rien, on est là pour ça !