Actualisation d'une partie d'une page HTML

Version imprimable

Bonjour,

J'ai une page WEB divisée en plusieurs parties grâce aux balises DIV. J'essaie de mettre à jour juste une partie de cette page après le clique sur un lien grâce à une fonction utilisant innerHTML. Mais le problème c'est que rien ne se passe. Voilà le 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
 
function getXHR()
{
    var xhr = null;
 
	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;
	}
 
    return(xhr);
}
 
function update_area(upd,div_id)
{
    var xhr = null;
 
    xhr = getXHR();
 
    xhr.onclick = function()
    {
        if ((xhr.readystatechange == 4) && (xhr.state == 2) )
            {
                document.getElementById(div_id).innerHTML = upd
            }
    }
}

et le code de ma page web

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
    <head>
        <link rel="stylesheet" href="jmaki-standard.css" type="text/css"></link>
        <title>Espace Administrateur</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="Espace_Administrateur_JSP.js" type="text/javascript"></script>
 
    </head>
    <body>
        <div id="outerBorder">
 
            <div id="header">
                <div id="banner">Application Name</div>
 
                <div id="subheader">
 
                    <div>
                        <a href="mailto:feedback@youraddress">Contact</a> |
                        <a href="#">Plan</a> |
                        <a href="#">Accueil</a>
                    </div>
 
                </div> <!-- sub-header -->
            </div> <!-- header -->
 
            <div id="main">
                <div id="leftSidebar">
 
                    <a href="#" onclick="update_area(testhtml.html,'content')">Nouvelles Inscriptions</a> <br/><br/><br/>
 
                         <a href="#">Facture</a> <br/><br/><br/>
 
                          <a href="#">Devis</a> <br/><br/><br/>
 
                    <a href="#">Gérer les Produits</a> <br/><br/><br/>
 
                    <a href="#">Gérer les Clients</a> <br/><br/><br/>
 
                    <a href="#">Suivre les Commandes</a>
 
                </div> <!-- leftSidebar -->
 
                <div id="content" style="height:400px">
 
                    Main Content Area
 
                </div> <!-- content -->
 
            </div> <!-- main -->
        </div> <!-- outerborder -->
    </body>
</html>

et le code de la page testhtml.html:

Code:

1
2
3
4
5
6
7
 
<html>
    <head>
        <title>Ma page</title>
    </head>
    <body>N'importe quoi!</body>
</html>

Ps: la page html principale a été générée grâce au plugin jmaki de NetBeans 6.5.1.

17/07/2009, 11h02
SpaceFrog

Code:

update_area('testhtml.html','content')
17/07/2009, 11h16
dinguedemoi

J'ai essayé le truc que tu m'as indiqué mais toujours rien. Quand je clique sur le lien la page se recharge mais rien n'y change.
17/07/2009, 11h19
SpaceFrog

xhr.onclick ????

revise les procédures ajax ...
17/07/2009, 11h26
dinguedemoi

J'ai trouvé le xhr.onclick sur un autre forum. Je ne l'ai essayé que parce que le xhr.onreadystatechange ne marchait pas.
17/07/2009, 11h38
franculo_caoulene

T'as bien lu ton code?? Tu passes upd qui vaut "testhtml.html" en argument à ta fonction et c'est ce même upd que tu définis dans le div. A en croire ton code, tu n'as aucunement besoin d'AJAX! Essaie ça :

Code:

document.getElementById(div_id).innerHTML = xhr.responseText

De plus, as-tu bien une requête HTTP d'exécutée? Car à aucun moment tu n'envoies la requête en utilisant xhr.send(null). Je te recommande la lecture des cours AJAX.
17/07/2009, 11h54
SpaceFrog

c'ets le declenchement même d'ajax qui est boiteux ...
regarde plutot les tutos ajax sur ce forum ...

En fait, pour le moment je n'ai besoin d'aucune requête. Je veux simplement afficher une page html entre 2 balises div après avoir cliqué sur le lien Nouvelles Inscriptions.

Mais j'ai quand même suivi tes recommandations et fait les changements suivants:

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
 
function update_area(div_id)
{
    var xhr = null;
 
    var x;
 
    var lien;
 
    xhr = getXHR();
 
    xhr.onreadystatechange = function()
    {
        if ((xhr.readystatechange == 4) && (xhr.state == 2) )
            {
                document.getElementById(div_id).innerHTML = xhr.responseText;
 
            }
        xhr.open("POST","test.php",true);
 
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
        x = document.getElementById(div_id);
 
        lien =x.value;
 
        xhr.send("lien="+lien);
    }
}

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
    <head>
        <link rel="stylesheet" href="jmaki-standard.css" type="text/css"></link>
        <title>Espace Administrateur</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="Espace_Administrateur_JSP.js" type="text/javascript"></script>
 
    </head>
    <body>
        <div id="outerBorder">
 
            <div id="header">
                <div id="banner">Application Name</div>
 
                <div id="subheader">
 
                    <div>
                        <a href="mailto:feedback@youraddress">Contact</a> |
                        <a href="#">Plan</a> |
                        <a href="#">Accueil</a>
                    </div>
 
                </div> <!-- sub-header -->
            </div> <!-- header -->
 
            <div id="main">
                <div id="leftSidebar">
 
                    <a href="#" onclick="update_area('content')">Nouvelles Inscriptions</a> <br/><br/><br/>
 
                         <a href="#">Facture</a> <br/><br/><br/>
 
                          <a href="#">Devis</a> <br/><br/><br/>
 
                    <a href="#">Gérer les Produits</a> <br/><br/><br/>
 
                    <a href="#">Gérer les Clients</a> <br/><br/><br/>
 
                    <a href="#">Suivre les Commandes</a>
 
                </div> <!-- leftSidebar -->
 
                <div id="content" style="height:400px">
 
                    Main Content Area
 
                </div> <!-- content -->
 
            </div> <!-- main -->
        </div> <!-- outerborder -->
    </body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php
if (isset($_POST["lien"]))
{
echo "<body> le lien choisi est ".$_POST["lien"]."</body>";
}
else
{
    echo "c est ça!";
}
 
?>

17/07/2009, 12h25
andry.aime

Salut,

Citation:

x = document.getElementById(div_id);

lien =x.value;

Un div n'a pas de value.
17/07/2009, 12h37
dinguedemoi
J'ai enlevé le value et maintenant j'ai:
Code:

1 2 3 x = document.getElementById(div_id); xhr.send("lien="+x);
Mais, je n'ai toujours rien quand je clique sur le lien.
17/07/2009, 12h45
andry.aime
Tu veux envoyer le contenue du div?
Code:

1 2 x = document.getElementById(div_id).innerHTML; xhr.send("lien="+x);
17/07/2009, 12h51
dinguedemoi

Oui. En fait je veux juste que mon code php reconnait le div utilisé et me l'affiche.